docs: add cfc-web E2E test fix plan

Co-authored-by: Sisyphus <sisyphus@ohmyopencode.dev>

docs/superpowers/plans/2026-06-20-cfc-web-e2e-test-fix.md

@@ -0,0 +1,250 @@
+# cfc-web E2E 测试修复方案
+
+**生成日期:** 2026-06-20
+**问题:** 45/51 Web E2E 测试失败（`test-report-1777262956208.json`，2026-04-27）
+**根因:** 侧边栏菜单重构（单级菜单 → 二级嵌套 submenu）+ 页面结构变更，测试选择器与当前 UI 不匹配
+**测试框架:** Chrome DevTools MCP 自动化测试（`docs/系统测试/test-cases.js`）
+
+---
+
+## 背景：测试为什么失败
+
+### 测试定位机制
+
+`WebTestCase` 通过 `getSnapshot()` 获取页面所有可见文本元素列表，用 `waitForElement('文字')` 按**文本内容**查找元素 click。失败表现为 `error: null`（未抛异常，是断言失败），说明找到了含该文字的元素，但点击后**目标元素未出现**。
+
+### 管理员侧边栏历史变更
+
+**旧版（测试期望的结构）：**
+```
+用户管理        ← 点击展开/跳转用户列表页面
+  用户列表      ← 独立的二级菜单项（不存在！）
+任务管理
+  统计          ← 独立的二级菜单项（不存在！）
+  任务列表
+奖励管理
+  奖励列表
+```
+
+**当前 Layout.vue 真实结构：**
+```
+系统管理
+  用户管理        ← 子菜单项，点击直接加载 /users 页面，不再展开
+  套餐审核
+  规划师审核
+  操作日志
+  服务商审核
+  商品管理
+  订单管理
+  DanShop分类
+  分润规则
+  物流管理
+  文章分类
+  文章管理
+  系统配置
+  五维能量
+  教育体系
+  星座配置
+  八字配置
+  血型配置
+```
+
+关键差异：
+1. "用户管理" 在 "系统管理" submenu 下，不再有独立的 "用户列表" 二级菜单项
+2. "任务管理 → 统计" 不存在，"统计" 变成了其他页面（Dashboard）
+3. "奖励管理" 只有一个子项 "奖励列表"
+4. 多个测试用到的路径在新侧边栏中不存在
+
+---
+
+## 修复任务清单
+
+> 优先级判断：API测试全过(19/19)，Jest测试全过(211/211)，问题集中在 E2E 测试选择器。修复选择器是纯前端工作，依赖 Layout.vue 和各页面 Vue 文件，无需后端配合。
+
+### Task A: 修复 WEB-002/010（管理员查看用户列表）
+
+**问题:** 测试点击 "用户管理"（在"系统管理"子菜单下），然后期望出现 "用户列表" 可点击，但当前点击 "用户管理" 直接加载 `/users` 页面。
+
+**当前 Layout.vue 菜单路径:** `系统管理 → 用户管理` → 直接加载 `Users.vue`（路由 `/users`）
+
+**修复:** `test-cases.js` 中 WEB-002 和 WEB-010 的 `run()` 方法，删除第二步点击"用户列表"，改为：
+1. 点击 "系统管理" 展开
+2. 点击 "用户管理" → 页面跳转到 `/users`
+3. 等待 "用户管理" 页面内容出现（搜索框/表格）
+
+**验证:** `Users.vue` 第5行 `<span>用户管理</span>`，包含角色筛选（家长/孩子）、搜索框
+
+**修改文件:** `docs/系统测试/test-cases.js`
+- WEB-002: 删除 `await this.waitForElement('用户列表')` 及其 click
+- WEB-010: 同上
+
+---
+
+### Task B: 修复 WEB-003（管理员查看任务统计）
+
+**问题:** "任务管理 → 统计" 路径不存在。当前 Dashboard（首页）包含统计信息，而非任务统计独立页面。
+
+**修复:** 改为访问 Dashboard（首页）：
+1. 点击 "首页" → 跳转 `/dashboard`
+2. 验证 "完成率" 或 "任务" 相关文字出现
+
+**当前 Layout.vue:** 第85行 `<el-menu-item index="/dashboard">` → 首页
+
+**修改文件:** `docs/系统测试/test-cases.js`
+- WEB-003: 将 "任务管理 → 统计" 路径改为 "首页 → Dashboard"
+
+---
+
+### Task C: 修复 WEB-004/005/040~045（指导师 Web 后台）
+
+**问题:** 指导师登录 Web 后台，期望的侧边栏结构与当前 Layout.vue 完全不符（`isPlanner` 分支）。
+
+**当前 Layout.vue 规划师侧边栏:**
+```
+工作台 (/teacher-dashboard)
+服务管理
+  我的家庭 (/teacher-families)
+  我的团队 (/teacher-team)
+业务管理
+  套餐管理 (/teacher-packages)
+  订单佣金 (/teacher-orders)
+测评管理
+  DAN测评 (/teacher-assessment)
+  家长咨询 (/teacher-consult)
+消息中心 (/teacher-messages)
+```
+
+**失败的测试用例对应关系:**
+- WEB-004/040: 指导师登录 → 期望"指导师工作台"，当前有"工作台"
+- WEB-005/041: "我的家庭" 列表 → 对应 `TeacherFamilies.vue`
+- WEB-042: 家庭任务详情 → `TeacherFamilies.vue` → 任务详情
+- WEB-043~045: 任务审核 → 对应 `TeacherFamilies.vue` 中的任务审核功能
+
+**修复:** 更新所有 teacher 相关测试的选择器：
+- "指导师工作台" → "工作台"
+- "我的家庭" → 保持不变（在服务管理子菜单下）
+- 任务审核流程 → 对应 `TeacherFamilies.vue`
+
+**修改文件:** `docs/系统测试/test-cases.js`
+
+---
+
+### Task D: 修复 WEB-015~023（管理员任务管理）
+
+**问题:** "任务管理" submenu 下的子项名称与测试期望不匹配。
+
+**当前 Layout.vue:**
+```
+任务管理
+  任务列表     ← /tasks
+  任务模板     ← /task-templates
+```
+
+测试期望点击"创建任务"按钮，但 `Tasks.vue` 当前可能没有这个按钮，或在不同位置。
+
+**修复:** 逐个检查以下测试的 `Tasks.vue` 实际内容：
+- WEB-015: "管理员创建任务" → 检查 `Tasks.vue` 是否有创建任务按钮
+- WEB-016~018: 任务分类/积分/截止时间 → 属于创建任务弹窗内的表单字段
+- WEB-019/020: 编辑/删除任务 → 表格行内操作按钮
+- WEB-022/023: 任务历史/统计 → 需确认是否存在
+
+**修改文件:** `docs/系统测试/test-cases.js`
+
+---
+
+### Task E: 修复 WEB-024~030（奖励管理）
+
+**问题:** "奖励管理 → 奖励列表" 当前是正确的（Layout.vue 第129行），但可能按钮或操作字段变更。
+
+**当前 Layout.vue:**
+```
+奖励管理
+  奖励列表     ← /rewards
+```
+
+**修复:** 检查 `Rewards.vue` 是否有创建奖励按钮、分类设置等功能入口。
+
+**修改文件:** `docs/系统测试/test-cases.js`
+
+---
+
+### Task F: 修复 WEB-031~039（家庭管理 + 系统管理）
+
+**问题:** 家庭管理路径正确（家庭列表/孩子管理/积分管理），但子菜单项内容可能有变化。
+
+**当前 Layout.vue:**
+```
+家庭管理
+  家庭列表     ← /families
+  孩子管理     ← /children
+  积分管理     ← /points
+```
+
+**修复:** 确认各页面的操作按钮与测试期望一致。
+
+---
+
+### Task G: 修复 WEB-035~038（孩子管理/积分管理/系统管理）
+
+**问题:** 测试选择器基于旧版菜单文字，需更新。
+
+---
+
+### Task H: 修复 WEB-047~051（安全测试：SQL注入/XSS/验证）
+
+**问题:** 这些测试打开"编辑用户"弹窗，但当前 `Users.vue` 的编辑功能使用 `handleEdit()` 打开 el-dialog，测试期望的表单字段名可能有变化。
+
+**修复:** 检查 `Users.vue` 编辑弹窗的表单字段：
+- 当前有：昵称、手机号（Users.vue 第26~41行）
+- 测试用：无效手机号、无效身份证、积分超范围
+- 需确认哪些字段在当前 UI 存在
+
+---
+
+## 执行步骤
+
+### 第一步：运行最新测试，获取精确失败点
+
+```bash
+cd docs/系统测试
+npm install
+npm run test 2>&1 | tee test-output.log
+```
+
+这会生成新的 `test-report-{timestamp}.json`，精确显示每个测试的失败截图和时间点。
+
+### 第二步：批量修复 test-cases.js
+
+按 Task A~H 逐个修复测试用例的 `run()` 方法，主要改动：
+- 删除不存在的二级菜单项点击
+- 调整导航路径以匹配当前路由
+- 更新文本断言以匹配当前页面内容
+
+### 第三步：验证修复
+
+```bash
+npm run test
+# 验证通过率从 6/51 提升到 45+/51
+```
+
+---
+
+## 已知限制
+
+1. **Web E2E 测试环境依赖**: 测试需要 Chrome DevTools MCP 服务运行，自动化浏览器环境。当前测试环境可能未启动。
+2. **部分测试数据依赖**: 某些测试（如安全测试 WEB-047~051）依赖特定测试数据准备。
+3. **Dashboard 统计页面**: "任务统计" 独立页面不存在，测试需改为 Dashboard 验证。
+4. **测试报告日期**: 当前最新报告为 2026-04-27，之后 Web 前端有较大改动（profile.vue 389行），需重新运行完整测试。
+
+---
+
+## 建议优先级
+
+| 优先级 | 任务 | 理由 |
+|:------:|------|------|
+| P0 | Task A（WEB-002/010 用户列表） | P0 级需求，测试用例最多 |
+| P0 | Task C（指导师测试） | P0 级需求，15个测试 |
+| P1 | Task B（WEB-003 统计） | P0 级需求 |
+| P1 | Task D（任务管理） | P0 级需求，8个测试 |
+| P2 | Task E~G（奖励/家庭/系统管理） | P1/P2 级需求 |
+| P2 | Task H（安全测试） | P0 但复杂，需单独分析 |