Files
gym-manage/docs/superpowers/specs/2026-04-08-user-journey-tests-design.md

8.4 KiB

User Journey Tests 设计文档

日期: 2026-04-08
作者: 张翔
状态: 已批准


1. 概述

1.1 背景

novalon-manage-system 项目当前有 11 个功能模块,但仅有 7 个模块(63.6%)被 user journey 测试覆盖。为了提高测试覆盖率和系统质量,需要补充缺失的 4 个模块的端到端测试。

1.2 目标

为以下 4 个功能模块补充 user journey 测试:

  1. 异常日志 - 查看系统异常记录
  2. 系统配置 - 系统参数配置管理
  3. 字典管理 - 数据字典管理
  4. 通知管理 - 系统通知公告

1.3 范围

包含:

  • 基础覆盖:查看列表、搜索功能、基本操作(新增/编辑/删除)
  • 使用时间戳隔离测试数据
  • 遵循现有测试风格和模式

不包含:

  • 边界情况测试
  • 错误处理测试
  • 权限验证测试

2. 架构设计

2.1 文件结构

novalon-manage-web/e2e/journeys/
├── exception-log-workflow.spec.ts    # 异常日志测试
├── config-workflow.spec.ts           # 系统配置测试
├── dict-workflow.spec.ts             # 字典管理测试
└── notice-workflow.spec.ts           # 通知管理测试

2.2 测试模式

  • 测试框架: Playwright
  • 组织方式: 使用 test.describe 组织测试套件
  • 步骤组织: 使用 test.step 组织测试步骤
  • 数据隔离: 使用时间戳生成唯一测试数据
  • 命名规范: 遵循现有测试的命名规范

2.3 测试策略

每个模块包含 3-5 个独立测试:

  1. 查看列表 - 验证页面加载和数据展示
  2. 搜索功能 - 验证搜索和筛选
  3. 新增操作 - 验证创建功能
  4. 编辑操作 - 验证更新功能
  5. 删除操作 - 验证删除功能

3. 详细设计

3.1 异常日志测试

文件: exception-log-workflow.spec.ts

测试场景:

测试名称 测试步骤 验证点
查看异常日志列表 1. 导航到异常日志页面
2. 等待数据加载
表格组件可见
搜索异常日志 1. 输入搜索关键词
2. 点击搜索按钮
3. 等待结果
搜索结果正确显示
查看异常日志详情 1. 点击查看详情按钮
2. 等待对话框打开
详情对话框可见

关键选择器:

  • 页面路径:/exception-log
  • 表格:.el-table
  • 搜索框:input[placeholder*="搜索"]
  • 详情按钮:button:has-text("查看")

3.2 系统配置测试

文件: config-workflow.spec.ts

测试场景:

测试名称 测试步骤 验证点
查看系统配置列表 1. 导航到系统配置页面
2. 等待数据加载
表格组件可见
新增系统配置 1. 点击新增配置按钮
2. 填写表单
3. 提交表单
成功消息显示
搜索系统配置 1. 输入搜索关键词
2. 点击搜索按钮
搜索结果正确显示
编辑系统配置 1. 点击编辑按钮
2. 修改配置值
3. 提交表单
成功消息显示
删除系统配置 1. 点击删除按钮
2. 确认删除
成功消息显示

测试数据:

const timestamp = Date.now();
const configKey = `test_config_${timestamp}`;
const configName = `测试配置_${timestamp}`;
const configValue = `测试值_${timestamp}`;

关键选择器:

  • 页面路径:/config
  • 新增按钮:button:has-text("新增配置")
  • 表单输入:.el-dialog input
  • 提交按钮:.el-dialog button:has-text("确定")

3.3 字典管理测试

文件: dict-workflow.spec.ts

测试场景:

测试名称 测试步骤 验证点
查看字典列表 1. 导航到字典管理页面
2. 等待数据加载
表格组件可见
新增字典 1. 点击新增字典按钮
2. 填写表单
3. 提交表单
成功消息显示
搜索字典 1. 输入搜索关键词
2. 点击搜索按钮
搜索结果正确显示
编辑字典 1. 点击编辑按钮
2. 修改字典信息
3. 提交表单
成功消息显示
删除字典 1. 点击删除按钮
2. 确认删除
成功消息显示

测试数据:

const timestamp = Date.now();
const dictType = `test_dict_${timestamp}`;
const dictName = `测试字典_${timestamp}`;

关键选择器:

  • 页面路径:/dict
  • 新增按钮:button:has-text("新增字典")
  • 表单输入:.el-dialog input
  • 提交按钮:.el-dialog button:has-text("确定")

3.4 通知管理测试

文件: notice-workflow.spec.ts

测试场景:

测试名称 测试步骤 验证点
查看通知列表 1. 导航到通知管理页面
2. 等待数据加载
表格组件可见
新增通知 1. 点击新增通知按钮
2. 填写表单
3. 提交表单
成功消息显示
搜索通知 1. 输入搜索关键词
2. 点击搜索按钮
搜索结果正确显示
编辑通知 1. 点击编辑按钮
2. 修改通知内容
3. 提交表单
成功消息显示
删除通知 1. 点击删除按钮
2. 确认删除
成功消息显示

测试数据:

const timestamp = Date.now();
const noticeTitle = `测试通知_${timestamp}`;
const noticeContent = `这是测试通知内容_${timestamp}`;

关键选择器:

  • 页面路径:/notice
  • 新增按钮:button:has-text("新增通知")
  • 表单输入:.el-dialog input
  • 提交按钮:.el-dialog button:has-text("确定")

4. 测试数据管理

4.1 数据隔离策略

使用时间戳生成唯一测试数据:

const timestamp = Date.now();
const uniqueName = `测试数据_${timestamp}`;

优势:

  • 无需清理测试数据
  • 避免测试数据冲突
  • 与现有测试风格一致

4.2 测试数据示例

模块 数据字段 生成规则
系统配置 configKey, configName test_config_${timestamp}
字典管理 dictType, dictName test_dict_${timestamp}
通知管理 noticeTitle, noticeContent 测试通知_${timestamp}

5. 测试执行

5.1 运行命令

# 运行所有 journey 测试
npm run test:e2e:journeys

# 运行特定测试文件
npx playwright test e2e/journeys/exception-log-workflow.spec.ts

# 运行所有新增测试
npx playwright test e2e/journeys/exception-log-workflow.spec.ts \
                   e2e/journeys/config-workflow.spec.ts \
                   e2e/journeys/dict-workflow.spec.ts \
                   e2e/journeys/notice-workflow.spec.ts

5.2 测试配置

测试将使用现有的 Playwright 配置:

  • 项目: journeys
  • 依赖: setup 项目(认证)
  • 存储状态: playwright/.auth/user.json
  • 浏览器: Desktop Chrome
  • 超时: 120000ms

6. 验收标准

6.1 功能验收

  • 所有测试文件创建成功
  • 所有测试通过
  • 测试覆盖率提升至 100%(11/11 模块)

6.2 质量验收

  • 测试代码遵循现有风格
  • 测试步骤清晰可读
  • 测试数据隔离有效
  • 无测试数据冲突

6.3 文档验收

  • 测试文件包含清晰的注释
  • 测试描述准确反映测试内容
  • 测试步骤命名规范

7. 风险与缓解

7.1 风险识别

风险 影响 概率 缓解措施
测试数据污染 使用时间戳隔离
测试依赖环境 使用独立的测试环境
页面元素变化 使用稳定的选择器
测试超时 增加适当的等待时间

7.2 回滚计划

如果测试失败或影响现有测试,可以:

  1. 删除新增的测试文件
  2. 恢复到之前的测试状态
  3. 分析失败原因后重新实施

8. 后续改进

8.1 短期改进

  1. 修复 admin-complete-workflow.spec.ts 中被跳过的清理测试
  2. 增强菜单管理的测试覆盖
  3. 增强登录日志的测试覆盖

8.2 长期改进

  1. 引入边界情况测试
  2. 引入错误处理测试
  3. 引入权限验证测试
  4. 实现测试数据自动清理

9. 参考资料


批准人: 用户
批准日期: 2026-04-08