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

2023-10-12 23:30

本文主要是介绍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的环境配置。


http://www.taodudu.cc/news/show-7938893.html

相关文章:

  • React-Native移动应用自动化测试框架Detox简介
  • 手把手教你创建第一个React Native自动化测试工具Detox
  • Detox:用于 react-native 应用程序的灰盒端到端测试自动化框架
  • Android MaterialYouFileExplorer 文件浏览器(选择器)
  • 计算机语音mod,霞 the Rebel 音效模组-电脑头部跟踪和语音类型
  • pandas数据处理学习总结
  • 我与DOM的第一次邂逅
  • 使用 pandas 处理 CSV 文件
  • CMU 15-445 Project #3 - Query Execution(Task #1、Task #2)
  • java零基础(二)
  • Android实现ViewPager适配器kotlin简单实现
  • 利用清华和科大镜像源全程国内同步Android源码
  • office2016表格中的文字(英文)居中
  • html 表格添加连接,html中表格怎么连接
  • 【Putty】win10 / win 11:SSH 远程连接工具 Putty 下载、安装
  • JS8 -- 跨域
  • JS-8-数组
  • UM告诉我:not offered
  • 计算机网络原理学习笔记——广域网
  • python代码实现数据可视化
  • cisco packet tracer_用户使用文档/命令行文档(by official offered)
  • 余华《活着》读后感
  • 估值10亿美元的网红机器人那些事儿
  • 马斯克上传大脑很疯狂,Neuralink却早已一地鸡毛
  • 达闼科技更新招股书:打造5G时代“云端机器人”全球第一股
  • 【年终盘点】2018年十大新型机器人
  • 常见的四足机器人的特点和区别
  • 常州巨人机器人_关于我们 - 常州市巨人机器人科技有限公司
  • 人形机器人、脑机、超级计算机,马斯克还有哪些超级探索?
  • 日本这款人形机器人竟是多个机器人乐队的前辈!拥有人类骨骼,还会击鼓
  • 这篇关于React Native 【自动化测试=E2E】-【Detox】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



    http://www.chinasem.cn/article/199195

    相关文章

    在React中引入Tailwind CSS的完整指南

    《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

    Python实现自动化接收与处理手机验证码

    《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.

    Python实现Microsoft Office自动化的几种方式及对比详解

    《Python实现MicrosoftOffice自动化的几种方式及对比详解》办公自动化是指利用现代化设备和技术,代替办公人员的部分手动或重复性业务活动,优质而高效地处理办公事务,实现对信息的高效利用... 目录一、基于COM接口的自动化(pywin32)二、独立文件操作库1. Word处理(python-d

    Python使用DrissionPage中ChromiumPage进行自动化网页操作

    《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

    Python实现自动化表单填写功能

    《Python实现自动化表单填写功能》在Python中,自动化表单填写可以通过多种库和工具实现,本文将详细介绍常用的自动化表单处理工具,并对它们进行横向比较,可根据需求选择合适的工具,感兴趣的小伙伴跟... 目录1. Selenium简介适用场景示例代码优点缺点2. Playwright简介适用场景示例代码

    Python自动化处理手机验证码

    《Python自动化处理手机验证码》手机验证码是一种常见的身份验证手段,广泛应用于用户注册、登录、交易确认等场景,下面我们来看看如何使用Python自动化处理手机验证码吧... 目录一、获取手机验证码1.1 通过短信接收验证码1.2 使用第三方短信接收服务1.3 使用ADB读取手机短信1.4 通过API获取

    Rust中的Drop特性之解读自动化资源清理的魔法

    《Rust中的Drop特性之解读自动化资源清理的魔法》Rust通过Drop特性实现了自动清理机制,确保资源在对象超出作用域时自动释放,避免了手动管理资源时可能出现的内存泄漏或双重释放问题,智能指针如B... 目录自动清理机制:Rust 的析构函数提前释放资源:std::mem::drop android的妙

    Python自动化Office文档处理全攻略

    《Python自动化Office文档处理全攻略》在日常办公中,处理Word、Excel和PDF等Office文档是再常见不过的任务,手动操作这些文档不仅耗时耗力,还容易出错,幸运的是,Python提供... 目录一、自动化处理Word文档1. 安装python-docx库2. 读取Word文档内容3. 修改

    Python自动化办公之合并多个Excel

    《Python自动化办公之合并多个Excel》在日常的办公自动化工作中,尤其是处理大量数据时,合并多个Excel表格是一个常见且繁琐的任务,下面小编就来为大家介绍一下如何使用Python轻松实现合... 目录为什么选择 python 自动化目标使用 Python 合并多个 Excel 文件安装所需库示例代码

    SpringBoot中整合RabbitMQ(测试+部署上线最新完整)的过程

    《SpringBoot中整合RabbitMQ(测试+部署上线最新完整)的过程》本文详细介绍了如何在虚拟机和宝塔面板中安装RabbitMQ,并使用Java代码实现消息的发送和接收,通过异步通讯,可以优化... 目录一、RabbitMQ安装二、启动RabbitMQ三、javascript编写Java代码1、引入