React Native 【自动化测试=E2E】-【Detox】

废话

最近有朋友说React Native 自动化测试这块网上鲜有教程，正好我们的项目中有这样的实践，特地拿出来显摆显摆，嘿嘿，开个玩笑啊别介意，废话不多说，开始讲解

Detox

detox 是移动应用程序的灰盒端到端测试和自动化框架。

移动自动化测试中最困难的部分是测试金字塔的顶端 - E2E。 E2E测试的核心问题是片状的 - 测试通常不是确定性的。我们认为解决片状问题的唯一方法是从黑盒测试转向灰盒测试。这就是Detox发挥作用的地方。

优点：

- 跨平台

用JavaScript编写跨平台测试。目前支持iOS，Android

- 在真机上运行

（iOS尚未支持）：通过在设备/模拟器上测试您的应用程序，就像真实用户一样

- 自动同步

通过监控应用程序中的异步操作，可以在核心处停止

- 为CI而做

在像Travis这样的CI平台上执行您的E2E测试，Jenkins不清楚支不支持，后期有经验了会出这个教程，应该是支持的。

- 测试独立

使用您喜欢的Mocha，AVA或任何其他JavaScript测试运行器

- 可调试

Modern async-await API允许异步测试中的断点 按预期工作。

以上是官方对它的介绍，从目前来看，这个框架基本达到我们的预期，是可以尝试一下的。

环境配置

ios自动化测试要求：

- Mac with macOS (at least macOS El Capitan 10.11)
- Xcode 8.3+ with Xcode command line tools
通过在终端中键入gcc -v来验证是否已安装Xcode命令行工具（如果未安装则显示弹出窗口）

安装依赖：

1. Install the latest version of Homebrew

Homebrew是macOS的包管理器，我们需要它来安装其他命令行工具。

终端输入：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Install Node.js

Node是Detox将运行的JavaScript运行时。安装节点8.3.0或更高版本

终端 输入： brew update && brew install node

3. Install applesimutils

用于Apple模拟器的utils集合，Detox使用它与模拟器进行通信。

终端驶入：
brew tap wix/brew
brew install applesimutils

通过键入终端applesimutils来输出工具帮助信息，验证它是否有效

4. Install Detox command line tools (detox-cli)

该软件包使命令行中的Detox更容易操作。 detox-cli应该全局安装，允许在npm脚本之外使用命令行工具。 detox-cli只是一个脚本，它将命令传递给detox包中提供的命令行工具（在node_modules / .bin / detox中）

npm install -g detox-cli

注意：官方说的是全局安装，但实际使用过程中，本人实在RN项目的根目录中使用的该命令跑成功就可以了

5. Add Detox to your project

在RN项目根目录的终端里输入一下安装命令

 npm install detox --save-dev

6. Install a test runner

您可以使用任何JavaScript测试运行器。 Detox CLI支持开箱即用的Jest和Mocha

这里跳过Jest 建议使用 Mocha 同样在项目根目录执行

npm install mocha --save-dev

7. Add Detox config to package.json

"detox": {
       "configurations": {
                "ios.sim.debug": {
                        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/example.app",
                         "build": "xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
                          "type": "ios.simulator", "name": "iPhone 7"
                }
         }
 }

如图：放到 package.json 这里

图1

如图配置，需要将下图中三个地方改成ios项目的名字。
ios/build/Build/Products/Debug-iphonesimulator/example.app
xcodebuild -project ios/example.xcodeproj -scheme example -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build

图2

以上步骤顺利进行的话，接下来可以写测试代码了。

Create your first test

项目根目录输入一下命令

detox init -r mocha

这个命令将在项目的根目录创建一个e2e目录，如图3

图3

Build your app and run Detox tests

detox build

实际执行的是这段命令如图4

图4

最终结果如图5，看到BUILD SUCCEEDED 说明打包成功，马上就可以真正测试了

图5

detox test

输入以上命令后，模拟器会启动，然后自动跑firstTest.spec.js文件中的测试用例，同时终端有如下输输出：

图6

同时如图7所指，测试输出是跟代码中 it 函数第一个参数是一致的，有多少个it就会有多少个测试输出。

图7

测试用例已经跑了起来，下面简单说下语法。

1. 如何找到组件 如图8

图8

2. 找到组件能干嘛，如图9

图9

简单例子：

await element(by.id('tappable')).tap();  

await element(by.id('tappable')).longPress();

await element(by.id('tappable')).multiTap(3);

await element(by.id('tappable')).tapAtPoint({x:5, y:10});

await element(by.id('textField')).typeText('passcode');

await element(by.id('textField')).replaceText('passcode again');

await element(by.id('textField')).clearText();

await element(by.id('scrollView')).scroll(100, 'down');

await element(by.id('scrollView')).scroll(100, 'up');

await element(by.id('scrollView')).scrollTo('bottom');

await element(by.id('scrollView')).scrollTo('top');

await element(by.id('scrollView')).swipe('down');

await element(by.id('scrollView')).swipe('down', 'fast');

await element(by.id('scrollView')).swipe('down', 'fast', 0.5);

await expect(element(by.type('UIPickerView'))).toBeVisible();

await element(by.type('UIPickerView')).setColumnToValue(1,"6");

await element(by.type('UIPickerView')).setColumnToValue(2,"34");

3. 如何验证结果 如图10

图10

简单例子：

await expect(element(by.id('UniqueId204'))).toBeVisible();

await expect(element(by.id('UniqueId205'))).toBeNotVisible();

await expect(element(by.id('UniqueId205'))).toExist();

await expect(element(by.id('RandomJunk959'))).toNotExist();

await expect(element(by.id('UniqueId204'))).toHaveText('I contain some text');

await expect(element(by.id('UniqueId204'))).toHaveLabel('Done');

await expect(element(by.text('I contain some text'))).toHaveId('UniqueId204');

await expect(element(by.id('UniqueId533'))).toHaveValue('0');

到此就简单介绍到这里，更详细的请看官方文档，如有疑问，请留言给我。

总结

在实践了这段时间以来，碰到了不少问题，这里介绍的是IOS的测试，相对来说还简单一些，Android的配置就有些复杂，下次专门介绍下Android的环境配置。