用途
当用户要求添加端到端测试、浏览器测试、集成测试，或要求设置 Playwright 时，使用本技能。它指导在项目中完成 Playwright 端到端测试的搭建，包括测试配置、示例测试和 CI 集成。
主要能力
- 安装并初始化 Playwright 测试环境。
- 配置 playwright.config.ts，包括 baseURL 与自动启动开发服务器的 webServer。
- 创建验证应用可加载的冒烟测试。
- 可选地引入页面对象模式（page object pattern），封装选择器与操作。
- 添加运行 E2E 测试的 npm 脚本。
- 更新 .gitignore 以忽略测试产物。
- 集成 GitHub Actions，运行测试并在失败时上传 HTML 报告。
使用方式
安装 Playwright
npm init playwright@latest
这会创建 playwright.config.ts、tests/ 目录并安装浏览器。如果项目已有测试运行器，则手动安装：
npm install -D @playwright/test
npx playwright install
配置 playwright.config.ts
将 baseURL 设置为本地开发服务器 URL（例如 http://localhost:3000）。
配置 webServer 以自动启动开发服务器：
webServer: {
command: "npm run dev",
url: "http://localhost:3000",
reuseExistingServer: !process.env.CI,
},
本地开发时仅启用 chromium 以提升速度；在 CI 中启用所有浏览器。
创建冒烟测试
编写一个验证应用可加载的基础测试：
import { test, expect } from "@playwright/test";
test("homepage loads", async ({ page }) => {
await page.goto("/");
await expect(page).toHaveTitle(/.+/);
});
添加页面对象模式（可选）
对于较大的应用，创建 tests/pages/ 目录，放置封装选择器与操作的页面对象。
添加 npm 脚本
{
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui"
}
添加到 .gitignore
test-results/
playwright-report/
blob-report/
CI 集成
添加一个 GitHub Actions 步骤，先运行 npx playwright install --with-deps，再运行 npm run test:e2e。使用官方 actions/upload-artifact 在失败时保存 HTML 报告。
适用场景
适用于需要为项目引入端到端测试、浏览器测试或集成测试的场景，尤其是使用 Playwright 的项目。也适用于需要将 E2E 测试接入 CI 流程的情况。
限制与注意事项
- 选择器应使用 data-testid 属性，而不是 CSS 类。
- 使用 test.describe 对相关测试进行分组。
- 可运行
npx playwright codegen以交互方式录制测试。 - 关于收费、价格、平台支持范围等信息，资料中暂未提供。