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的环境配置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343