一，概述

1，UIRecorder 是什么

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

2，UIRecorder 的优点

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

二，环境搭建

1，nodeJs

根据电脑操作系统，选择对应的安装包，下载链接：https://nodejs.org/dist/latest-v8.x/

• Mac: node-v8.15.0.pkg
• Windows: node-v8.15.0-x64.msi
• Linux: node-v8.15.0-linux-x64.tar.gz

2,Chrome(浏览器)

下载链接：https://www.google.com/chrome/

• Mac 安装路径：/Applications
• Windows 用户注意使用默认安装路径：C:\Program Files (x86)\Google\Chrome\Application

3，NPM

NPM 是 NodeJS 自带的包管理器，可以批量下载指定包的指定版本。
由于 npm 是国外网络环境，可能被墙或下载速度较慢，可以使用 cnpm , 下载速度更快。运行以下命令安装 cnpm：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">

npm install -g cnpm --registry=https://registry.npm.taobao.org</pre>

*注：更多 npm 指令可参考 http://www.runoob.com/nodejs/nodejs-npm.html 。
mac在安装淘宝镜像cnpm,需要最高权限：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose

4，Java

• 安装 Java JDK：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html* 注：Windows 系统部分版本安装 Java 后，可能不会将 Java 添加到环境变量，需要手动添加。

5，UIRecorder

运行以下命令安装 UIRecorder 及其相关依赖：

// version 2.x
cnpm install uirecorder mocha mochawesome-uirecorder -g
// version 3.x
cnpm install uirecorder mocha macaca-reporter -g

可以使用以下命令检查安装情况：

cnpm list uirecorder -g
cnpm list mocha -g
cnpm list mochawesome-uirecorder -g   // 2.x 版本报告器
cnpm list macaca-reporter -g          // 3.x 版本报告器

注：若Mac安装时报错，请使用最高权限sudo

三，录制脚本

1，初始化工程

新建目录

// for example
cd ~/Documents
mkdir uirecorder_test
cd uirecorder_test

初始化 UIRecorder 工程：

uirecorder init
// 默认设置的话，一路回车就可以

效果如图

image.png

image.png

2，开始录制

新建测试用例录制：

uirecorder start

效果如图：

image.png

其中，一个脚本文件对应一个录制的测试用例，新建测试用例注意脚本文件名不要跟已有文件名冲突。
录制浏览器会自动打开，注意本地 hosts 配置 127.0.0.1 localhost。进入页面输入 url 则可以开始录制。默认会打开同步校验浏览器，该浏览器的作用是在录制的同时做回归测试校验，如果提示执行失败，则说明回归测试过程很大几率也会执行失败，需要对录制过程进行优化（比如借助工具栏辅助功能）

image.png

image.png

已有测试用例继续录制，运行以下命令，待页面加载执行完毕，可继续录制：

uirecorder sample/test.spec.js  // 对应文件名 

3，已有工程安装

比如直接从 git 仓库 clone 的已有测试工程，可通过以下步骤安装依赖：

// 安装node依赖包
npm install
// 安装 standalone-selenium 依赖 webdriver
npm run installdriver

注：在录制过程中，不能操作默认打开的浏览器（如放大或缩小浏览器界面），会导致在回归测试中中断测试

四，回归测试

1，启动 WebDriver 服务

1.1 本地启动 WebDriver 服务
执行以下命令：

// 进入工程目录
cd ~/Documents/uirecorder_test
// 启动 webdriver 服务
npm run server

1.2 使用 F2etest WebDriver 服务(未尝试)
直接修改工程目录下 config.json 文件中 hosts 字段为 f2etest.xxx.com。另外还需要配置 apiKey 和 user 字段，在 http://f2etest.xxx.com/webdriver 查看：

image.png

2，运行测试用例

可以通过正则匹配的方式指定运行的测试脚本，如运行文件名称为 xx.spec.js 的测试脚本可通过以下命令：
Mac/Linux: source run.sh sample/xx.spec.js
Windows: run.bat sample/xx.spec.js
如果不指定文件名称，则运行所有 .spec.js 文件后缀的测试用例脚本，如下命令：
Mac/Linux： source run.sh
Windows: run.bat

image.png

打开当前目录 ./reports/index.html 文件查看格式化报告，效果如图：

image.png

想要查看更多,请点击https://www.yuque.com/artist/uirecorder/hbqzpl