Skip to main content

使用 Next.js 设置 Playwright

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

¥Playwright is a testing framework that lets you automate Chromium, Firefox, and WebKit with a single API. You can use it to write End-to-End (E2E) testing. This guide will show you how to set up Playwright with Next.js and write your first tests.

快速开始​

¥Quickstart

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

¥The fastest way to get started is to use create-next-app with the with-playwright example. This will create a Next.js project complete with Playwright configured.

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

手动设置​

¥Manual setup

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

¥To install Playwright, run the following command:

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

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

¥This will take you through a series of prompts to setup and configure Playwright for your project, including adding a playwright.config.ts file. Please refer to the Playwright installation guide for the step-by-step guide.

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

¥Creating your first Playwright E2E test

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

¥Create two new Next.js pages:

import Link from 'next/link'

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

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

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

¥Then, add a test to verify that your navigation is working correctly:

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('http://localhost: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('http://localhost:3000/about')
  // The new page should contain an h1 with "About"
  await expect(page.locator('h1')).toContainText('About')
})

很高兴知道：如果将 "baseURL": "http://localhost:3000" 添加到 playwright.config.ts 配置文件，则可以使用 page.goto("/") 代替 page.goto("http://localhost:3000/")。

¥Good to know: You can use page.goto("/") instead of page.goto("http://localhost:3000/"), if you add "baseURL": "http://localhost:3000" to the playwright.config.ts configuration file.

运行 Playwright 测试​

¥Running your Playwright tests

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

¥Playwright will simulate a user navigating your application using three browsers: Chromium, Firefox and Webkit, this requires your Next.js server to be running. We recommend running your tests against your production code to more closely resemble how your application will behave.

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

¥Run npm run build and npm run start, then run npx playwright test in another terminal window to run the Playwright tests.

很高兴知道：或者，你可以使用 webServer 功能让 Playwright 启动开发服务器并等待它完全可用。

¥Good to know: Alternatively, you can use the webServer feature to let Playwright start the development server and wait until it's fully available.

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

¥Running Playwright on Continuous Integration (CI)

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

¥Playwright will by default run your tests in the headless mode. To install all the Playwright dependencies, run npx playwright install-deps.

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

¥You can learn more about Playwright and Continuous Integration from these resources: