手把手教你创建第一个React Native自动化测试工具Detox

语言: CN / TW / HK

| Detox([ˈdiˌtɑks])

Detox 是一个用于移动端 APP 灰盒测试(介于白盒测试和黑盒测试之间,既关注内部逻辑实现也关注软件最终效果,通常在集成测试阶段进行)的自动化测试框架。

Detox提供了清晰的api来获取引用和触发元素上的操作 示例代码: ```javascript describe('Login flow', () => { it('should login successfully', async () => { await device.launchApp(); // 通过ID获取元素的引用,并显示出来 await expect(element(by.id('email'))).toBeVisible();

// 获取引用并键入指
await element(by.id('email')).typeText('[email protected]');
await element(by.id('password')).typeText('123456');

// 获取引用并执行点击操作
await element(by.text('Login')).tap();

await expect(element(by.text('Welcome'))).toBeVisible();
await expect(element(by.id('email'))).toNotExist();

}); }); ```

工作原理 image.png

功能

  • 跨平台
  • async-await异步断点调试
  • 自动化同步
  • 专为CI打造
  • 支持在设备上运行

优点

  1. Detox支持Android和iOS。与React Native 在iOS和Android的代码几乎相同、可复用
  2. 支持各种Test runner, 比如Mocha(轻量级),Jest(推荐使用)等
  3. 代码侵入性小
  4. 搭建简单、运行的时候只需要detox build命令来编测试app和detox test来执行脚本即可
  5. 社区活跃
  6. 使用async-await同步执行异步任务 javascript await element(by.id('ButtonA')).tap(); await element(by.id('ButtonB')).tap();

  7. api清晰、学习成本低、减少心智负担

缺点

  1. 在进程中执行了额外的代码来监听 App 的行为
  2. 无限重复的动画会让脚本一直处于等待状态,需要额外的代码让自动化测试的build去掉无限循环的动画

使用

默认您已经安装node以及对应的Android或IOS等相关环境
这里只介绍对应的Detox安装使用

  1. 安装对应工具 ```javascript // Command Line Tools npm install detox-cli --global

// 添加到当前RN项目中 yarn add detox -D ``` 将你的android文件放在Android studio中构建

  1. 更改android/build.gradle 文件

在allprojects.repositories中添加以下 javascript maven { // 所有 Detox 的模块都通过 npm 模块 url "$rootDir/../node_modules/detox/Detox-android" } buildscript的ext 中添加kotlinVersion字段 javascript kotlinVersion = '1.6.21' // (check what the latest version is!) 在dependencies中添加 javascript classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

  1. 更改android/ app/build.gradle 文件

在中android.defaultConfig添加以下2行 javascript testBuildType System.getProperty('testBuildType', 'debug') testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner' 在android.buildTypes.release中添加以下3行 javascript minifyEnabled enableProguardInReleaseBuilds // Typical pro-guard definitions proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' // Detox-specific additions to pro-guard proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"

在dependencies中添加以下两行 javascript // detox config androidTestImplementation 'com.wix:detox:+' androidTestImplementation 'com.linkedin.testbutler:test-butler-library:2.2.1'

  1. android文件夹中创建对应的目录及文件

添加文件和目录到 android/app/src/androidTest/java/com/你的包名,全小写/DetoxTest.java 不要忘记将包名称更改为您的项目 将代码内容复制到DetoxText文件中

注意:复制后的内容需要处理一下 image.png

  1. detoxrc与e2e文件配置

输入detox init -r jest生成e2e文件夹和.detoxrc.json文件 配置.detoxrc.json文件 javascript { "testRunner": "jest", "runnerConfig": "e2e/config.json", "skipLegacyWorkersInjection": true, "devices": { "emulator": { "type": "android.emulator", "device": { "avdName": "Nexus_S_API_28" // 设备名称 执行adb -s emulator-5554 emu avd name 获取 } } }, "apps": { "android.debug": { "type": "android.apk", "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk", "build": "cd android && gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd .." }, "android.release": { "type": "android.apk", "binaryPath": "android/app/build/outputs/apk/release/app-release.apk", "build": "cd android && gradlew assembleRelease assembleAndroidTest -DtestBuildType=release && cd .." } }, "configurations": { "android.emu.debug": { "device": "emulator", "app": "android.debug" }, "android.emu.release": { "device": "emulator", "app": "android.release" } } } 配置e2e/firstTest.e2e.js文件 ```javascript // eslint-disable-next-line no-undef describe('Login flow test', () => { beforeEach(async () => { await device.launchApp(); // await device.reloadReactNative(); });

it('should have login screen', async () => { await expect(element(by.id('loginView'))).toBeVisible(); });

it('should fill login form', async () => { await element(by.id('usernameInput')).typeText('zzzzz'); await element(by.id('passwordInput')).typeText('test123\n'); await element(by.id('loginButton')).tap(); });

it('should show dashboard screen', async () => { await expect(element(by.id('dashboardView'))).toBeVisible(); await expect(element(by.id('loginView'))).not.toExist(); }); });

在e2e中创建 `随便命名xxx.spec.js`和`随便命名xxx`文件夹javascript const parseSpecJson = specJson => { describe(specJson.describe, () => { for (let i = 0; i < specJson.flow.length; i++) { const flow = specJson.flow[i]; it(flow.it, async () => { for (let j = 0; j < flow.steps.length; j++) { const step = flow.steps[j]; const targetElement = element( bystep.element.by, );

      if (step.type === 'assertion') {
        await expect(targetElement)[step.effect.key](step.effect.value);
      } else {
        await targetElement[step.effect.key](step.effect.value);
      }
    }
  });
}

}); };

parseSpecJson(require('./随便命名xxx/login.json'));

在`e2e/随便命名xxx`文件夹中创建`login.json`javascript { "describe": "Login flow test", "flow": [ { "it": "should have login screen", "steps": [ { "type": "assertion", "element": { "by": "id", "value": "loginView" }, "effect": { "key": "toBeVisible", "value": "" } } ] }, { "it": "should fill login form", "steps": [ { "type": "action", "element": { "by": "id", "value": "usernameInput" }, "effect": { "key": "typeText", "value": "varunk" } }, { "type": "action", "element": { "by": "id", "value": "passwordInput" }, "effect": { "key": "typeText", "value": "test123\n" } }, { "type": "action", "element": { "by": "id", "value": "loginButton" }, "effect": { "key": "tap", "value": "" } } ] }, { "it": "should show dashboard screen", "steps": [ { "type": "assertion", "element": { "by": "id", "value": "dashboardView" }, "effect": { "key": "toBeVisible", "value": "" } }, { "type": "assertion", "element": { "by": "id", "value": "loginView" }, "effect": { "key": "toNotExist", "value": "" } } ] } ] } ```

  1. 给你的组件加上testID ```javascript /**
  2. Sample React Native App
  3. https://github.com/facebook/react-native *
  4. @format
  5. @flow */

import React, {useState} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TextInput, Button, ActivityIndicator, } from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

const LOGIN_STATUS = { NOT_LOGGED_IN: -1, LOGGING_IN: 0, LOGGED_IN: 1, };

const App: () => React$Node = () => { const [loginData, setLoginData] = useState({ username: '', password: '', });

const [loginStatus, setLoginStatus] = useState(LOGIN_STATUS.NOT_LOGGED_IN);

const onLoginDataChange = key => { return value => { const newLoginData = Object.assign({}, loginData); newLoginData[key] = value; setLoginData(newLoginData); }; };

const onLoginPress = () => { setLoginStatus(LOGIN_STATUS.LOGGING_IN); setTimeout(() => { setLoginStatus(LOGIN_STATUS.LOGGED_IN); }, 1500); };

return ( <> {loginStatus === LOGIN_STATUS.LOGGED_IN ? ( Hello {loginData.username} Edit your profile ) : ( Please Login Username Password