08ea5fbe98
添加用户管理视图、API和状态管理文件
5.7 KiB
5.7 KiB
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)
- 跨系统数据一致性
- 端到端业务流程
- 并发操作
运行测试
基本命令
# 运行所有测试
npm run test:e2e
# 运行Admin测试
npm run test:e2e:admin
# 运行Uniapp测试
npm run test:e2e:uniapp
# 运行集成测试
npm run test:e2e:integration
按标签运行
# 运行边界条件测试
npm run test:e2e:boundary
# 运行异常场景测试
npm run test:e2e:error
# 运行性能测试
npm run test:e2e:performance
其他运行模式
# 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脚本
# 运行所有测试并生成报告
./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
查看报告
# 打开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 统一生成,支持:
- 正常数据生成
- 边界条件数据
- 异常数据
- 批量数据生成
最佳实践
- 每个测试独立: 测试之间不应有依赖关系
- 使用POM模式: 将页面操作封装在页面对象中
- 添加测试标签: 使用
@tag标记测试类型 - 记录测试日志: 使用
testLogger记录测试步骤 - 截图和视频: 失败时自动捕获截图和视频
- 数据清理: 测试后清理创建的测试数据
调试技巧
- 使用UI模式:
npm run test:e2e:ui - 使用调试模式:
npm run test:e2e:debug - 查看Trace: 在
test-results/traces/目录中 - 查看截图: 在
test-results/screenshots/目录中 - 查看视频: 在
test-results/videos/目录中
持续集成
在CI环境中运行测试:
# 设置CI环境变量
export CI=true
# 运行测试
npm run test:e2e
注意事项
- 确保Admin和Uniapp应用已启动
- 确保API服务可访问
- 首次运行需要安装浏览器:
npm run test:install:e2e - 测试数据会创建真实数据,测试后注意清理