一、UIrecorder的安裝
1、系統和工具包
操作系統：windows 7（64位 ）
所需安裝的工具：jdk,nodejs,webdriver，chrome瀏覽器
2、安裝JDK和node.js
2.1 JDK安裝
要求1.8以上版本，安裝完JDK后寫入環境變量。
新建系統變量JAVA_HOME 和CLASSPATH
- 變量名：JAVA_HOME
變量值：C:\Program Files\Java\jdk1.8.0_140
- 變量名：CLASSPATH
變量值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
- 變量名：Path
變量值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
2.2 node.js安裝（Windows）
第一步：下載安裝包，Node.js安裝包及源碼下載地址為：https://nodejs.org/en/download/，下載 Windows Installer (.msi) 的64位的版本
第二步：安裝Node.js，注意選擇安裝位置，一路Next直到完成
第三步：配置npm全局目錄。npm是nodejs包管理工具，類似visual studio的Nuget，該版本nodejs已經集成npm打包工具，不需要額外安裝。。如果你想使用默認目錄，可跳過此步驟。一般建議將目錄配置在安裝目錄下。在安裝目錄新建 node_cache，node_global兩個文件夾，啟動cmd，筆者安裝目錄在D:\ProgramFiles\nodejs，輸入以下命令配置：
npm config set prefix D:\ProgramFiles\nodejs\node_global
npm config set cache D:\ProgramFiles\nodejs\node_cache
第四步：配置環境變量。“我的電腦”右鍵“屬性”-“高級系統設置”-“高級”-“環境變量”。如下圖：
1、在系統變量下新建"NODE_PATH"，輸入”D:\ProgramFiles\nodejs\node_global\node_modules“。（ps：路徑根據自己的安裝目錄進行配置。）
2：用戶變量跟nodejs相關的"PATH"修改為“D:\ProgramFiles\nodejs\node_global\” (由於改變了module的默認地址，所以上面的用戶變量都要跟着改變一下，要不使用module的時候會導致輸入命令出現“xxx不是內部或外部命令，也不是可運行的程序或批處理文件”這個錯誤）
3、安裝完后，重新打開cmd命令窗口，輸入npm -v ,可以查看npm的版本號。
3、安裝uirecorder
第一步：安裝cnpm
1. 說明：因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，淘寶團隊干了這事。來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。”
2. 官網：http://npm.taobao.org
3. 安裝：命令提示符執行 npm install cnpm -g --registry=https://registry.npm.taobao.org
4. 注意：安裝完后，重新打開cmd命令窗口，輸入cnpm -v 查看其版本號
第二步：安裝chrome瀏覽器
第三步：安裝uirecorder
在cmd窗口中，輸入：cnpm install uirecorder mocha -g
第四步：安裝服務Selenium standalone server：npm install selenium-standalone -g 
第五步：安裝webderive：selenium-standalone install 
selenium、chrome、ie、firefox、edge安裝成功 
第六步：安裝Mocha單元測試框架
- npm install mocha -g
- npm install jwebdriver expect.js mocha-generators faker -save-dev
- npm install jwebdriver chai faker -save-dev
4.本地自動化測試
4.1初始化配置
在D盤根目錄建立一個文件夾uirecorder，打開cmd窗口，切換到uirecorder目錄
D:\uirecorder>
執行cmd命令：cnpm install
執行cmd命令：uirecorder init （根據我們的需求自己編寫即可。這里小編除瀏覽器外，都選擇默認。）
4.2.webdriver安裝配置和啟動
在cmd中將目錄切換至Selenium-sever的目錄下（小編的為D:\ProgramFiles\nodejs\node_global\node_modules\selenium-standalone\.selenium\selenium-server），然后執行 java -jar 3.8.1-server.jar ，啟動Selenium-sever服務，如下：
4.4錄制腳本
1) cmd切換到D盤 uirecorder目錄運行：
uirecorder start scripts/test.spec.js
說明:
啟動命令為uirecorder start
scripts/test.spec.js 為測試腳本保存的路徑，注意腳本的命名格式和保存的路徑必須是*/**.spec.js
2) 在瀏覽器輸入要測試的用例url，如輸入：www.baidu.com，
通過正常的操作行為錄制腳本后，關閉瀏覽器結束錄制腳本，可以打開sample/test.spec.js查看你錄制好的腳本，進行編輯。
4.5本地自動化測試
1) 安裝mochawesome，cmd命令切換到d：\uirecorder目錄
cnpm install mochawesome
2) 執行測試命令
A、執行所有腳本：在cmd中輸入run.bat
B、執行某個腳本：在cmd中輸入run.bat scripts/**.spec.js ：如小編執行的是baidu.spec.js的腳本，則如下圖：
自動生成測試報告：
測試報告結果：
D:\uirecorder\reports
測試報告內容如下：
5、 配置文件
D盤uirecorder 目錄下config.json 的詳細內容如下：
{
"webdriver": {
"host": "127.0.0.1",
"port": "4444",
"browsers": "chrome"
},
"vars": {},
"recorder": {
"pathAttrs": "data-id,data-name,type,data-type,role,data-role,data-value",
"attrValueBlack": "",
"hideBeforeExpect": ""
}
}
說明：
- host:127.0.0.1使用的是本機webdriver測試，
6、uirecorder文件夾說明
Commons:公共腳本文件夾
Diffbase:圖片對比文件夾
node_modules:node核心文件庫
reports:測試報告文件夾
sample:示例腳本目錄
screenshots:測試執行截圖保存目錄
uploadfiles：附件保存文件夾，比如寫信頁上傳附件，要求把附件先放入該目錄；
config. Json：運行配置文件，比如IP，瀏覽器
run.bat：運行測試，執行該命令會運行所有的測試腳本
7、結束語
UI Recorder屬於阿里巴巴的一款開源項目，想更多的了解，可以去github上面看看，地址：https://github.com/alibaba/uirecorder
本文參考：
https://blog.csdn.net/weixin_38208401/article/details/79512791
https://www.cnblogs.com/igubai/p/7593285.html