张翔
228 lines
5.7 KiB
Markdown
228 lines
5.7 KiB
Markdown
# E2E端到端测试
|
|
|
|
本目录包含项目的端到端(E2E)测试，使用Playwright框架实现。
|
|
|
|
## 目录结构
|
|
|
|
```
|
|
e2e/
|
|
├── admin/ # Admin管理后台测试
|
|
│ ├── boundary-tests.spec.ts # 边界条件测试
|
|
│ ├── error-handling-tests.spec.ts # 异常场景测试
|
|
│ └── user-workflow.spec.ts # 用户工作流测试
|
|
├── uniapp/ # Uniapp小程序测试
|
|
│ ├── calendar-e2e.spec.ts # 万年历页面测试
|
|
│ └── almanac-e2e.spec.ts # 黄历页面测试
|
|
├── integration/ # 集成测试
|
|
│ └── end-to-end-flow.spec.ts # 端到端业务流程测试
|
|
└── shared/ # 共享组件
|
|
├── config/ # 配置文件
|
|
│ ├── test-config.ts # 测试配置
|
|
│ ├── global-setup.ts # 全局设置
|
|
│ └── global-teardown.ts # 全局清理
|
|
├── fixtures/ # 测试夹具
|
|
│ └── test-fixtures.ts # 统一测试夹具
|
|
├── pages/ # 页面对象模型
|
|
│ └── base-page.ts # 基础页面类
|
|
└── utils/ # 工具类
|
|
├── test-data-factory.ts # 测试数据工厂
|
|
├── test-logger.ts # 测试日志
|
|
└── test-reporter.ts # 测试报告
|
|
```
|
|
|
|
## 测试分类
|
|
|
|
### 1. 正向流程测试 (Happy Path)
|
|
- 验证核心功能在正常条件下的正确性
|
|
- 覆盖所有主要业务流程
|
|
|
|
### 2. 边界条件测试 (@boundary)
|
|
- 输入边界：最小/最大值、空值、超长字符串
|
|
- 时间边界：跨月、跨年、闰年
|
|
- 数量边界：单条/批量、分页边界
|
|
|
|
### 3. 异常场景测试 (@error)
|
|
- 网络异常：断网、超时、慢网
|
|
- 服务端异常：500错误、服务降级
|
|
- 客户端异常：JS错误、内存溢出
|
|
- 业务异常：权限不足、资源不存在
|
|
|
|
### 4. 性能测试 (@performance)
|
|
- 页面加载性能
|
|
- 操作响应时间
|
|
- 大数据量渲染
|
|
|
|
### 5. 集成测试 (@integration)
|
|
- 跨系统数据一致性
|
|
- 端到端业务流程
|
|
- 并发操作
|
|
|
|
## 运行测试
|
|
|
|
### 基本命令
|
|
|
|
```bash
|
|
# 运行所有测试
|
|
npm run test:e2e
|
|
|
|
# 运行Admin测试
|
|
npm run test:e2e:admin
|
|
|
|
# 运行Uniapp测试
|
|
npm run test:e2e:uniapp
|
|
|
|
# 运行集成测试
|
|
npm run test:e2e:integration
|
|
```
|
|
|
|
### 按标签运行
|
|
|
|
```bash
|
|
# 运行边界条件测试
|
|
npm run test:e2e:boundary
|
|
|
|
# 运行异常场景测试
|
|
npm run test:e2e:error
|
|
|
|
# 运行性能测试
|
|
npm run test:e2e:performance
|
|
```
|
|
|
|
### 其他运行模式
|
|
|
|
```bash
|
|
# UI模式（可视化调试）
|
|
npm run test:e2e:ui
|
|
|
|
# 调试模式
|
|
npm run test:e2e:debug
|
|
|
|
# 有头模式（显示浏览器窗口）
|
|
npm run test:e2e:headed
|
|
|
|
# Mock模式
|
|
npm run test:e2e:mock
|
|
|
|
# 真实API模式
|
|
npm run test:e2e:real
|
|
```
|
|
|
|
### 使用Shell脚本
|
|
|
|
```bash
|
|
# 运行所有测试并生成报告
|
|
./scripts/run-e2e-tests.sh -r
|
|
|
|
# 运行特定项目
|
|
./scripts/run-e2e-tests.sh -p admin
|
|
|
|
# 运行特定标签
|
|
./scripts/run-e2e-tests.sh -t @boundary
|
|
|
|
# CI环境运行
|
|
./scripts/run-e2e-tests.sh -e ci -r -h
|
|
```
|
|
|
|
## 测试报告
|
|
|
|
测试运行后会自动生成以下报告：
|
|
|
|
- **HTML报告**: `test-results/html-report/index.html`
|
|
- **JSON报告**: `test-results/e2e-results.json`
|
|
- **JUnit报告**: `test-results/junit-report.xml`
|
|
- **Markdown报告**: `test-results/e2e-report.md`
|
|
|
|
### 查看报告
|
|
|
|
```bash
|
|
# 打开HTML报告
|
|
npm run test:e2e:report
|
|
|
|
# 或者在浏览器中打开
|
|
test-results/html-report/index.html
|
|
```
|
|
|
|
## 环境配置
|
|
|
|
### 环境变量
|
|
|
|
| 变量名 | 说明 | 默认值 |
|
|
|--------|------|--------|
|
|
| `E2E_ENV` | 测试环境 (local/dev/test/ci) | local |
|
|
| `ADMIN_BASE_URL` | Admin应用基础URL | http://localhost:5174 |
|
|
| `UNIAPP_BASE_URL` | Uniapp应用基础URL | http://localhost:8081 |
|
|
| `API_BASE_URL` | API基础URL | http://localhost:8080 |
|
|
| `E2E_MOCK_ENABLED` | 是否启用Mock | false |
|
|
| `E2E_MOCK_MODE` | Mock模式 (full/partial/none) | none |
|
|
| `CI` | CI环境标识 | - |
|
|
|
|
### 配置文件
|
|
|
|
测试配置位于 `e2e/shared/config/test-config.ts`，支持多环境配置：
|
|
|
|
- **local**: 本地开发环境
|
|
- **dev**: 开发服务器环境
|
|
- **test**: 测试服务器环境
|
|
- **ci**: CI/CD环境
|
|
|
|
## 页面对象模型 (POM)
|
|
|
|
测试使用页面对象模型模式组织，主要页面类：
|
|
|
|
### Admin页面
|
|
- `LoginPage`: 登录页面
|
|
- `DashboardPage`: 仪表盘页面
|
|
- `UserManagementPage`: 用户管理页面
|
|
- `RoleManagementPage`: 角色管理页面
|
|
- `MenuManagementPage`: 菜单管理页面
|
|
|
|
### Uniapp页面
|
|
- `UniappCalendarPage`: 万年历页面
|
|
- `UniappAlmanacPage`: 黄历页面
|
|
- `UniappUserPage`: 用户中心页面
|
|
|
|
## 测试数据
|
|
|
|
测试数据由 `TestDataFactory` 统一生成，支持：
|
|
|
|
- 正常数据生成
|
|
- 边界条件数据
|
|
- 异常数据
|
|
- 批量数据生成
|
|
|
|
## 最佳实践
|
|
|
|
1. **每个测试独立**: 测试之间不应有依赖关系
|
|
2. **使用POM模式**: 将页面操作封装在页面对象中
|
|
3. **添加测试标签**: 使用 `@tag` 标记测试类型
|
|
4. **记录测试日志**: 使用 `testLogger` 记录测试步骤
|
|
5. **截图和视频**: 失败时自动捕获截图和视频
|
|
6. **数据清理**: 测试后清理创建的测试数据
|
|
|
|
## 调试技巧
|
|
|
|
1. **使用UI模式**: `npm run test:e2e:ui`
|
|
2. **使用调试模式**: `npm run test:e2e:debug`
|
|
3. **查看Trace**: 在 `test-results/traces/` 目录中
|
|
4. **查看截图**: 在 `test-results/screenshots/` 目录中
|
|
5. **查看视频**: 在 `test-results/videos/` 目录中
|
|
|
|
## 持续集成
|
|
|
|
在CI环境中运行测试：
|
|
|
|
```bash
|
|
# 设置CI环境变量
|
|
export CI=true
|
|
|
|
# 运行测试
|
|
npm run test:e2e
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. 确保Admin和Uniapp应用已启动
|
|
2. 确保API服务可访问
|
|
3. 首次运行需要安装浏览器: `npm run test:install:e2e`
|
|
4. 测试数据会创建真实数据，测试后注意清理
|