UI Recorder 安装教程（一）

Posted 2023-03-18

参考技术A UI Recorder 是一款零成本UI自动化录制工具，类似于 Selenium IDE .

UI Recorder 要比Selenium IDE更加强大！

UI Recorder 非常简单易用.

官方网站: http://uirecorder.com/

步骤一：安装NodeJs

http://nodejs.cn/  手动安装

注意：(version >= v7.x)

步骤二：安装chrome

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

步骤三：安装UI Recorder

执行cmd命令：npm install uirecorder mocha -g

步骤四：安装服务Selenium standalone server

执行cmd命令：npm install selenium-standalone -g

步骤五：安装 Mocha 单元测试框架 （发音"摩卡"）

依次执行cmd命令：

1、npm install mocha -g

2、npm install jwebdriver expect.js mocha-generators faker --save-dev

3、npm install jwebdriver chai faker --save-dev

步骤六：初始化配置UI Recorder

执行cmd命令：uirecorder init

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

步骤七：录制脚本

执行cmd命令：uirecorder start

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

完成后会自动打开两个chrome窗口。
第一个窗口，是录制窗口；第二个是校验窗口，是个空白页面，我们录制的时候忽略该窗口即可。

步骤八：开始录制

在录制页面输入需要录制的URL点击开始录制。

随后进入百度首页的录制页面，开始录制的步骤，输入“百度地图”进行搜索，可看到页面随时有提示：“执行成功”；完成一个流程后，点击结束录制。

录制过程中，可在cmd窗口中查看相关录制步骤和结果。

结束录制后，可在文件夹sample中看到该脚本。

步骤九：回放脚本

1、启动server

执行cmd命令：selenium-standalone start

2、回放脚本test.2.js

执行cmd命令：mocha sample/test.2.js

即可在cmd窗口中查看回放脚本的步骤，执行时间，执行结果等。

步骤十：运行测试用例

1、运行所有脚本:run.bat

2、运行单个脚本:run.bat sample/test.2.js

即可在cmd窗口中查看运行脚本的步骤，执行时间，执行结果等。

步骤十一：查看测试报告

运行脚本后，会自动保存测试报告，在目录reports下index.html、index.xml、index.json

UI Recorder 安装教程

前言：

UI Recorder支持无线native app(Android, iOS)录制, 基于macaca实现:https://macacajs.com/

---

本次教程只针对无线native app(Android)，仍然是windows系统

---

步骤一：全局安装macaca

执行cmd命令：npm i -g macaca-cli

如果看到如下可爱的图案，那恭喜你安装成功啦！重新安装则会覆盖更新。

步骤二：Android 环境准备

1、安装 JDK，要求 1.8 或更高版本

2、安装 Android SDK Build-tools 25.0.2、API25、Android Support Repository（此处注意Build-tools应和API相互对应）

3、若Android SDK无法更新，请设置tools-option，网址：mirrors.neusoft.edu.cn，端口：80，见下图。

3、安装Android NDK（下载地址：链接: https://pan.baidu.com/s/1pLODwx1 密码: jgsb）

下载zip文件，解压到本地，并设置ANDROID_NDK_HOME，加入PATH中。

4、安装Gradle

https://gradle.org/releases/，在此页面下载zip包，解压并加入环境变量（在PATH中加入%GRADLE_HOME%\bin）。

5、安装UIAutomatorWD

执行cmd命令：npm i uiautomatorwd --save

6、准备 App 包：如需要测试 Android 应用，请使用.apk格式的包。

---

步骤三：安装驱动（不同驱动适应不同平台的支持）

驱动可以按照自身需要选择性的安装：

Android的安装命令：$npm i macaca-android -g

---

步骤四：环境检查

执行cmd命令：macaca doctor，可以检查环境是否配置成功。

如下图所示则表示环境均配置正常，如果有标红提示，则需要对应处理。

---

步骤五：开始手机设备录制

1、检查adb设备连接

执行cmd命令：adb devices，页面列出你当前连接计算机的安卓设备（包括模拟器）

2、初始化配置UI Recorder--mobile

执行cmd命令：uirecorder init --mobile，初始化配置,第一次试用，可一直回车，IP默认为127.0.0.1，端口默认为4444。

3、启动Macaca server

执行cmd命令：macaca server --port 4444 --verbose

4、录制脚本

执行cmd命令：uirecorder --mobile sample/test.spec.js

开始录制脚本，根据需要自行填写。本次截图的测试脚本为sample目录下的test.spec.js文件，app路径需要自行填写需要测试的apk文件路径。

打开录制浏览器的速度较慢，请耐心等待~

此时会打开一个chrome，用来录制你的操作；

手机此时也会自动安装并打开app，你需要在手机中校验Recorder的录制是否正确。

然后直接在浏览器中录制操作流程，可看到页面随时有提示：“执行成功”；完成一个流程后，点击结束录制。

5、查看已录制的脚本文件

结束录制后，可在文件夹sample中看到该脚本，如下图所示。

6、回放脚本

执行cmd命令：macaca run -p 4444 -d sample/test.spec.js --verbose

此处sample/test.spec.js是刚刚命名的保存下来的录制文件

macaca会在手机中重装你的app，然后执行你刚刚录制的操作，即可在cmd窗口中查看回放脚本的步骤，执行时间，执行结果等。

步骤六：运行脚本

执行cmd命令：

1、运行所有脚本:run.bat

2、运行单个脚本:run.bat sample/test.spec.js

步骤七：查看测试报告

运行脚本后，会自动保存测试报告，在目录reports下index.html、index.xml、index.json