From e52fcce9b7b012455907bd58f34ed615a99c3837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sat, 4 Apr 2026 07:37:04 +0800 Subject: [PATCH] docs: add E2E test fix design document --- .../specs/2026-04-04-e2e-test-fix-design.md | 320 ++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100644 docs/superpowers/specs/2026-04-04-e2e-test-fix-design.md diff --git a/docs/superpowers/specs/2026-04-04-e2e-test-fix-design.md b/docs/superpowers/specs/2026-04-04-e2e-test-fix-design.md new file mode 100644 index 0000000..ef540bf --- /dev/null +++ b/docs/superpowers/specs/2026-04-04-e2e-test-fix-design.md @@ -0,0 +1,320 @@ +# E2E测试用例全面修复设计文档 + +**日期**: 2026-04-04 +**作者**: 张翔 +**状态**: 待审查 + +## 概述 + +本文档描述了Novalon管理系统的E2E测试用例全面修复方案，包括立即修复和短期目标两个阶段。 + +## 背景 + +### 当前状态 + +- **总测试用例数**: 52个 +- **已验证测试用例**: 6个 +- **通过测试用例**: 2个（33.3%通过率） +- **失败测试用例**: 4个 + +### 已完成的工作 + +1. ✅ 禁用测试并行执行，避免状态混乱 +2. ✅ 统一URL匹配模式为`/\/(dashboard|\/)$/` +3. ✅ 修复Dashboard元素选择器 +4. ✅ 修复登录失败测试用例设计 + +### 发现的问题 + +1. **错误消息选择器不正确** + - 当前：`.el-message--error` + - 实际：Element Plus的ElMessage组件使用`.el-message .el-message__content` + +2. **登出按钮选择器不正确** + - 当前：`[data-testid="user-menu"]`和`[data-testid="logout-button"]` + - 实际：使用`el-dropdown`组件，需要点击`.el-avatar`后选择"退出登录" + +3. **测试用例覆盖不完整** + - 剩余46个测试用例未验证 + - 可能存在类似的选择器问题 + +## 设计方案 + +### 第一部分：立即修复 + +#### 1.1 错误消息选择器修复 + +**问题分析**： +- Element Plus的ElMessage组件生成的DOM结构为： + ```html +
+

错误消息内容

+
+ ``` +- 当前选择器`.el-message--error`无法匹配到可见元素 + +**修复方案**： +```typescript +// 修复前 +await expect(page.locator('.el-message--error')).toBeVisible({ timeout: 5000 }); + +// 修复后 +await expect(page.locator('.el-message .el-message__content')).toBeVisible({ timeout: 5000 }); +``` + +**影响范围**： +- 测试用例1.2：错误的密码登录失败 +- 测试用例1.3：不存在的用户登录失败 +- 测试用例1.5：禁用用户登录失败 + +#### 1.2 登出功能修复 + +**问题分析**： +- DefaultLayout.vue使用`el-dropdown`组件实现用户菜单 +- 点击`.el-avatar`后显示下拉菜单 +- 下拉菜单中包含"退出登录"选项 + +**修复方案**： +```typescript +// 修复前 +await page.click('[data-testid="user-menu"]'); +await page.click('[data-testid="logout-button"]'); + +// 修复后 +await page.locator('.el-avatar').click(); +await page.waitForTimeout(500); +await page.locator('.el-dropdown-menu').getByText('退出登录').click(); +``` + +**影响范围**： +- 测试用例1.6：登出功能正常 + +### 第二部分：短期目标 + +#### 2.1 测试用例分类 + +剩余的46个测试用例分布在以下模块： + +| 模块 | 测试用例数 | 主要验证内容 | 预期问题 | +|------|-----------|-------------|---------| +| 用户管理流程测试 | 5 | 用户列表、创建、编辑、删除、状态切换 | 表格选择器、表单选择器、按钮选择器 | +| 角色管理流程测试 | 5 | 角色列表、创建、编辑、删除、权限分配 | 类似用户管理 | +| 菜单管理流程测试 | 4 | 菜单树、创建、编辑、删除 | 树形结构选择器 | +| 权限验证测试 | 3 | 管理员权限、普通用户权限、未登录用户 | 权限提示选择器 | +| 字典管理流程测试 | 5 | 字典列表、创建、编辑、删除 | 表格选择器 | +| 系统配置流程测试 | 4 | 配置列表、创建、编辑、删除 | 表格选择器 | +| 文件管理流程测试 | 5 | 文件列表、上传、下载、删除 | 文件选择器 | +| 操作日志流程测试 | 5 | 日志列表、查询、详情 | 表格选择器 | +| 登录日志流程测试 | 4 | 日志列表、查询、详情 | 表格选择器 | +| 异常日志流程测试 | 4 | 日志列表、查询、详情 | 表格选择器 | +| 通知公告流程测试 | 5 | 公告列表、创建、编辑、删除、发布 | 表格选择器 | +| 性能和稳定性测试 | 3 | 并发登录、大数据量、长时间运行 | 性能指标验证 | + +#### 2.2 执行策略 + +**阶段1：批量修复常见问题**（预计30分钟） + +目标：统一修复所有常见的选择器问题 + +修复内容： +1. **错误消息选择器**：所有`.el-message--error`改为`.el-message .el-message__content` +2. **成功消息选择器**：所有`.success-message`改为`.el-message--success .el-message__content` +3. **表格选择器**：统一使用`.el-table`相关选择器 +4. **表单选择器**：统一使用`[name="fieldName"]`或`input[placeholder="..."]` +5. **按钮选择器**：统一使用`button:has-text("按钮文本")`或`[data-testid="..."]`（如果存在） + +**阶段2：逐模块验证**（预计1小时） + +目标：按模块顺序运行测试，记录并修复问题 + +执行步骤： +1. 运行用户管理流程测试（5个测试用例） +2. 记录失败原因 +3. 针对性修复 +4. 重复步骤1-3，直到所有模块测试通过 + +**阶段3：全面测试**（预计30分钟） + +目标：运行完整测试套件，验证所有修复 + +执行步骤： +1. 运行完整测试套件（52个测试用例） +2. 记录所有失败的测试用例 +3. 分析失败原因 +4. 针对性修复 +5. 重新运行测试套件 +6. 生成最终测试报告 + +#### 2.3 常见选择器映射表 + +| 功能 | 错误选择器 | 正确选择器 | +|------|-----------|-----------| +| 错误消息 | `.el-message--error` | `.el-message .el-message__content` | +| 成功消息 | `.success-message` | `.el-message--success .el-message__content` | +| 表格 | `.user-table`, `.role-table` | `.el-table` | +| 表格行 | `.user-row`, `.role-row` | `.el-table__row` | +| 用户头像 | `[data-testid="user-menu"]` | `.el-avatar` | +| 登出按钮 | `[data-testid="logout-button"]` | `.el-dropdown-menu`).getByText('退出登录') | +| 欢迎消息 | `.welcome-message` | `.dashboard` | + +## 技术约束 + +### 前端技术栈 +- Vue 3 + TypeScript +- Element Plus UI组件库 +- Vite构建工具 + +### 测试技术栈 +- Playwright测试框架 +- TypeScript测试脚本 +- 自定义报告器 + +### 浏览器环境 +- Chromium（主要测试浏览器） +- Firefox（可选） +- WebKit（可选） + +## 成功标准 + +### 立即修复成功标准 +- ✅ 测试用例1.2、1.3、1.5通过 +- ✅ 测试用例1.6通过 +- ✅ 用户认证流程测试模块通过率达到100% + +### 短期目标成功标准 +- ✅ 所有52个测试用例运行完成 +- ✅ 测试通过率达到90%以上（至少47个测试用例通过） +- ✅ 所有失败测试用例有明确的失败原因记录 +- ✅ 生成完整的测试报告 + +## 风险与缓解措施 + +### 风险1：前端代码与测试用例不匹配 +**影响**: 测试用例可能使用了前端不存在的元素选择器 +**缓解措施**: +- 检查前端组件代码，确认实际DOM结构 +- 使用Playwright的代码生成工具验证选择器 +- 添加截图功能，记录测试失败时的页面状态 + +### 风险2：测试数据不足 +**影响**: 部分测试用例可能因缺少测试数据而失败 +**缓解措施**: +- 检查测试数据库初始化脚本 +- 确保包含各种测试场景的数据（禁用用户、不同角色等） +- 在测试用例中动态创建测试数据 + +### 风险3：测试环境不稳定 +**影响**: 测试可能因网络、服务启动等问题而失败 +**缓解措施**: +- 使用JAR文件启动后端，减少启动时间 +- 添加健康检查，确保服务就绪后再运行测试 +- 设置合理的超时时间 + +## 后续优化建议 + +### 测试框架优化 +1. 创建Page Object Model的基类，统一常见操作 +2. 添加测试数据管理模块，支持动态创建和清理测试数据 +3. 实现测试报告自动生成和发送 + +### 测试用例优化 +1. 添加更多边界条件测试 +2. 添加性能测试用例 +3. 添加安全测试用例 + +### CI/CD集成 +1. 将E2E测试集成到CI/CD流水线 +2. 设置测试质量门禁（如90%通过率） +3. 自动发布测试报告 + +## 时间估算 + +| 阶段 | 预计时间 | 说明 | +|------|---------|------| +| 立即修复 | 15分钟 | 修复错误消息和登出按钮选择器 | +| 阶段1：批量修复 | 30分钟 | 统一修复常见选择器问题 | +| 阶段2：逐模块验证 | 60分钟 | 按模块运行测试并修复问题 | +| 阶段3：全面测试 | 30分钟 | 运行完整测试套件并生成报告 | +| **总计** | **2小时15分钟** | | + +## 附录 + +### A. 前端组件选择器参考 + +#### Login.vue +```vue + + +登录 +``` + +选择器： +- 用户名输入框：`input[placeholder="请输入用户名"]` +- 密码输入框：`input[placeholder="请输入密码"]` +- 登录按钮：`button:has-text("登录")` + +#### DefaultLayout.vue +```vue + + {{ username }} + + +``` + +选择器： +- 用户头像：`.el-avatar` +- 登出按钮：`.el-dropdown-menu`).getByText('退出登录') + +### B. Element Plus组件选择器参考 + +#### ElMessage +```html +
+

错误消息

+
+``` + +选择器： +- 错误消息：`.el-message .el-message__content` +- 成功消息：`.el-message--success .el-message__content` + +#### ElTable +```html +
+
+ + + + + + +
...
+
+
+``` + +选择器： +- 表格：`.el-table` +- 表格行：`.el-table__row` +- 表格单元格：`.el-table__cell` + +### C. 测试执行命令参考 + +```bash +# 运行单个测试用例 +npx playwright test system-integration-test.spec.ts:33 --project=chromium + +# 运行指定模块测试 +npx playwright test system-integration-test.spec.ts --grep "1. 用户认证流程测试" + +# 运行完整测试套件 +npx playwright test system-integration-test.spec.ts --project=chromium + +# 生成HTML报告 +npx playwright show-report +```