UIRecorder安裝與使用

時間 2019-11-10

標籤 uirecorder 安裝使用简体版

原文原文鏈接

繼vue單元測試，將進行vue的e2e測試學習。

學習點：javascript

安裝uirecorder
用工具（UI Recorder）錄製測試腳本
測試腳本的回放

本文意在安裝UI Recorder，而且利用該工具進行測試腳本（.js）的錄製與回放。html

1、安裝前端

安裝NodeJS（已安裝）、Chrome（已安裝）、UI Recorder、mocha。vue

解決權限問題：java

在虛擬機Linux操做系統下，會涉及到另外一種安裝失敗的狀況：權限不足（permission denied）。故在install uirecorder以前，先配置權限：node

#sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

以上命令表示爲當前用戶設置npm相關安裝目錄的權限
chown全稱爲change owner，授予權限命令
-R 表示遞歸，對指定目錄下全部的子目錄和文件採起同種操做
$(whoami) 表示獲取當前用戶名，即爲當前用戶設置權限【也能夠直接寫用戶名】
$(npm config get prefix) 表示獲取 npm 全局安裝默認目錄

安裝uirecorder和mocha：linux

#npm install uirecorder mocha -g

如果安裝失敗（在安裝到chrome相關包時可能會失敗），則試試用cnpm命令，#cnpm install uirecorder mocha -ggit

【安裝cnpm：#npm install -g cnpm --registry-https://registry.npm.taobao.org】github

檢查版本與創建軟連接：web

檢查uirecorder安裝成功與否，能夠用查看版本的命令檢查【Linux】：

#uirecorder --version

若是報錯：bash： uirecorder：未找到命令... 則須要創建軟連接，才能使用uirecorder命令。

轉到 root 權限，創建軟連接：

#sudo ln -s /opt/tools/node-v9.2.0-linux-x64/bin/uirecorder /usr/local/bin/uirecorder

【ln -s 源文件目標文件】

【 /usr/local/bin 目錄是給用戶放置本身的可執行程序的地方（Linux），避免系統升級而覆蓋同名文件】

再檢查版本：

#uirecorder --version

　成功！接下來就能夠在具體的項目中進行測試腳本的錄製啦！

2、PC錄製

1. 初始化測試工程

轉到項目根目錄： #cd 項目根目錄
初始化uirecorder配置： #uirecorder init

一路回車便可，在選擇瀏覽器列表那裏根據本身的需求輸入相應的瀏覽器，默認會出現兩項（chrome，ie11），我虛擬機沒有ie，故而只輸入了chrome。

TODO：解釋建立的各文件做用。

安裝相關依賴

#npm install jwebdriver expect.js mocha-generators faker --save-dev
#npm install jwebdriver chai faker --save-dev

後話：在初始化 uirecorder 配置時，也許不該該直接在項目根目錄下進行該操做，這樣不便於管理。好的作法應該是爲uirecorder專門創建一個目錄，uirecorder init生成的各類配置文件都在次目錄下，項目結構友好。下圖的綠色點就是新生成的文件及文件夾，能夠看出來，很散亂。

2. 開始錄製測試用例

修改hosts文件：

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": "",
        "classValueBlack": "",
        "hideBeforeExpect": ""
    }
}

uirecorder sample/test.spec.js

3. 啓動WebDriver服務器

安裝服務Selenium standalone server：

#npm install selenium-standalone -g

創建軟連接：

#sudo ln -s

#sudo ln -s /opt/tools/node-v9.2.0-linux-x64/bin/selenium-standalone /usr/local/bin/selenium-standalone

#sudo ln -s /opt/tools/node-v9.2.0-linux-x64/bin/start-selenium /usr/local/bin/start-selenium

selenium-standalone install

selenium-standalone start

或者 java -jar selenium-server-standalone-3.7.1.jar

4. 運行測試用例

運行全部腳本：#source run.sh ( Linux|Mac ) 或者# run.bat ( Windows )【官網寫的，可是運行不起來，會報錯說丟失腳本：
npm ERR! missing script: singletest
】
運行單個腳本：#source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )

用mocha（摩卡）命令來回放：