手把手教你创建第一个React Native自动化测试工具Detox
| 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();
}); }); ```
工作原理
功能
- 跨平台
- async-await异步断点调试
- 自动化同步
- 专为CI打造
- 支持在设备上运行
优点
- Detox支持Android和iOS。与React Native 在iOS和Android的代码几乎相同、可复用
- 支持各种Test runner， 比如Mocha(轻量级)，Jest(推荐使用)等
- 代码侵入性小
- 搭建简单、运行的时候只需要detox build命令来编测试app和detox test来执行脚本即可
- 社区活跃
-
使用async-await同步执行异步任务
javascript await element(by.id('ButtonA')).tap(); await element(by.id('ButtonB')).tap(); -
api清晰、学习成本低、减少心智负担
缺点
- 在进程中执行了额外的代码来监听 App 的行为
- 无限重复的动画会让脚本一直处于等待状态，需要额外的代码让自动化测试的build去掉无限循环的动画
使用
默认您已经安装node以及对应的Android或IOS等相关环境
这里只介绍对应的Detox安装使用
- 安装对应工具 ```javascript // Command Line Tools npm install detox-cli --global
// 添加到当前RN项目中 yarn add detox -D ``` 将你的android文件放在Android studio中构建
- 更改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"
- 更改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'
- android文件夹中创建对应的目录及文件
添加文件和目录到 android/app/src/androidTest/java/com/你的包名，全小写/DetoxTest.java
不要忘记将包名称更改为您的项目
将代码内容复制到DetoxText文件中
注意：复制后的内容需要处理一下
- 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": ""
}
}
]
}
]
}
```
- 给你的组件加上testID ```javascript /**
- Sample React Native App
- http://github.com/facebook/react-native *
- @format
- @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 (
<>