docs: add mobile testing guide
This commit is contained in:
张翔
@@ -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. 更新本文档（如需要）
|
||||
Reference in New Issue
Block a user