数字化测试-UIRecorder自动化实践-京东云开发者社区

### 1 前言

数字化测试涉及供应链技术部多个业务条线，如仓配条线，B2B条线，医药条线、生态条线，服务+条线、逆向条线等，多系统，如CMS系统、蜂巢系统、LV系统、SCG系统、泰山系统等，特别是大促期间的战报及各条线监控大屏，实时的提供交易量、接收量、生产量、达成率等核心数据，备受领导关注，其重要性不言而喻。怎么才能确保数字化测试质量呢？我将从UI层、接口层、功能层、数据层4个层次进行拆分讲解，本篇先从UI层介绍UIrecorder在数字化测试中的实践。

![](//img1.jcloudcs.com/developer.jdcloud.com/38553b0d-7e09-4372-a9e4-ef6ecb85e42320221012154153.png)

### 2 情景

数字化大屏测试过程中需要关注核心数据（交易量、接收量、生产量、达成率）是否正常展示，特别是大屏在晚8点，从24小时大屏模式切换至28小时大屏模式时，各项指标是否稳定、正确展示。

交易数据每刻都在变化，大屏页面1分钟刷新一次，LV系统9个大屏，SCG系统8个大屏，上百项核心指标数据每分钟都在刷新，测试人员根本来不及判断每一分钟的页面数据正确性，只能截图，以待后续分析。

<在夜黑风高的晚8点前的3分钟，测试同学、产品同学分别打开了LV的9个大屏，SCG的8个大屏，通过截图和录屏的方式记录着每一分钟的数据变化，每一分钟完成9次LV大屏截图，8次SCG大屏截图，持续到8点10分结束，0点前重复上述操作>

#### 2.1  目标

1）如何优雅的在1分钟内完成LV系统9个大屏，SCG系统8个大屏的截屏操作？

- selenium，首先能想到的就是原生的UI测试工具selenium
- laputa，公司内部基于pytest框架封装selenium+Allure的UI测试工具

2）如何低成本甚至零成本的达成我们的目的呢？

上述2个方案在敏捷模式下对测试人员都有较高的时间成本，阿里同学推荐的这款工具：uirecorder或许给提供了另一个可能的选择

整套框架包含的组成：UIRecorder + mocha

- UIRecorder 是阿里巴巴研发的一套开源的UI自动化测试框架，学习成本低，基于录制的方式，简单易上手，也可以手写代码（nodejs）的这么一套轻量级、不重代码的自动化测试工具。
- mocha本身就是Javascript的测试框架，支持在浏览器和nodejs环境上运行，mocha本身就挺强大吧，有很多参数还有assert断言。

在零成本、断言、测试报告的吸引下，我们实践一下吧。

### 3 UIRecorder自动化实践

#### 3.1 UIRecorder 是什么

UIRecorder 是一款 UI录制 和 回归测试 工具，用于录制浏览器页面 UI 的操作。通过 UIRecorder 的录制功能，可以在自测的同时，完成测试过程的录制，生成 JavaScript 测试脚本代码。回归测试过程中，可以利用生成的 JavaScript 测试脚本代码，使用 Mocha 对自测过程进行回放，以达到零成本做自动化回归测试的目的。

UI Recorder 是一款零成本UI自动化录制工具，类似于Selenium IDE.
UI Recorder 要比Selenium IDE更加强大！
UI Recorder 非常简单易用.

##### 3.1.1 UIRecorder 的优点

- 零成本的自动化解决方案：完全无干扰录制，让开发在自测过程中就能同步录制出自动化。
- 测试报告直观：测试结果会生产 HTML 格式的报告文件，且每一个核心步骤都会自动截图，便于通过截图直观地分析报错原因。
- 测试多浏览器兼容性：通过 Chrome 浏览器一端录制生成的测试用例脚本，可以在 Firefox、IE、Opera 等浏览器多端运行回归测试。

##### 3.1.2 UIRecorder产品的特点

1. 自测 = 自动化测试：对于开发人员来讲，自测是开发流程中缺一不可的过程，我们要实现的目标就是自测过程中即可同步的录制出自动化脚本，实现真正的零成本自动化
2. 支持全平台无线native app录制: 基于macaca实现: https://macacajs.com/
3. 无干扰录制：所作操作均无需交互干扰，鼠标、键盘、alert弹框、文件上传，完全按照正常自测流程操作即可(以下操作除外：悬停事件、断言、变量)
4. 本地生成脚本：录制的脚本存储在用户本机，用户可以自行在录制的基础上进行修改定制，更自由更开放
5. 丰富的断言：支持以下断言类型，val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、sessionStorage
6. 支持强大变量：我们支持配置式变量、更新变量、断言中使用变量、跳转时使用变量
7. 支持数据Mock：我们支持Faker变量功能，支持强大的数据Mock
8. 支持公共用例: 用例之间允许相互引用，可以将某些公用的操作步骤录制为公用用例，以进一步提升录制效率
9. 支持高并发测试：支持任意数量的高并发，想跑多快就跑多快
10. 支持单步执行截图：每一步操作都自动保存截图，以方便出问题时排查诊断

3.2 环境搭建
步骤一：安装NodeJs
http://nodejs.cn/ 手动安装
注意：(version >= v7.x)
设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

步骤二：安装chrome
请勿安装破解版，如已安装，请跳过此步骤。

步骤三：安装UI Recorder
执行cmd命令：npm install uirecorder mocha -g

步骤四：安装服务Selenium standalone server
执行cmd命令：npm install selenium-standalone -g

步骤五：安装Mocha 单元测试框架（发音"摩卡"）
依次执行cmd命令：
npm install mocha -g
npm install jwebdriver expect.js mocha-generators faker --save-dev
npm install jwebdriver chai faker --save-dev

#### 3.3 初始化配置

执行cmd命令：uirecorder init
初始化配置,第一次试用，可一直回车，IP默认为127.0.0.1，端口默认为4444，浏览器我选择了chrome。

![](//img1.jcloudcs.com/developer.jdcloud.com/7daafd2d-d110-4447-bf14-ca46cbd6347920221012154531.png)

#### 3.4 录制脚本

执行cmd命令：uirecorder start
开始录制脚本，根据需要自行填写。本次截图的测试脚本为sample目录下的test.2.js文件，其他选项为一直回车均为默认值。

![](//img1.jcloudcs.com/developer.jdcloud.com/1ad33bb6-949f-4b54-a13f-90f50a602a2820221012154556.png)

完成后会自动打开两个chrome窗口。
- uirecorder start
- 输入脚本名： sample/xxxxxx.spec.js
- 窗口化设置： 1920x1080 或者 maximize 窗口最大化
- 其他可默认

#### 3.5 回放脚本

安装驱动（只安装一次）

1）npm run installdriver 
开启server（请单独开vscode窗口或者cmd窗口或者使用gitbash窗口运行）

2）npm run server

#### 3.6 运行测试用例

打开新的命令行窗口，进入到 uirecorder 项目目录下

1）并行运行所有测试用例
所有测试用例指所有以 .spec.js 后缀命名的文件（如有需要，可在 package.json 中修改 script 配置）。
运行所有测试用例命令如下：npm run paralleltest

2）并行运行指定目录所有测试用例
指定目录支持正则表达式，比如执行 sample 目录下，所有 .spec.js 后缀的文件，运行命令如下：
npm run moduletest sample/*.spec.js

3）运行单个测试用例
以运行 sample 目录下文件名为 x.spec.js 的测试用例为例，运行单个用例命令如下：
npm run singletest sample/x.spec.js
eg.
npm run singletest .\sample\test02.spec.js

#### 3.7 断言

断言：用来判断操作后的结果是不是正确的

- 步骤：点击添加断言，点击需要断言的控件，弹出断言窗口，在窗口中添加相关信息，点击确认，添加断言成功
- 延迟时间：默认300ms
- 断言支持的类型: val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、sessionStorage、alert、jscode、count、imgdiff
- 断言控件：显示鼠标点击的元素，录制自动生成，也可自行修改
- 比较方式：equal、notEqual、contain、notContain、above、below、match、notMatch
- 断言结果：预期结果

断言类型

- val：输入框的值
- text：文本的内容
- displayed：控件是否处于显示状态
- enabled：当前控件是否可用（没有禁用）
- selected：当前控件是否打勾选中了
- attr：当前DOM的属性值
- css：当前DOM的CSS值
- url：当前网页的URL地址
- title：当前网页的title标题
- cookie：当前网页的cookie值
- localStorage：当前网页的localStorage
- sessionStorage：当前网页的sessionStorage
- alert：弹出的alert窗口的提示文本
- jscode：浏览器端执行自定义的JS代码，断言JS代码的返回值
- count：控件匹配的数量
- imgdiff：当前控件的图片差异，可以自定义图片差异的百分比

注：DOM的全称是Document Object Model，即文档对象模型，是一种与浏览器、平台和语言无关的接口，它可以让用户代码访问任何浏览器中呈现的元素，可以将DOM看作是网页呈现的一种标准

比较方式

- equal：相等
- notEqual：不相等
- contain：包含，目标值包含另外一个值
- notContain：不包含
- above：大于，用于断言数值大于某个值
- below：小于，用于断言数值小于某个值
- match：匹配正则，一般用于高级断言，例如：/aaa\d+bbb/
- notMatch：不匹配正则

#### 3.8 实践结果

##### 3.8.1 工程目录

![](//img1.jcloudcs.com/developer.jdcloud.com/27de7da3-c8e8-45b7-b46f-cf73f96390ca20221012154825.png)

1. 整分执行页面抓取任务，与数据刷新同频
2. 每分钟生成独立的测试报告方便问题定位查阅
3. 集成咚咚消息提醒，断言失败及时提醒
4. 并行运行解决多屏效率问题

##### 3.8.2 测试报告

注：涉密数据，已脱敏处理

![](//img1.jcloudcs.com/developer.jdcloud.com/b5587ef4-c436-49fb-b053-c77b15474c2920221012154854.png)

#### 3.8.3 前端异常

注：涉密数据，已脱敏处理

![](//img1.jcloudcs.com/developer.jdcloud.com/fddfaec8-18ca-40ab-be90-adab26ff4e3b20221012154918.png)

上图中，中小件、大件交易单量、接收单量、生产单量展示均出现异常

1）此时的接口数据是正常返回的，据此可初步定位是前端的问题

![](//img1.jcloudcs.com/developer.jdcloud.com/931199fa-81b9-4204-b863-62d63193e13020221012154938.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/4deacf7b-d9f4-4461-b968-2b1f5a09882020221012154953.png)

2）查看前端console日志，发现明显的相关Error信息

![](//img1.jcloudcs.com/developer.jdcloud.com/a0d8f10d-8173-4f38-844d-7b5e39a8e99c20221012163834.png)

结论：后端接口提供基础数据信息，前端聚合展示过程引入异常，最终影响页面展示
此处异常可以通过uireorder抓取异常页面信息形成测试报告
并通过咚咚消息提醒的方式发送干系人及时关注处理

### 4 总结

uirecorder小试牛刀确实可以低成本实现我们的目标，即低代码或者无代码的实大屏截图，异常场景断言，生成测试报告。低成本或者零成本并不是没有任何代价的，uirecorder在场景串联方面支持较弱，面对复杂的判断逻辑场景下有些力不从心。
然而，这些缺点并不影响我们在数字化大屏项目的应用，解决生产环境实际遇到的问题，没有完美的技术，有的是贴合业务场景恰当的方案。

------------
###### 自猿其说Tech-JDL京东物流技术与数据智能部
###### 作者：范云龙