# 移动端测试指南

## 概述

本文档介绍如何使用移动端测试框架进行测试。

## 手势模拟器

### 基本用法

```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. 更新本文档（如需要）