8.4 KiB
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.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 个独立测试:
- 查看列表 - 验证页面加载和数据展示
- 搜索功能 - 验证搜索和筛选
- 新增操作 - 验证创建功能
- 编辑操作 - 验证更新功能
- 删除操作 - 验证删除功能
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 回滚计划
如果测试失败或影响现有测试,可以:
- 删除新增的测试文件
- 恢复到之前的测试状态
- 分析失败原因后重新实施
8. 后续改进
8.1 短期改进
- 修复
admin-complete-workflow.spec.ts中被跳过的清理测试 - 增强菜单管理的测试覆盖
- 增强登录日志的测试覆盖
8.2 长期改进
- 引入边界情况测试
- 引入错误处理测试
- 引入权限验证测试
- 实现测试数据自动清理
9. 参考资料
批准人: 用户
批准日期: 2026-04-08