Weex E2E测试框架：Detox与Appium实践

【免费下载链接】weex A framework for building Mobile cross-platform UI 项目地址: https://gitcode.com/gh_mirrors/we/weex

为什么需要E2E测试

你还在为Weex跨平台应用的兼容性问题头疼吗？当用户反馈"Android端图片变形"而iOS端显示正常时，手动测试需要在多设备间反复验证，效率低下且容易遗漏。本文将带你掌握Detox与Appium两大E2E（端到端）测试框架在Weex项目中的实践方案，读完你将获得：

• 跨平台UI一致性测试的自动化实现
• 基于真实用户场景的交互验证能力
• 测试结果可视化对比分析方法

测试框架选型对比

特性	Detox	Appium	Weex现有方案
适用平台	iOS/Android	iOS/Android/Web	全平台（基于Macaca）
测试速度	快（原生支持）	中（基于WebDriver）	中（基于Macaca）
环境配置	复杂	中等	简单（test/run.sh）
社区支持	React Native生态	全平台通用	阿里系内部支持

Weex项目当前使用Macaca作为E2E测试框架，通过test/run.sh脚本实现自动化测试流程。本文将重点介绍如何集成Detox与Appium以扩展测试能力。

环境搭建

前置条件

1. 安装Node.js（>=8.0）和npm
2. 配置iOS开发环境（Xcode）和Android开发环境（Android Studio）
3. 克隆项目仓库：git clone https://gitcode.com/gh_mirrors/we/weex.git

Detox集成步骤

# 安装Detox CLI
npm install -g detox-cli

# 安装项目依赖
cd weex
npm install detox --save-dev
npm install mocha --save-dev

# 初始化Detox配置
detox init -r mocha

创建Detox配置文件detox.config.js：

module.exports = {
  testRunner: "mocha",
  runnerConfig: "e2e/mocha.opts",
  apps: {
    "ios.release": {
      type: "ios.app",
      binaryPath: "ios/build/Release-iphonesimulator/WeexDemo.app",
      build: "xcodebuild -workspace ios/playground/WeexDemo.xcworkspace -scheme WeexDemo -configuration Release -sdk iphonesimulator -derivedDataPath ios/build"
    },
    "android.release": {
      type: "android.apk",
      binaryPath: "android/playground/app/build/outputs/apk/release/app-release.apk",
      build: "cd android && ./gradlew assembleRelease && cd .."
    }
  },
  devices: {
    "simulator.iphone": {
      type: "ios.simulator",
      device: { type: "iPhone 11" }
    },
    "emulator.pixel": {
      type: "android.emulator",
      device: { avdName: "Pixel_2_API_29" }
    }
  },
  configurations: {
    "ios": {
      device: "simulator.iphone",
      app: "ios.release"
    },
    "android": {
      device: "emulator.pixel",
      app: "android.release"
    }
  }
};

Appium集成步骤

# 安装Appium
npm install -g appium

# 安装Appium客户端
npm install webdriverio --save-dev

测试用例编写

以图片组件测试为例，我们将为test/pages/components/image-resize.vue页面编写E2E测试。该页面测试不同尺寸图片在各种resize模式下的显示效果。

Detox测试用例

创建文件e2e/image-resize.spec.js：

describe('Image Resize Test', () => {
  beforeAll(async () => {
    await device.launchApp();
    await element(by.id('image-resize')).tap();
  });

  it('should display 3 image columns for width>height case', async () => {
    await expect(element(by.id('width-gt-height'))).toExist();
    await expect(element(by.type('Image')).atIndex(0)).toBeVisible();
    await expect(element(by.type('Image')).atIndex(1)).toBeVisible();
    await expect(element(by.type('Image')).atIndex(2)).toBeVisible();
  });

  it('should switch image resize mode correctly', async () => {
    await element(by.text('width=height')).tap();
    await expect(element(by.id('wh200x200'))).toExist();
  });
});

Appium测试用例

创建文件e2e/image-resize-appium.spec.js：

const { remote } = require('webdriverio');

describe('Image Resize Test', () => {
  let client;

  beforeAll(async () => {
    client = await remote({
      path: '/wd/hub',
      port: 4723,
      capabilities: {
        platformName: 'iOS',
        deviceName: 'iPhone 11',
        app: './ios/build/Release-iphonesimulator/WeexDemo.app'
      }
    });
    await client.$('~image-resize').click();
  });

  it('should display 3 image columns', async () => {
    const images = await client.$$('type=="Image"');
    expect(images.length).toBeGreaterThan(2);
  });

  afterAll(async () => {
    await client.deleteSession();
  });
});

测试执行与结果分析

运行Detox测试

# 构建应用
detox build -c ios.release

# 运行测试
detox test -c ios.release

运行Appium测试

# 启动Appium服务器
appium &

# 运行测试
mocha e2e/image-resize-appium.spec.js

测试结果对比

Weex项目提供了测试截图对比功能，可通过test/screenshot/目录下的图片验证UI渲染效果：

Android平台图片resize属性测试结果

iOS平台图片resize属性测试结果

最佳实践

测试用例设计原则

1. 关注核心用户场景，如test/pages/components/image-resize.vue中的图片显示测试
2. 避免过于复杂的交互流程，保持测试用例简洁
3. 利用beforeAll和afterAll钩子函数优化测试速度

与现有测试框架结合

建议保留项目原有的Macaca测试流程（test/run.sh），同时添加Detox和Appium测试脚本作为补充：

// package.json
"scripts": {
  "test:detox": "detox test -c ios.release",
  "test:appium": "mocha e2e/appium-tests/",
  "test:all": "npm run test && npm run test:detox && npm run test:appium"
}

总结与展望

本文介绍了如何在Weex项目中集成Detox和Appium两大E2E测试框架，通过对比分析可知：

• Detox适合对测试速度要求高的React Native风格项目
• Appium适合需要跨平台（包括Web）测试的场景
• Weex现有Macaca测试框架配置简单，适合快速上手

未来可进一步探索：

1. 测试报告自动化生成（整合test/run.sh的报告输出）
2. 视觉回归测试（利用test/screenshot/目录实现）
3. CI/CD流水线集成（结合项目现有的npm scripts）

希望本文能帮助你构建更稳定的Weex跨平台应用，如有任何问题欢迎在项目CONTRIBUTING.md中提出反馈。

如果你觉得本文有用，请点赞收藏，并关注后续Weex测试进阶教程！

【免费下载链接】weex A framework for building Mobile cross-platform UI 项目地址: https://gitcode.com/gh_mirrors/we/weex