gym-manage/docs/superpowers/specs/2026-04-04-e2e-test-fix-design.md

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结构为：

  <div class="el-message el-message--error">
    <p class="el-message__content">错误消息内容</p>
  </div>
  

• 当前选择器.el-message--error无法匹配到可见元素

修复方案：

// 修复前
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后显示下拉菜单
• 下拉菜单中包含"退出登录"选项

修复方案：

// 修复前
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

<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

<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

<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

<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. 测试执行命令参考

# 运行单个测试用例
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