一.前言
此文档为前端自动化UI测试框架 UI recorder 的搭建以及使用文档。
二.准备环境
我们需要准备以下环境，安装顺序没有先后，环境之间相互无依赖：
- 安装 java jdk（需要jdk 1.8及以上），并配置相应的环境变量。
- 安装 node.js 和 npm。
- 配置 npm 国内镜像 cnpm。
2.1 安装 java jdk
打开 java官网，找到你系统对应的jdk版本，点击下载。如下图：
下载完成后傻瓜式安装，记住你的安装路径，我们添加系统环境变量时需要用到。
安装完成后我们需要添加两个环境变量，修改一个环境变量，如下所示：
- 新增变量
JAVA_HOME， 变量值为C:\Program Files\Java\jdk1.8.0_201（你的 jdk 安装路径）; - 新增变量
CLASSPATH, 变量值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; - 修改变量
Path, 在此变量值的最后加上%JAVA_HOME%\bin;
配置完成后打开终端输入javac,看见如下提示即安装成功：
2.2 安装 nodejs 和 npm
到官网下载安装包后按指示安装即可，参照Karma安装文档里安装即可。
2.3 配置 cnpm
打开终端，输入如下指令：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后输入以下命令测试cnpm是否安装成功：
cnpm -v
三.搭建 UI recorder
我们需要按顺序进行以下步骤（考虑到以后阅读人员的时间跨度问题，如果遇到某些包报版本警告，在 packagejson 中把此包的版本号删除后再执行cnpm install -D即可）
- 全局安装
uirecorder和mocha。 - 安装相关包依赖。
- 初始化
uirecorder文件夹。（此处有坑，需注意） - 对远程服务器中的网站进行录制并生成测试脚本。
- 下载
chromedriver，并将chromedriver.exe放到指定的位置。（需要和你的chrome版本对应） - 下载
Selenium Server。 - 安装
webDriver以及生成测试报告的包依赖。
下面我们一步步来讲这6个步骤。
3.1 全局安装 uirecorder 和 mocha
首先，新建一个文件夹，本文以如下文件夹为例：
打开gitbash，cd 到此文件夹目录下，初始化packagejson文件：
cnpm init -y
然后执行以下代码全局安装包：
cnpm install uirecorder mocha -g
如下所示：
安装完成后我们可以输入uirecorder -V来查看是否安装成功：
3.2 安装相关包依赖
执行以下命令：
cnpm install jwebdriver expect.js mocha-generators faker --save-dev
如下图所示：
3.3 初始化 uirecorder 文件夹
在git bash 中输入以下指令：
uirecorder init
然后按照命令提示进行配置。这儿要提醒大家的是，本文中进行的是基础配置，诸位肯定会有特殊需求，可以根据需要自行配置。如果没有特殊要求，则可以按照下面的基础配置来操作：
简单解释下上面那些命令各自的含义，见下图：
配置完成后会在/ui-recorder-standard下出现以下文件结构：
到这我们的准备环节算是顺利成功了，下一步就要开始录制环节了。
3.4 录制并生成脚本
在gitbash中执行以下命令：
uirecorder start sample/test.spec.js
则会出现交互式命令配置需要你选择，无特殊需求可按下图来配置：
完成后会弹出两个浏览器，一个是给你操作交互的浏览器A，一个是自动录制的浏览器B，我们主要是操作浏览器A：
本文以 Web 部内部的控制中心举例，远程访问 ip 为 192.168.10.36:7002 机器上的控制中心，点击开始录制后开始进行操作，触发各种交互事件：
可以看到我们进行的每一步操作，在短暂的延时后都会得到及时的反馈，在右下角弹窗出来。
操作完成后点击结束录制即可，此时已经在根目录下生成了/sample文件夹和test.spac.js测试用例文件。
需要注意的是，理论上你也可以直接修改这个测试用例文件，但是这需要一定的nodejs基础，如果你对此并不熟练，我不建议你修改此文件，以免后面的录制回放阶段出现无法预知的错误。
3.5 下载 chromedriver，并将 chromedriver.exe 放到指定的位置
从 3.5 之后这几步的作用主要是启动 webDriver 服务以支撑 uirecorder 进行自动化的录制回放和生成测试报告。这几步相对比较繁琐，我尽量用简洁的语言和图片补充的形式避免大家踩坑。
我们首先要下载 chromedriver 压缩文件。提供一个chromedriver淘宝镜像地址。
打开后我们会发现有很多版本，这里要注意，必须要下载和你的chrome对应的驱动才行。
打开chrome查看版本号:
然后按照这个对照表来下载对应的驱动：
如果以上对应表不适用于你的 chrome 浏览器，你也可以自行 google 或者升级浏览器版本。
下载下来后是一个压缩包，把解压出来的 chromedriver.exe 文件放到你的 chrome 安装目录下：
还没完，最后你需要把此目录加到系统环境变量Path变量值的最后：
此步目的是要让 SeleniumServer 能够直接通过文件名找到对应的 driver。
3.6 下载 Selenium Server
点击 Selenium Server 下载最新版即可。下载完成后会得到一个selenium-server-standalone-3.9.1.jar的文件，把它放入 /ui-recorder-standard 目录下：
3.7 安装 `webDriver` 以及生成测试报告的包依赖
打开 gitbash 并执行以下命令：
cnpm install selenium-standalone -g
cnpm install mochawesome chai resemblejs-node -D
四.录制回放及生成测试报告
我们按以下步骤顺序进行：
- 启动
Selenium Server。 - 执行回放命令，查看报告。
4.1 启动 Selenium Server
在 /ui-recorder-standard 目录下新开一个 gitbash 终端，执行以下命令开启 Selenium Server:
java -jar selenium-server-standalone-3.9.1.jar
但是如果你已经开启了一个默认是 4444 端口的server，执行这一步就会提示你以下异常：
这时我们根据提示使用指定端口的命令即可：
java -jar selenium-server-standalone-3.9.1.jar -port 4002
成功后如下图所示：
4.2 执行回放命令，查看报告
打开git bash执行以下命令：
mocha sample/test.spec.js --reporter mochawesome
等待终端执行完毕后，可以看到根目录下生成了/mochawesome-report文件夹，文件夹内包含测试报告。
测试报告如下图：
