diff --git a/e2e/docs/mobile-testing-guide.md b/e2e/docs/mobile-testing-guide.md new file mode 100644 index 0000000..4dbf040 --- /dev/null +++ b/e2e/docs/mobile-testing-guide.md @@ -0,0 +1,263 @@ +# 移动端测试指南 + +## 概述 + +本文档介绍如何使用移动端测试框架进行测试。 + +## 手势模拟器 + +### 基本用法 + +```typescript +import { GestureSimulator } from '../utils/GestureSimulator'; + +const simulator = new GestureSimulator(page); + +// 单指滑动 +await simulator.swipe({ + startX: 200, + startY: 600, + endX: 200, + endY: 200, + duration: 500, +}); + +// 长按 +await simulator.longPress(element, 1000); + +// 双击 +await simulator.doubleTap(element); + +// 拖拽 +await simulator.drag({ + source: firstElement, + target: secondElement, + duration: 500, +}); + +// 捏合 +await simulator.pinch({ + centerX: 200, + centerY: 300, + startDistance: 100, + endDistance: 50, + duration: 300, +}); +``` + +## 网络模拟器 + +### 基本用法 + +```typescript +import { NetworkSimulator } from '../utils/NetworkSimulator'; +import { networkConfigs } from '../config/network-configs'; + +const simulator = new NetworkSimulator(context); + +// 设置网络条件 +await simulator.setNetworkCondition(networkConfigs['3g-fast']); + +// 切换到离线模式 +await simulator.goOffline(); + +// 恢复在线 +await simulator.goOnline(); + +// 模拟网络切换 +await simulator.simulateNetworkSwitch(networkConfigs['wifi-fast'], networkConfigs['3g-fast']); + +// 重置网络条件 +await simulator.resetNetworkCondition(); + +// 获取网络请求 +const requests = simulator.getRequests(); + +// 获取失败的请求 +const failedRequests = simulator.getFailedRequests(); + +// 获取慢速请求 +const slowRequests = simulator.getSlowRequests(1000); +``` + +## 性能监控器 + +### 基本用法 + +```typescript +import { MobilePerformanceMonitor } from '../utils/MobilePerformanceMonitor'; + +const monitor = new MobilePerformanceMonitor(page); + +// 获取 Core Web Vitals +const vitals = await monitor.getCoreWebVitals(); + +console.log('FCP:', vitals.FCP); +console.log('LCP:', vitals.LCP); +console.log('CLS:', vitals.CLS); +``` + +## 运行测试 + +### 运行所有移动端测试 + +```bash +npm run test -- --grep "@mobile" +``` + +### 运行特定设备测试 + +```bash +npm run test -- --project=mobile-iphone-13-pro +``` + +### 运行性能测试 + +```bash +npm run test -- --grep "@performance" +``` + +### 运行兼容性测试 + +```bash +npm run test -- --grep "@compatibility" +``` + +### 运行手势交互测试 + +```bash +npm run test -- --grep "@gesture" +``` + +### 运行 PWA 测试 + +```bash +npm run test -- --grep "@pwa" +``` + +### 运行网络环境测试 + +```bash +npm run test -- --grep "@network" +``` + +## 查看报告 + +测试完成后,可以在以下位置查看报告: + +- HTML 报告: `e2e/test-results/index.html` +- Allure 报告: `e2e/allure-results/` + +## 测试覆盖范围 + +### 性能测试 +- 首屏加载性能 +- 交互响应性能 +- 页面资源加载性能 +- JavaScript 执行性能 + +### 兼容性测试 +- 页面布局适配 +- 导航菜单可访问性 +- 表单元素可交互性 +- 图片资源加载 +- 横屏布局适配 +- 触摸事件支持 + +### 手势交互测试 +- 页面滚动(向上/向下滑动) +- 长按手势 +- 双击手势 +- 拖拽手势 +- 捏合手势 +- 组合手势 +- 横向滑动 + +### PWA 功能测试 +- Service Worker 注册 +- 离线功能 +- 离线缓存功能 +- PWA manifest 加载 +- PWA 可安装提示 +- PWA 响应式设计 +- PWA 离线页面显示 + +### 网络环境测试 +- WiFi 快速网络测试 +- 4G LTE 网络测试 +- 3G 快速网络测试 +- 2G 慢速网络测试 +- 离线模式测试 +- 网络切换测试 +- 网络请求监控 +- 失败请求检测 +- 慢速请求检测 +- 网络条件重置测试 + +## 测试设备 + +### iPhone 系列 +- iPhone 13 Pro (390x844) +- iPhone 14 Pro (393x852) +- iPhone 15 Pro (393x852) + +### Android 系列 +- Google Pixel 7 (412x915) +- Samsung Galaxy S23 (360x780) + +### iPad 系列 +- iPad Air (820x1180) +- iPad Pro 12.9" (1024x1366) + +## 网络条件 + +- WiFi Fast (30 Mbps / 15 Mbps / 2ms) +- 4G LTE (4 Mbps / 3 Mbps / 20ms) +- 3G Fast (1.6 Mbps / 750 Kbps / 100ms) +- 2G Slow (250 Kbps / 50 Kbps / 2000ms) +- Offline (离线模式) + +## 最佳实践 + +1. **测试隔离**: 每个测试用例应该独立运行,不依赖其他测试的状态 +2. **数据清理**: 测试完成后应该清理测试数据,避免影响其他测试 +3. **超时设置**: 为移动端测试设置合理的超时时间 +4. **网络模拟**: 在不同网络条件下测试应用性能 +5. **设备覆盖**: 在多种移动设备上测试应用兼容性 +6. **性能监控**: 使用性能监控器跟踪关键性能指标 +7. **错误处理**: 测试应该包含错误场景和边界情况 +8. **并行执行**: 利用并行测试提高测试效率 + +## 故障排查 + +### 测试失败 +1. 检查网络连接是否正常 +2. 确认测试服务器是否运行 +3. 查看测试日志获取详细错误信息 +4. 检查元素选择器是否正确 +5. 验证测试数据是否有效 + +### 性能问题 +1. 使用性能监控器分析性能指标 +2. 检查资源加载时间 +3. 优化图片和静态资源 +4. 减少不必要的网络请求 +5. 使用缓存策略提高性能 + +### 网络问题 +1. 检查网络模拟器配置 +2. 验证网络条件设置 +3. 测试不同网络条件下的表现 +4. 实现离线缓存策略 +5. 添加网络错误处理 + +## 贡献指南 + +如需添加新的测试用例或改进现有测试,请遵循以下步骤: + +1. 创建新的测试文件或修改现有测试文件 +2. 确保测试用例命名清晰且描述性强 +3. 添加必要的测试标签(如 @mobile, @performance 等) +4. 运行测试确保通过 +5. 提交代码并编写清晰的提交信息 +6. 更新本文档(如需要) \ No newline at end of file