Files
everything-is-suitable/everything-is-suitable-test/e2e
张翔 08ea5fbe98 feat(admin): 添加用户管理相关文件
添加用户管理视图、API和状态管理文件
2026-03-28 14:37:29 +08:00
..

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 统一生成,支持:

  • 正常数据生成
  • 边界条件数据
  • 异常数据
  • 批量数据生成

最佳实践

  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环境中运行测试:

# 设置CI环境变量
export CI=true

# 运行测试
npm run test:e2e

注意事项

  1. 确保Admin和Uniapp应用已启动
  2. 确保API服务可访问
  3. 首次运行需要安装浏览器: npm run test:install:e2e
  4. 测试数据会创建真实数据,测试后注意清理