# 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