novalon-website/e2e/docs/mobile-testing-guide.md

移动端测试指南

概述

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

手势模拟器

基本用法

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,
});

网络模拟器

基本用法

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);

性能监控器

基本用法

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);

运行测试

运行所有移动端测试

npm run test -- --grep "@mobile"

运行特定设备测试

npm run test -- --project=mobile-iphone-13-pro

运行性能测试

npm run test -- --grep "@performance"

运行兼容性测试

npm run test -- --grep "@compatibility"

运行手势交互测试

npm run test -- --grep "@gesture"

运行 PWA 测试

npm run test -- --grep "@pwa"

运行网络环境测试

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