novalon/novalon-manage-system
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5aefb8ca44d3a52bc42e2ffe8880579a3cf58d77
novalon-manage-system/docs/superpowers/specs/2026-04-08-user-journey-tests-design.md
T
张翔 38dc055a27 docs: 添加设计文档和实现计划 
- 添加菜单数据修复设计文档
- 添加用户管理和角色管理测试修复设计文档
- 添加本地开发测试设计文档
- 添加相关实现计划
2026-04-15 23:36:27 +08:00

307 lines
8.4 KiB
Markdown
Raw Blame History

# 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. 导航到异常日志页面<br>2. 等待数据加载 | 表格组件可见 |
| 搜索异常日志 | 1. 输入搜索关键词<br>2. 点击搜索按钮<br>3. 等待结果 | 搜索结果正确显示 |
| 查看异常日志详情 | 1. 点击查看详情按钮<br>2. 等待对话框打开 | 详情对话框可见 |
**关键选择器：**
- 页面路径：`/exception-log`
- 表格：`.el-table`
- 搜索框：`input[placeholder*="搜索"]`
- 详情按钮：`button:has-text("查看")`
---
### 3.2 系统配置测试
**文件：** `config-workflow.spec.ts`
**测试场景：**
| 测试名称 | 测试步骤 | 验证点 |
|---------|---------|--------|
| 查看系统配置列表 | 1. 导航到系统配置页面<br>2. 等待数据加载 | 表格组件可见 |
| 新增系统配置 | 1. 点击新增配置按钮<br>2. 填写表单<br>3. 提交表单 | 成功消息显示 |
| 搜索系统配置 | 1. 输入搜索关键词<br>2. 点击搜索按钮 | 搜索结果正确显示 |
| 编辑系统配置 | 1. 点击编辑按钮<br>2. 修改配置值<br>3. 提交表单 | 成功消息显示 |
| 删除系统配置 | 1. 点击删除按钮<br>2. 确认删除 | 成功消息显示 |
**测试数据：**
```typescript
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. 导航到字典管理页面<br>2. 等待数据加载 | 表格组件可见 |
| 新增字典 | 1. 点击新增字典按钮<br>2. 填写表单<br>3. 提交表单 | 成功消息显示 |
| 搜索字典 | 1. 输入搜索关键词<br>2. 点击搜索按钮 | 搜索结果正确显示 |
| 编辑字典 | 1. 点击编辑按钮<br>2. 修改字典信息<br>3. 提交表单 | 成功消息显示 |
| 删除字典 | 1. 点击删除按钮<br>2. 确认删除 | 成功消息显示 |
**测试数据：**
```typescript
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. 导航到通知管理页面<br>2. 等待数据加载 | 表格组件可见 |
| 新增通知 | 1. 点击新增通知按钮<br>2. 填写表单<br>3. 提交表单 | 成功消息显示 |
| 搜索通知 | 1. 输入搜索关键词<br>2. 点击搜索按钮 | 搜索结果正确显示 |
| 编辑通知 | 1. 点击编辑按钮<br>2. 修改通知内容<br>3. 提交表单 | 成功消息显示 |
| 删除通知 | 1. 点击删除按钮<br>2. 确认删除 | 成功消息显示 |
**测试数据：**
```typescript
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 数据隔离策略
使用时间戳生成唯一测试数据：
```typescript
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 运行命令
```bash
# 运行所有 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. 参考资料
- [Playwright 官方文档](https://playwright.dev/)
- [项目 E2E 测试 README](../../novalon-manage-web/e2e/README.md)
- [现有测试示例](../../novalon-manage-web/e2e/journeys/)
---
**批准人：** 用户
**批准日期：** 2026-04-08
Reference in New Issue View Git Blame Copy Permalink