UIrecorder的安裝與使用

1、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

第四步：配置環境變量。「個人電腦」右鍵「屬性」-「高級系統設置」-「高級」-「環境變量」。以下圖：

一、在系統變量下新建"NODE_PATH"，輸入」D:\ProgramFiles\nodejs\node_global\node_modules「。（ps：路徑根據本身的安裝目錄進行配置。）

2：用戶變量跟nodejs相關的"PATH"修改成「D:\ProgramFiles\nodejs\node_global\」 (因爲改變了module的默認地址，因此上面的用戶變量都要跟着改變一下，要不使用module的時候會致使輸入命令出現「xxx不是內部或外部命令，也不是可運行的程序或批處理文件」這個錯誤）

三、安裝完後，從新打開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

測試報告內容以下：

 

五、 配置文件

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

 

本文參考：

https://blog.csdn.net/weixin_38208401/article/details/79512791

https://www.cnblogs.com/igubai/p/7593285.html