使用 Next.js 设置 Playwright

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

快速入门

最快的入门方法是使用create-next-app 和with-playwright 示例。这将创建一个 Next.js 项目，并配置好 Playwright。

终端

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

手动设置

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

终端

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

这将引导您完成一系列提示，以针对您的项目设置和配置 Playwright，包括添加playwright.config.ts 文件。请参阅Playwright 安装指南以获取分步指南。

创建您的第一个 Playwright 端到端测试

创建两个新的 Next.js 页面

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 }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('https://127.0.0.1:3000/')
  // Find an element with the text 'About' and click on it
  await page.click('text=About')
  // The new URL should be "/about" (baseURL is used there)
  await expect(page).toHaveURL('https://127.0.0.1:3000/about')
  // The new page should contain an h1 with "About"
  await expect(page.locator('h1')).toContainText('About')
})

需要了解:

如果您将"baseURL": "https://127.0.0.1:3000"添加到playwright.config.ts 配置文件，则可以使用page.goto("/") 代替page.goto("https://127.0.0.1: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 和持续集成的更多信息