# 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行 `用户管理`，包含角色筛选（家长/孩子）、搜索框
**修改文件:** `docs/系统测试/test-cases.js`
- WEB-002: 删除 `await this.waitForElement('用户列表')` 及其 click
- WEB-010: 同上
---
### Task B: 修复 WEB-003（管理员查看任务统计）
**问题:** "任务管理 → 统计" 路径不存在。当前 Dashboard（首页）包含统计信息，而非任务统计独立页面。
**修复:** 改为访问 Dashboard（首页）：
1. 点击 "首页" → 跳转 `/dashboard`
2. 验证 "完成率" 或 "任务" 相关文字出现
**当前 Layout.vue:** 第85行 `` → 首页
**修改文件:** `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 但复杂，需单独分析 |