# 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. 测试数据会创建真实数据,测试后注意清理