UI 自動化測試： UIRecorder + Selenium standalone server 搭建 Web UI 自動化測試

相關文檔連接：

1. 操做： https://www.jianshu.com/p/f7b11da864fa

   官方網站：http://uirecorder.com/
   Github：https://github.com/alibaba/uirecorder
   使用手冊：https://github.com/alibaba/uirecorder/blob/master/doc/zh-cn/readme.md
　錄製視頻：https://v.youku.com/v_show/id_XMTY4NTk5NjI4MA==.html

安裝

1. 安裝 Java 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. 安裝 nodejs 

   注意，目前Nodejs官網上發佈的最新版本爲v10.14.2，可是使用最新版本的Nodejs時，UI Recorder在初始化時會有問題（在Start Install project dependencies步驟卡住）

  可用版本下載連接： https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

  安裝完成後使用 "node -v" 查看

node -v

 

3. 安裝 chrome 瀏覽器

 

4. 安裝 UIRecorder

    配置環境變量： %PATH%，加入 C:\Users\{username}\AppData\Roaming\npm

    使用管理員權限 在 cmd 窗口： 　　

 

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install uirecorder mocha -g
cnpm install jwebdriver expect.js mocha-generators faker --save-dev // 安裝相關依賴庫

 

　　

5.  檢查瀏覽器與driver版本是否對應

     1）selenium之 chromedriver與chrome版本映射表（https://blog.csdn.net/huilan_same/article/details/51896672）

           Note: 最新： https://blog.csdn.net/yoyocat915/article/details/80580066

     2） C:\Users\{username}\AppData\Roaming\npm\node_modules\uirecorder\package.json

           將chromedriver 改爲 瀏覽器對應的 driver 版本，如本機安裝的chrome 爲 72.0，則對應的 driver 爲 2.45.0

         

　　3) 

cd C:\Users\xxxxx\AppData\Roaming\npm\node_modules\uirecorder

cnpm install                  // 更新uirecorder依賴的chromedriver爲2.45.0版本

npm ls chromedriver -g        // 查看chromedriver的版本

 

　　

 

開始錄製

1. 初始化工程

E:

mkdir project_name                         // 建立工做目錄

cd project_name                            // 進入到工做目錄中,如下的命令都是在此工做目錄中執行

uirecorder init                            // 初始化uirecorder

　　

  * 一路回車，瀏覽器的地方選擇 "Chrome"

 

2. 開始錄製測試用例

     啓動uirecorder錄製，而且錄製的腳本保存到工做目錄下的sample/test.spec.js 

uirecorder start

　　此時會打開兩個chrome瀏覽器，一個用來校驗的，一個用來錄製腳本的

 

 

 

 

 

回放

1. 安裝並啓動 selenium-standalone 

cnpm install selenium-standalone@latest -g
selenium-standalone install                    // 運行這個須要java
selenium-standalone start

　　

2. 運行回放

run.bat sample/test.spec.js

　　

 

查看回測報告

  reports\index.html

 

 

 

錄製中禁止以下操做！

一、禁止直接手動修改地址欄中的URL

二、禁止使用TAB切換焦點

三、不要使用雙擊, WebDriver兼容性很差

四、不要使用鼠標選擇部分文本, WebDriver兼容性很差

五、不要手動切換至背景窗口

六、不要點擊非關鍵區域, 僅錄製關鍵步驟

 

斷言類型1）val：輸入框的值 2）text：文本的內容 3）displayed：控件是否處於顯示狀態 4）enabled：當前控件是否可用（沒有禁用） 5）selected：當前控件是否打勾選中了 6）attr：當前DOM的屬性值 7）css：當前DOM的CSS值 8）url：當前網頁的URL地址 9）title：當前網頁的title標題 10）cookie：當前網頁的cookie值 11）localStorage：當前網頁的localStorage 12）sessionStorage：當前網頁的sessionStorage 13）alert：彈出的alert窗口的提示文本 14）jscode：瀏覽器端執行自定義的JS代碼，斷言JS代碼的返回值 15）count：控件匹配的數量 16）imgdiff：當前控件的圖片差別，能夠自定義圖片差別的百分比