doa-e2etestlisted

# 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 内置等） - 确认前端开发服务器端口 2. **安装 Playwright** ```bash npm install -D @playwright/test ``` 3. **检测可用浏览器** - 优先尝试 `npx playwright install chromium` - 如网络受限，使用系统已安装的浏览器： - Windows: `channel: 'msedge'` - macOS: `channel: 'chrome'` - 在配置中设置正确的 channel 4. **生成 playwright.config.ts** - 参考 [配置模板](./references/playwright-config-template.md) - 根据实际检测结果填充 `baseURL`、`channel`、`testDir` 等 5. **添加 npm scripts** ```json { "test:e2e": "playwright test", "test:e2e:ui": "playwright test --ui" } ``` ### Phase 2: 编写测试用例 1. **分析应用路由和页面** - 读取路由配置文件（`routes/index.tsx` 等） - 识别所有可测试页面 2. **按功能模块组织测试文件** - 目录结构：`e2e/{module}.spec.ts` - 每个文件对应一个功能模块 3. **测试用例编写规则** - 参考 [测试编写指南](./references/test-writing-guide.md) - 使用中文测试标题（`test('应显示登录表单', ...)`） - 优先使用语义化定位器（`getByRole`、`getByText`、`getByPlaceholder`） - 为需要登录的测试创建 `login` 辅助函数 - 每个 `describe` 块使用 `beforeEach` 处理前置条件 4. **常见陷阱处理** - Ant Design 按钮文本可能有空格（如 "登 录"），使用正则：`/登\s*录/` - `networkidle` 等待确保页面资源完全加载 - 401 拦截器可能干扰登录测试，检查 axios 拦截器逻辑 - Strict mode 报错时缩小选择器范围（如 `