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

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 存在

---

执行步骤

第一步：运行最新测试，获取精确失败点

cd docs/系统测试
npm install
npm run test 2>&1 | tee test-output.log

这会生成新的 test-report-{timestamp}.json，精确显示每个测试的失败截图和时间点。

第二步：批量修复 test-cases.js

按 Task A~H 逐个修复测试用例的 run() 方法，主要改动：

• 删除不存在的二级菜单项点击
• 调整导航路径以匹配当前路由
• 更新文本断言以匹配当前页面内容

第三步：验证修复

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 但复杂，需单独分析