跳到主要内容

如何使用 Next.js 设置 Playwright

Playwright 是一个测试框架，允许你使用单一 API 自动化 Chromium、Firefox 和 WebKit。你可以使用它来编写端到端 (E2E) 测试。本指南将向你展示如何使用 Next.js 设置 Playwright 并编写你的第一个测试。

快速开始​

最快的方法是使用 create-next-app 和 with-playwright 示例。这将创建一个带有 Playwright 配置的完整 Next.js 项目。

Terminal
npx create-next-app@latest --example with-playwright with-playwright-app

手动设置​

要安装 Playwright，运行以下命令：

Terminal
npm init playwright
# or
yarn create playwright
# or
pnpm create playwright

这将带你通过一系列提示来设置和配置 Playwright 以用于你的项目，包括添加 playwright.config.ts 文件。请参阅 Playwright 安装指南以获取分步指南。

创建你的第一个 Playwright E2E 测试​

创建两个新的 Next.js 页面：

app/page.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}
app/about/page.tsx
import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  )
}
pages/index.ts
import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}
pages/about.ts
import Link from 'next/link'

export default function About() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  )
}

然后，添加一个测试来验证你的导航是否正常工作：

tests/example.spec.ts
import { test, expect } from '@playwright/test'

test('should navigate to the about page', async ({ page }) => {
  // 从索引页面开始（baseURL 是通过 playwright.config.ts 中的 webServer 设置的）
  await page.goto('http://localhost:3000/')
  // 找到一个带有文本 'About' 的元素并点击它
  await page.click('text=About')
  // 新 URL 应该是 "/about"（baseURL 在那里使用）
  await expect(page).toHaveURL('http://localhost:3000/about')
  // 新页面应该包含一个带有 "About" 的 h1
  await expect(page.locator('h1')).toContainText('About')
})

需要了解：如果你在 playwright.config.ts 配置文件中添加 "baseURL": "http://localhost:3000"，你可以使用 page.goto("/") 而不是 page.goto("http://localhost:3000/")。

运行你的 Playwright 测试​

Playwright 将使用三个浏览器模拟用户导航你的应用程序：Chromium、Firefox 和 Webkit，这需要你的 Next.js 服务器运行。我们建议针对你的生产代码运行测试，以更接近地模拟你的应用程序的行为。

运行 npm run build 和 npm run start，然后在另一个终端窗口中运行 npx playwright test 来运行 Playwright 测试。

需要了解：或者，你可以使用 webServer 功能让 Playwright 启动开发服务器并等待直到它完全可用。

在持续集成 (CI) 上运行 Playwright​

Playwright 默认将在无头模式下运行你的测试。要安装所有 Playwright 依赖项，运行 npx playwright install-deps。

你可以从这些资源中了解更多关于 Playwright 和持续集成的信息：

最后于 更新