novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a2bb6be0b969cdeae656dafef4823f9044e6a0cf
gym-manage/docs/superpowers/specs/2026-04-04-e2e-test-fix-design.md
T

10 KiB
Raw Blame History

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
Reference in New Issue View Git Blame Copy Permalink