E2E Test → Report Pipeline

Playwright 端到端测试全流程 skill：从环境搭建到生成精美的 HTML/PDF 测试报告。

When to Use

• 需要为前端项目搭建 E2E 测试
• 需要编写或补充 Playwright 测试用例
• 需要运行测试并生成可交付的报告（HTML / PDF）
• 项目验收、迭代交付时需要测试报告产物

Procedure

Phase 1: 环境检测与安装

1. 检测前端技术栈

• 读取 package.json 确认框架（React/Vue/Next.js/Angular 等）
• 确认 UI 组件库（Ant Design / Element Plus / MUI 等）
• 确认构建工具（Vite / Webpack / Next.js 内置等）
• 确认前端开发服务器端口

1. 安装 Playwright

   npm install -D @playwright/test

1. 检测可用浏览器

• 优先尝试 npx playwright install chromium
• 如网络受限，使用系统已安装的浏览器：
• Windows: channel: 'msedge'
• macOS: channel: 'chrome'
• 在配置中设置正确的 channel

1. 生成 playwright.config.ts

• 参考 配置模板
• 根据实际检测结果填充 baseURL、channel、testDir 等

1. 添加 npm scripts

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

Phase 2: 编写测试用例

1. 分析应用路由和页面

• 读取路由配置文件（routes/index.tsx 等）
• 识别所有可测试页面

1. 按功能模块组织测试文件

• 目录结构：e2e/{module}.spec.ts
• 每个文件对应一个功能模块

1. 测试用例编写规则

• 参考 测试编写指南
• 使用中文测试标题（test('应显示登录表单', ...)）
• 优先使用语义化定位器（getByRole、getByText、getByPlaceholder）
• 为需要登录的测试创建 login 辅助函数
• 每个 describe 块使用 beforeEach 处理前置条件

1. 常见陷阱处理

• Ant Design 按钮文本可能有空格（如 "登 录"），使用正则：/登\s*录/
• networkidle 等待确保页面资源完全加载
• 401 拦截器可能干扰登录测试，检查 axios 拦截器逻辑
• Strict mode 报错时缩小选择器范围（如 .ant-result-title）

Phase 3: 执行测试

1. 确认服务可用

• 检查前端 dev server 是否运行
• 检查后端 API 是否运行
• 如未运行，提示用户启动或使用 webServer 配置自动启动

1. 运行测试

   npx playwright test --reporter=list

1. 失败用例调试

• 分析错误信息，定位原因
• 常见原因：选择器不匹配、超时、网络请求失败
• 修复后重新运行验证

1. 导出 JSON 结果

   npx playwright test --reporter=json 2>$null | Out-File -Encoding utf8 playwright-report/results.json

Phase 4: 生成测试报告

1. 读取 JSON 测试结果

• 解析 playwright-report/results.json
• 提取：套件信息、用例状态、耗时、时间线

1. 生成 HTML 报告

• 使用 报告模板 生成精美 HTML
• 包含以下区块：
• Header: 项目名、执行时间、Playwright 版本、浏览器、Workers 数、测试模式
• 摘要卡片: 总用例数、通过数（通过率）、失败/跳过、总耗时（平均耗时）
• 结论横幅: 全通过绿色 / 有失败红色
• 进度条: 通过/失败/跳过比例可视化
• 用例详情: 按测试套件分组，每条含状态图标、标题、功能描述、Badge、耗时、源码位置
• 耗时分布图: 水平条形图，按耗时降序
• 执行时间线: Worker 调度和完成时序
• 功能覆盖矩阵: 功能模块 × 覆盖场景 × 状态
• 运行环境: OS、Node.js、框架、浏览器、地址等
• 输出到 playwright-report/detailed-report.html

1. 生成 PDF

• 使用 Playwright 本身将 HTML 转为 PDF：

   const { chromium } = require('playwright');
   const browser = await chromium.launch({ channel: 'msedge' });
   const page = await browser.newPage();
   await page.goto('file:///path/to/detailed-report.html', { waitUntil: 'networkidle' });
   await page.pdf({
     path: 'playwright-report/E2E测试报告.pdf',
     format: 'A4',
     printBackground: true,
     margin: { top: '10mm', bottom: '10mm', left: '10mm', right: '10mm' }
   });
   await browser.close();

• 输出到 playwright-report/E2E测试报告.pdf

Phase 5: 交付与清理

1. 在浏览器中预览 HTML 报告
2. 确认 PDF 生成成功
3. 产物清单：

• playwright-report/detailed-report.html — 可交互 HTML 报告
• playwright-report/E2E测试报告.pdf — 可打印 PDF 报告
• playwright-report/results.json — 原始 JSON 数据

Design Tokens (报告主题)

--primary: #006D75;         /* 主题主色 */
--primary-light: #E6FFFB;
--success: #52C41A;
--success-bg: #F6FFED;
--error: #FF4D4F;
--error-bg: #FFF2F0;
--text: #1F1F1F;
--text-secondary: #595959;
--border: #F0F0F0;
--bg: #FAFAFA;

报告应根据项目品牌色自动调整，读取项目 CSS 变量或 Ant Design 主题配置。

Reference Files

• Playwright 配置模板
• 测试编写指南
• 报告 HTML 模板