adding-e2e-tests

添加 E2E 测试（Playwright）

当用户要求添加端到端测试、浏览器测试、集成测试或设置 Playwright 时，请使用此技能。

步骤

1. 安装 Playwright

   npm init playwright@latest
   

   这会创建 playwright.config.ts、tests/ 目录并安装浏览器。如果项目已有测试运行器，请手动安装：

   npm install -D @playwright/test
   npx playwright install
   

2. 配置 playwright.config.ts

   • 将 baseURL 设置为本地开发服务器 URL（例如 http://localhost:3000）。

   • 配置 webServer，使其自动启动开发服务器：

     webServer: {
       command: "npm run dev",
       url: "http://localhost:3000",
       reuseExistingServer: !process.env.CI,
     },
     

   • 为了提高本地开发速度，仅启用 chromium；在 CI 中启用所有浏览器。

3. 创建冒烟测试 — 编写一个基本测试，验证应用是否能加载：

   import { test, expect } from "@playwright/test";
   
   test("homepage loads", async ({ page }) => {
     await page.goto("/");
     await expect(page).toHaveTitle(/.+/);
   });
   

4. 添加页面对象模式（可选） — 对于较大的应用，创建 tests/pages/ 目录，并在其中添加封装选择器和操作的页面对象。

5. 添加 npm 脚本

   {
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   }
   

6. 添加到 .gitignore

   test-results/
   playwright-report/
   blob-report/
   

7. CI 集成 — 添加一个 GitHub Actions 步骤，先运行 npx playwright install --with-deps，再运行 npm run test:e2e。使用官方的 actions/upload-artifact 在失败时保存 HTML 报告。

注意事项

• 使用 data-testid 属性作为选择器，而不是 CSS 类。
• 使用 test.describe 对相关测试进行分组。
• 运行 npx playwright codegen 以交互方式录制测试。