UI自動化錄製工具----UI Recorder

1、系統和工具包

windows 7 64位

jdk,nodejs,webdriver，瀏覽器都放在工具包目錄內。（晚上回去把文件上傳到雲盤，在分享給你們）

2、安裝JDK和node.js

2.1 JDK安裝

要求1.8以上版本，我使用的是jdk1.8.0_40，安裝完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安裝

最新版本8.1.2

安裝後使用node –v 查看是否安裝成功。

 

3、安裝uirecorder

cmd命令以下：

安裝cnpm

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

安裝uirecorder

cnpm install uirecorder mocha -g

 

 安裝相關依賴

命令以下：

cnpm install jwebdriver expect.js mocha-generators faker --save-dev 

 

4.本地自動化測試

4.1初始化配置

在D盤根目錄創建一個文件夾uirecorder，

打開cmd窗口，切換到uirecorder目錄

D:\uirecorder>

執行cmd命令：

cnpm install

執行cmd命令：

uirecorder init

 

 

4.2.webdriver安裝配置和啓動

將webdriver目錄和文件複製到C盤根目錄，將C:\webdriver加入環境變量path

點擊 run.bat運行selenium-server

也經過如下命令啓動：

 java -jar selenium-server-standalone-3.4.0.jar

 

 

4.3安裝chrome瀏覽器

錄製腳本要求使用chrome瀏覽器，最新版本59.0

4.4錄製腳本

1)     cmd切換到D盤 uirecorder目錄運行：

     uirecorder start sample/test.spec.js

  說明:

           啓動命令爲uirecorder start

           sample/test.spec.js 爲測試腳本保存的路徑

2)     在瀏覽器輸入要測試的用例url，如輸入：http://mail.10086.cn，點擊開始錄製：

 

 

經過正常的操做行爲錄製腳本後，關閉瀏覽器結束錄製腳本，能夠打開sample/test.spec.js查看你錄製好的腳本，進行編輯。

4.5本地自動化測試

1)     安裝mochawesome，cmd命令切換到d：\uirecorder目錄

cnpm install mochawesome

 

 

2)     執行測試命令

mocha  sample/test.spec.js --reporter mochawesome

 

 

 

測試報告：

 

 

測試報告結果：

D:\uirecorder\mochawesome-report\mochawesome.html

測試報告內容以下：

 

 

五、 配置文件

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：運行測試，執行該命令會運行全部的測試腳本

七、結束語

UI Recorder屬於阿里巴巴的一款開源項目，想更多的瞭解，能夠去github上面看看，地址：https://github.com/alibaba/uirecorder