docs: add E2E test fix design document

2026-04-04 07:37:04 +08:00
parent b2577110fb
commit e52fcce9b7
1 changed files with 320 additions and 0 deletions
@@ -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
+  <div class="el-message el-message--error">
+    <p class="el-message__content">错误消息内容</p>
+  </div>
+  ```
+- 当前选择器`.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
+<el-input v-model="formState.username" placeholder="请输入用户名" />
+<el-input v-model="formState.password" placeholder="请输入密码" />
+<el-button type="primary" native-type="submit">登录</el-button>
+```
+
+选择器：
+- 用户名输入框：`input[placeholder="请输入用户名"]`
+- 密码输入框：`input[placeholder="请输入密码"]`
+- 登录按钮：`button:has-text("登录")`
+
+#### DefaultLayout.vue
+```vue
+<el-dropdown @command="handleCommand">
+  <el-avatar :size="32">{{ username }}</el-avatar>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item command="profile">个人中心</el-dropdown-item>
+      <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
+</el-dropdown>
+```
+
+选择器：
+- 用户头像：`.el-avatar`
+- 登出按钮：`.el-dropdown-menu`).getByText('退出登录')
+
+### B. Element Plus组件选择器参考
+
+#### ElMessage
+```html
+<div class="el-message el-message--error">
+  <p class="el-message__content">错误消息</p>
+</div>
+```
+
+选择器：
+- 错误消息：`.el-message .el-message__content`
+- 成功消息：`.el-message--success .el-message__content`
+
+#### ElTable
+```html
+<div class="el-table">
+  <div class="el-table__body-wrapper">
+    <table>
+      <tbody>
+        <tr class="el-table__row">
+          <td class="el-table__cell">...</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+```
+
+选择器：
+- 表格：`.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
+```