编辑“︁Next.js Playwright集成”︁（章节）

= Next.js Playwright集成 =

== 介绍 ==
Playwright 是一个由微软开发的现代化端到端测试框架，支持跨浏览器（Chromium、Firefox、WebKit）的自动化测试。在 Next.js 项目中集成 Playwright 可以帮助开发者编写可靠的自动化测试，确保应用在不同浏览器环境下的功能一致性。本指南将详细介绍如何在 Next.js 中配置和使用 Playwright 进行测试。

== 安装与配置 ==
首先，确保你的项目已初始化 Next.js。然后，通过以下命令安装 Playwright：

<syntaxhighlight lang="bash">
npm init playwright@latest
</syntaxhighlight>

安装完成后，Playwright 会生成一个默认的配置文件 `playwright.config.ts` 和一个示例测试目录 `tests`。你可以根据需要修改配置，例如调整浏览器类型或测试超时时间。

=== 配置文件示例 ===
<syntaxhighlight lang="javascript">
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30 * 1000,
  expect: { timeout: 5000 },
  fullyParallel: true,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});
</syntaxhighlight>

== 编写测试用例 ==
Playwright 支持编写同步和异步测试。以下是一个简单的测试示例，验证 Next.js 首页的标题是否正确：

<syntaxhighlight lang="javascript">
import { test, expect } from '@playwright/test';

test('Homepage has correct title', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle('Next.js Playwright Integration');
});
</syntaxhighlight>

=== 测试输出 ===
运行测试：
<syntaxhighlight lang="bash">
npx playwright test
</syntaxhighlight>

如果测试通过，输出将显示：
<syntaxhighlight lang="plaintext">
Running 1 test using 1 worker
✓  tests/example.spec.ts:3:1 › Homepage has correct title (1s)
</syntaxhighlight>

== 实际应用场景 ==
=== 表单提交测试 ===
以下是一个更复杂的测试案例，模拟用户填写表单并提交：
<syntaxhighlight lang="javascript">
test('Submit contact form', async ({ page }) => {
  await page.goto('/contact');
  await page.fill('input[name="name"]', 'John Doe');
  await page.fill('input[name="email"]', 'john@example.com');
  await page.click('button[type="submit"]');
  await expect(page.locator('.success-message')).toBeVisible();
});
</syntaxhighlight>

=== 流程图 ===
<mermaid>
graph TD
    A[启动测试] --> B[访问页面]
    B --> C[填写表单]
    C --> D[提交表单]
    D --> E[验证结果]
</mermaid>

== 高级功能 ==
=== 跨浏览器测试 ===
修改 `playwright.config.ts` 以包含多个浏览器：
<syntaxhighlight lang="javascript">
projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
</syntaxhighlight>

=== 视觉回归测试 ===
Playwright 支持截图对比，用于检测 UI 变化：
<syntaxhighlight lang="javascript">
test('Visual regression', async ({ page }) => {
  await page.goto('/');
  expect(await page.screenshot()).toMatchSnapshot('homepage.png');
});
</syntaxhighlight>

== 数学公式（可选） ==
如果需要计算测试覆盖率，可以使用以下公式：
<math>
\text{Coverage} = \frac{\text{Executed Lines}}{\text{Total Lines}} \times 100\%
</math>

== 总结 ==
通过集成 Playwright，Next.js 开发者可以轻松实现自动化测试，覆盖从简单断言到复杂用户交互的各种场景。Playwright 的强大功能和跨浏览器支持使其成为现代 Web 应用测试的理想选择。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js测试]]