@pzy560117/codex-harness 0.1.0 → 0.1.1

package/package-source/docs/codex-harness-engineering/templates/package-assets/skills/browser-e2e-testing/SKILL.md

@@ -0,0 +1,305 @@
+---
+name: browser-e2e-testing
+description: 使用 browser_subagent (devtools MCP) 进行全量前端 E2E 测试。通过自然语言测试用例直接控制浏览器，覆盖 10 个测试维度，无需安装测试框架。适用于前端页面验收、联调验证、UI 回归测试。
+---
+
+# Browser E2E Testing — 自然语言浏览器端到端测试
+
+你是一位资深的前端 E2E 测试工程师。你的任务是通过 `browser_subagent` 工具直接控制浏览器，以**自然语言测试用例**的形式对前端应用进行全量、全维度的端到端测试。
+
+## 核心理念
+
+- **零依赖**: 不安装 Playwright/Cypress/Selenium 等测试框架，直接用 browser_subagent 控制浏览器
+- **自然语言驱动**: 测试用例以人类可读的自然语言描述，browser_subagent 根据描述执行操作
+- **全维度覆盖**: 每条测试步骤标注所属维度，确保不遗漏任何测试角度
+- **真实用户模拟**: 所有页面导航通过 UI 点击完成（禁止直接输入 URL），测试数据使用真实后端
+- **自动录制**: 每个测试轮次自动生成 WebP 视频，便于回溯
+
+---
+
+## 测试维度体系（10 维度）
+
+每条测试步骤必须标注对应维度标记 `[D1]`~`[D10]`，确保全量覆盖：
+
+| #   | 维度     | 说明                                     | 标记 | 检查要点                                                          |
+| --- | -------- | ---------------------------------------- | ---- | ----------------------------------------------------------------- |
+| D1  | 页面渲染 | 元素存在性、文案正确性、布局结构         | 🎨   | 标题/副标题/表单字段/按钮/图标是否存在且文案正确                  |
+| D2  | 交互功能 | 点击、输入、下拉、弹窗等用户操作         | 🖱️ | 按钮可点击/输入框可输入/下拉可展开/弹窗可关闭                     |
+| D3  | 数据展示 | API 数据正确展示、日期/金额/状态格式化   | 📊   | 数据来源正确/格式一致/金额带¥/日期格式统一/状态标签颜色正确      |
+| D4  | 表单验证 | 必填校验、格式校验、关联校验、边界值     | ✅   | 空提交报错/格式错误提示/关联字段校验(如密码确认)/边界值(最大最小) |
+| D5  | 导航流转 | UI 点击跳转、页面间传参、返回、菜单导航  | 🔀   | 菜单点击跳转/按钮跳转/链接跳转/返回行为/面包屑/侧边栏菜单高亮     |
+| D6  | 状态管理 | 加载态(骨架屏)、空态、错误态、重试机制   | ⏳   | 初始加载有骨架屏或Spinner/无数据有空态提示/错误有重试按钮         |
+| D7  | 权限控制 | 角色路由守卫、按钮可见性、跨角色越权保护 | 🔒   | 无权限时拦截或403/不同角色功能隔离/越权操作（如摄影师预约）必被阻挡 |
+| D8  | UI 反馈  | Toast 消息、Modal 确认、Loading 指示器   | 💬   | 操作成功有Toast/删除有二次确认Modal/请求中按钮loading             |
+| D9  | 组件联动 | 筛选联动列表、席位联动价格、Tab 联动内容 | 🔗   | 改筛选条件→列表更新/改数量→金额更新/切Tab→内容切换             |
+| D10 | 边界情况 | 空数据、缺乏前置数据时的打断、并发依赖   | ⚠️ | 必须提供核心前言数据否则阻断/长文本截断/空搜索结果有提示          |
+
+---
+
+## 工作流程
+
+### Phase 1: 前端代码研究（必须）
+
+在编写测试用例前，**必须**先研究前端源码：
+
+```
+1. 列出所有页面文件（views/）和路由配置（router/index.ts）
+2. 逐个查看每个页面的 <template> 部分，提取：
+   - 所有可交互元素（按钮/输入框/下拉/Tab/链接）
+   - 所有条件渲染（v-if/v-else: 加载态/空态/错误态/正常态）
+   - 所有表单字段和验证规则（rules）
+   - 所有 emit 事件和 router.push 跳转
+   - 所有 Modal/Drawer/弹窗组件
+3. 查看 stores/ 了解认证和状态管理逻辑
+4. 查看 api/ 了解后端接口调用
+5. 查看 components/ 了解可复用组件的 props 和交互
+```
+
+### Phase 2: 测试用例生成
+
+按以下结构为每个页面生成自然语言测试用例：
+
+#### 2.1 测试轮次划分
+
+#### 2.1 测试结构：基于“业务旅程 (User Journey)” 与 “轮次”
+
+不要局限于孤立页面，必须编排至少 1-2 条跨越全程的**业务闭环旅程**。如果在执行这些旅程前发现数据库为空，**必须利用后台接口或 DB 前置植入种子数据**。
+
+| 轮次     | 范围                   | 说明                         |
+| -------- | ---------------------- | ---------------------------- |
+| 前置造数 | DB 或 Admin 接口注入    | 业务强依赖的数据(如上架商品) |
+| 认证流程 | 注册/登录/退出         | 最先测试，后续轮次依赖登录态 |
+| 核心链路 | 端到端真实业务闭环     | 围绕 User Journey 编排不断点 |
+| 权限控制 | 跨角色越权拦截         | 刻意使用错误角色操作专属按钮 |
+| 管理功能 | 后台管理页面           | CRUD 操作为主                |
+
+#### 2.2 单个 TC 编写模板
+
+```markdown
+### TC-{轮次}.{序号} [{执行身份: Client/Admin/Guest等}] {测试标题}
+
+\`\`\`
+1. {前置状态/入口说明} (注：若有特定登录角色要求，必须明确声明隔离！)
+2. [D{维度}] {操作动作} → {预期结果}
+3. [D{维度}] {操作动作} → {预期结果}
+...
+\`\`\`
+```
+
+**编写规则**：
+
+1. 每步骤必须标注维度 `[D1]`~`[D10]`
+2. 操作用 `→` 分隔预期结果
+3. 同一 TC 中步骤按自然操作顺序排列
+4. 页面间导航在操作中明确说明点击的 UI 元素
+
+#### 2.3 导航原则（关键）
+
+> **禁止直接输入 URL 跳转页面。**
+> 所有页面导航必须通过点击 UI 元素（按钮、菜单项、链接）完成。
+>
+> **例外破壁机制 (Deep Link Fallback)**：
+>
+> - 每个测试轮次的初始入口页（如登录页）可直接输入 URL。
+> - 路由守卫拦截测试时允许直接输入 URL。
+> - **如果页面依赖动态路由（如 `:id`），且你在入口列表遇到为空（无论怎么搜都出不来），允许你强行猜测传入 URL（如 `/users/1`）来突围，以此防止大量依赖数据的下级核心页面漏测。**
+
+#### 2.4 维度覆盖检查
+
+为每个页面生成测试用例后，使用以下检查清单确认覆盖度：
+
+```
+页面: {页面名}
+□ D1 页面渲染 — 标题/表单/按钮/卡片/表格列是否验证
+□ D2 交互功能 — 每个可点击元素是否测试
+□ D3 数据展示 — API 数据/格式化/颜色编码是否验证
+□ D4 表单验证 — 每个输入框的校验规则是否测试
+□ D5 导航流转 — 每个跳转链路是否通过 UI 点击验证
+□ D6 状态管理 — loading/empty/error 三态是否覆盖
+□ D7 权限控制 — 角色相关的显隐是否测试
+□ D8 UI 反馈 — Toast/Modal/Loading 是否覆盖
+□ D9 组件联动 — 筛选/数量/Tab 联动是否测试
+□ D10 边界情况 — 空数据/长文本/特殊输入是否覆盖
+```
+
+### Phase 3: 测试执行
+
+使用 `browser_subagent` 工具逐轮次执行测试：
+
+```python
+# 调用模板
+browser_subagent(
+    TaskName="E2E 测试轮次 X: {模块名}",
+    RecordingName="e2e_{模块名缩写}",
+    Task="""
+    你是前端 E2E 测试执行器。按以下步骤在浏览器中依次操作并验证。
+    
+    ## 💊 容错自愈协议 (Self-Healing)
+    1. 找不到元素？ 请不要立刻报错，尝试先向下滚动 (Scroll) 页面。
+    2. 有弹窗遮挡？ 执行任务前主动关闭中途跳出的非预期通知或授权弹窗（找 `X`, `取消`）。
+    3. 等待迟缓？ 若点击后未能立即出现预期结果，请耐心等待 5s 再确认，仍不出现则尝试后退恢复现场。
+    4. 【防截断控制】(Continue-On-Error)：绝对禁止因为某步骤报错停止任务。遇错请记录，主动恢复界面强制接续执行！
+
+    ## 🛡️ 网络与隐性黑洞错误监控 (Network & Console Assurance)
+    - 警惕“未崩溃的 UI”陷阱！执行核心写或查等强业务交互后，不要单纯依据页面没有弹错就判 PASS（因前端可能强行吞咽异常）。
+    - 产生强交互后，必须附带抽查控制台或网络（若工具支持），发现 **500, 403, 404** 等严重 API 状态码时，直接判定 `FAIL`，将错误抓取放入报告进行定位！
+  
+    ## 导航规则
+    - 禁止直接在地址栏输入 URL（本轮初始入口除外）
+    - 所有页面切换必须通过点击按钮/菜单/链接完成
+  
+    ## 测试步骤
+  
+    ### 初始入口
+    打开 {BASE_URL}/login
+  
+    ### TC-X.1 {标题}
+    1. ...
+    2. ...
+  
+    ### TC-X.2 {标题}
+    1. ...
+  
+    ## 返回报告
+    完成后返回每个 TC 的 PASS/FAIL 状态和发现的问题描述。
+    """
+)
+```
+
+### Phase 4: 结果汇总
+
+在 `walkthrough.md` 中汇总所有轮次的测试结果：
+
+```markdown
+# E2E 测试报告
+
+## 测试环境
+- 前端: {URL}
+- 后端: {URL}
+- 测试时间: YYYY-MM-DD HH:mm
+
+## 测试结果汇总
+
+| 轮次 | 范围 | TC 总数 | PASS | FAIL | 录制 |
+|------|------|---------|------|------|------|
+| 1 | 认证流程 | X | Y | Z | e2e_auth_flow.webp |
+| ... | ... | ... | ... | ... | ... |
+
+## 详细结果
+
+### 轮次 1: 认证流程
+
+| TC | 标题 | 状态 | 说明 |
+|----|------|------|------|
+| TC-1.1 | 注册表单验证 | ✅ PASS | |
+| TC-1.2 | 注册→登录导航 | ❌ FAIL | 链接不可点击 |
+
+### 失败用例详情
+
+#### TC-1.2 注册→登录导航
+- **维度**: D5 导航流转
+- **期望**: 点击"已有账号？立即登录"跳转到登录页
+- **实际**: 链接无响应
+- **截图**: ![失败截图](path/to/screenshot.png)
+
+## 维度覆盖统计
+
+| 维度 | 测试点 | PASS | FAIL | 覆盖率 |
+|------|--------|------|------|--------|
+| D1 页面渲染 | X | Y | Z | 100% |
+| ... | ... | ... | ... | ... |
+```
+
+### Phase 5: 无人值守自愈与自动推进循环 (Agentic Loop)
+
+**关键指令**：当接收到“进行前端测试”、“执行 E2E 测试”等指令时，你必须进入自动化的无穷循环测试模式（Agentic Loop），严格遵循以下逻辑直至所有模块测试完毕：
+
+1. **自动记录报告**：每执行完一个轮次的 `browser_subagent`，必须立即将测试跑出来的 PASS/FAIL 和录屏名称通过 `multi_replace_file_content` 写入 `walkthrough.md` 或其他指定报告文档。
+2. **自动修复与重测 (Auto-Fix & Retest)**：
+   - 只要子代理报告中存在 `FAIL` 的步骤（UI 定位失败、路由错误、表单异常、页面 500 报错）。
+   - 绝对不要询问用户，**必须自主分析原因**！通过搜索并阅读对应的 Vue 视图、Store 或后端 Java/TS 接口逻辑等源码来定位问题。
+   - 使用文件编辑工具（如 `replace_file_content` 或 `write_to_file`）修改前端或后端代码完成 Bug 修复。
+   - 修复后，针对**出错的当前模块**，自动重调 `browser_subagent` 进行回归测试，并持续修复与重测，直到全 TC 达成 `PASS`。
+3. **自动推进下一环节 (Auto-Advance)**：
+   - 一旦当前轮次所有 TC 均为 `PASS`，不需要等待人类确认，**自动进行下一个测试轮次**的用例生成与执行。
+   - 无缝衔接下一个功能模块（如：基础认证跑通后，直接开始测“用户核心回收模块”，接着测“快递员任务流转模块”等），做到一直在后台持续测试。
+```
+
+---
+
+## 不同项目类型的测试侧重
+
+### SPA 应用（Vue/React/Angular）
+
+- **重点**: 路由守卫、状态管理、组件联动
+- **特殊**: 验证 SPA 无刷新导航、浏览器前进后退、History 模式
+
+### 管理后台
+
+- **重点**: CRUD 操作完整性、表格分页排序筛选、Modal 表单
+- **特殊**: 批量操作、导入导出、数据一致性
+
+### 电商/预约系统
+
+- **重点**: 下单流程闭环、支付状态、库存联动
+- **特殊**: 并发预约、金额计算、订单状态流转
+
+### 多角色系统
+
+- **重点**: 权限矩阵、模块切换、角色专属功能
+- **特殊**: 每个角色的菜单可见性、功能按钮显隐
+
+---
+
+## 常见问题处理
+
+### browser_subagent 找不到元素
+
+- 等待页面加载完成（检查骨架屏消失）
+- 检查元素是否在 Modal/Drawer 内（可能需要先打开）
+- 检查元素是否需要滚动到可视区域
+
+### 测试数据不足
+
+- 先通过管理端创建测试数据（剧本/场次/DM）
+- 在后续轮次中使用已创建的数据
+
+### 跨轮次状态依赖
+
+- 每轮次独立登录，不依赖上一轮次的登录态
+- 测试数据通过 UI 在当前轮次创建或使用预置数据
+
+### 弹窗/Toast 消失太快
+
+- browser_subagent 应在操作后立即检查弹窗内容
+- Toast 通常 3 秒消失，需快速验证
+
+---
+
+## 注意事项
+
+> [!IMPORTANT]
+>
+> - 必须先研究前端源码再编写测试用例，不能凭猜测
+> - 每个页面至少覆盖 D1-D6 六个核心维度
+> - 导航全部通过 UI 点击，不走 URL（路由守卫测试除外）
+> - 使用真实后端数据，禁止 Mock
+
+> [!WARNING]
+>
+> - browser_subagent 每次调用是独立会话，不共享登录态
+> - 单次 browser_subagent 的 Task 描述不宜过长，建议每轮 5-10 个 TC
+> - 测试中创建的数据（如新剧本/新 DM）会影响后续测试，注意清理或使用唯一标识
+
+> [!TIP]
+>
+> - 先测认证流程，确保登录可用后再测其他功能
+> - 管理端 CRUD 测试可以为后续用户端测试创建数据
+> - 录制视频文件名应有意义：`e2e_auth_flow`、`e2e_user_booking`
+
+---
+
+## 更新日志
+
+- **2026-04-02**: 融合优化全新流程：强化 Phase 1 预研步骤、扩充 10 维度细则、确立 4 Phase 流水线机制、并保留【容错自愈协议】确保 subagent 中断逃生率。
+- **2026-02-17**: 创建初始版本，覆盖 10 维度测试体系和完整工作流