一.前言
此文檔爲前端自動化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文件夾，文件夾內包含測試報告。
測試報告如下圖：
