编辑“︁Next.js端到端测试”︁（章节）

== Next.js中的端到端测试工具 ==
Next.js支持多种E2E测试工具，以下是常用的几种：
* '''Cypress'''：功能强大，支持实时重载和调试。
* '''Playwright'''：跨浏览器支持，性能优异。
* '''Puppeteer'''：轻量级，适合简单的测试场景。

=== 使用Cypress进行端到端测试 ===
以下是一个使用Cypress测试Next.js应用程序的示例：

<syntaxhighlight lang="javascript">
// cypress/e2e/homepage.cy.js
describe('Homepage Test', () => {
  it('should load the homepage and check for content', () => {
    cy.visit('http://localhost:3000'); // 访问Next.js应用
    cy.contains('Welcome to Next.js').should('be.visible'); // 验证页面内容
    cy.get('button').click(); // 模拟点击按钮
    cy.url().should('include', '/about'); // 验证导航是否成功
  });
});
</syntaxhighlight>

'''输出：'''
当测试运行时，Cypress会打开浏览器并执行以下操作：
1. 访问首页（`http://localhost:3000`）。
2. 检查页面是否包含文本“Welcome to Next.js”。
3. 点击按钮并验证是否导航到`/about`页面。

=== 使用Playwright进行端到端测试 ===
Playwright是另一个流行的E2E测试工具，支持多浏览器测试：

<syntaxhighlight lang="javascript">
// tests/homepage.spec.js
const { test, expect } = require('@playwright/test');

test('Homepage Test', async ({ page }) => {
  await page.goto('http://localhost:3000'); // 访问Next.js应用
  await expect(page).toHaveText('Welcome to Next.js'); // 验证页面内容
  await page.click('button'); // 模拟点击按钮
  await expect(page).toHaveURL(/about/); // 验证导航是否成功
});
</syntaxhighlight>

'''输出：'''
Playwright会在无头模式下运行测试，并输出测试结果：
1. 访问首页并验证内容。
2. 点击按钮并检查URL是否更新。