介绍

先来一段官方的介绍：

UI Recorder是一款零成本的整体自动化测试解决方案，一次自测等于多次测试，测一个浏览器等于测多个浏览器！

支持所有用户行为: 键盘事件, 鼠标事件, alert, 文件上传, 拖放, svg, shadow dom
支持无线native app录制, 基于macaca实现: https://macacajs.com/
无干扰录制: 和正常测试无任何区别，无需任何交互
录制用例存储在本地
支持丰富的断言类型: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage
支持数据mock: fake.js
支持公共测试用例: 允许用例中动态调用另外一个
支持并发测试
支持多国语言: 英文, 简体中文, 繁体中文
支持HTML报告和JUnit报告
全系统支持: windows, mac, linux
支持多运行时测试, 例如：开发测试、预发测试
基于Nodejs的测试用例: jWebDriver

简单来说就是把你每次自测的流程录制下来，而且是全可视化的，然后在各种浏览器上自动回放，大大简化了每次手工测试的麻烦。

下面介绍怎么安装部署

说明：这里是基于win的安装。mac系统与之思路类似。

1.准备工作

首先你要有一个环境，win7 win10都可以。

2.安装Node.js（版本号 >= v7.x）

根据电脑操作系统，选择对应的安装包，下载链接：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
安装好后输入node -v有版本号出来就证明安装好了。

node.png

3.安装Chrome

下载链接：https://www.google.com/chrome/
前提是要有梯子。
Mac 安装路径：/Applications
Windows 用户注意使用默认安装路径：C:\Program Files (x86)\Google\Chrome\Application

4.安装NPM

NPM 是 NodeJS 自带的包管理器，可以批量下载指定包的指定版本。
由于 npm 是国外网络环境，可能被墙或下载速度较慢，可以使用 cnpm , 下载速度更快。运行以下命令安装 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org

注：更多 npm 指令可参考 http://www.runoob.com/nodejs/nodejs-npm.html

5.安装JDK

安装 Java JDK：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
注：Windows 系统部分版本安装 Java 后，可能不会将 Java 添加到环境变量，需要手动添加。具体怎么加大家不会自己百度吧。最后保证java -version和javac -version能显示版本就好了。

java环境变量.png

6.安装UIRecorder

运行以下命令安装 UIRecorder 及其相关依赖：
cnpm install uirecorder mocha mochawesome-uirecorder -g
可以使用以下命令检查安装情况：
cnpm list uirecorder -g
cnpm list mocha -g
cnpm list mochawesome-uirecorder -g

最后可以uirecorder --version看下版本

7.检查浏览器与driver版本是否对应

下载成功之后，需要查看一下chromedirver的版本和chrom版本是否对应，如果版本不对应，是无法驱动器浏览器进行录制和回放的。
chromedriver与chrome版本映射表

a)查看chrome版本：帮助-关于

Chrome版本.png

b)查看chromedierver的版本：npm ls chromedriver -g (在cmd中运行命令)

chromedierver版本.png

可以看到uirecorder是2.5.47版本，uirecorder依赖的chromedriver是2.46.0版本
c)根据selenium之 chromedriver与chrome版本映射表，应该下载2.46.0版本的chromedriver：

打开C:\Users{userNmae}\AppData\Roaming\npm\node_modules\uirecorder\package.json (把{userName}替换成你的用户名，就能找到这个文件了。)
修改uirecorder依赖chromedriver的版本号：改成2.46.0

package.json .png

然后在cmd执行：

cd C:\Users\Administrator\AppData\Roaming\npm\node_modules\uirecorder

cnpm install                  // 更新uirecorder依赖的chromedriver为2.46.0版本

npm ls chromedriver -g        // 查看chromedriver的版本

如果看到Uirecorder下面依赖的chromedriver的版本更新了，证明修改成功了。

到此，如果都没有报错，说明安装成功了。

上一步的安装指定版本的chromedriver特别重要，因为不同版本的chrome需要相应版本的chromedriver才能驱动起来。如果安装的版本不对应，录制或者回放的时候，一般都不会成功。

8.初始化开始录制

mkdir project_name                         // 创建工作目录

cd project_name                            // 进入到工作目录中,以下的命令都是在此工作目录中执行

uirecorder init                            // 初始化uirecorder

初始化.png

一路回车，需要测试的浏览器那里可以选择下，如果多个浏览器用逗号隔开

初始化完成.png

备注：如果运行uirecorder init时报出如下格式的错误：

C:\uirecorder_workspaces\project_name>uirecorder init
module.js:549
    throw err;
    ^

Error: Cannot find module 'co-thread'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\uirecorder\node_modules\_co-parallel@1.0.0@co-parallel\index.js:6:14)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

就执行cnpm install co-thread -g 这是因为在运行uirecorder init时，缺少了uirecorder依赖的co-thread包，所以用cnpm安装（install）一下co-thread。
安装完之后，再执行uirecorder init，此时有可能还报类似的错误，就继续使用cnpm install [包名] -g安装报错的那个依赖包。直到uirecorder init执行成功为止。

（注意：我在新的电脑安装uirecorder，大于缺失了10几个包，如此循环了十几次，是很正常的。所以要有耐心，一个一个装下去，总会成功的！）

9.开始录制测试用例

启动uirecorder录制，并且录制的脚本保存到工作目录下的sample/test.spec.js
开始录制

uirecorder start

此时会打开两个chrome浏览器，一个用来校验的，一个用来录制脚本的，我们只要在录制脚本的浏览器里面操作即可，注意，这里的每一步操作建议都用鼠标去触发，而不要用Tab键这种。

开始录制.png

录制浏览器.png

校验浏览器.png

录制中禁止如下操作！

1、禁止直接手动修改地址栏中的URL
2、禁止使用TAB切换焦点
3、不要使用双击, WebDriver兼容性不好
4、不要使用鼠标选择部分文本, WebDriver兼容性不好
5、不要手动切换至背景窗口
6、不要点击非关键区域, 仅录制关键步骤

录制操作完成后点击结束录制。这样脚本就保存下来了。

10.回放测试用例

回放，又叫运行测试用例。执行下面命令运行sample/test.spec.js测试用例（即回放刚才的一顿操作）

run.bat sample/test.spec.js

此时报错了：

报错.png

原因：回放的时候，需要运行selenium-standalone，所以重新打开一个cmd，运行：
说明：下面前两个命令为安装selenium-standalone的，如果已经安装过selenium-standalone，就不用再运行前两个命令了。

cnpm install selenium-standalone@latest -g
selenium-standalone install                    // 运行这个需要java，安装java自行百度。最低也要安装java8
selenium-standalone start

安装完成.png

启动完成.png

启动了selenium-standalone，在工作目录下运行：run.bat sample/test.spec.js

脚本回放完成.png

前端自动化测试之UI Recorder