UIRecorder入門 原 薦

UI Recorder

UI Recorder 是一款零成本UI自動化錄製工具，類似於Selenium IDE.

UI Recorder 要比Selenium IDE更加強大!

UI Recorder 非常簡單易用.

1. 官方網站: http://uirecorder.com/
2. 語言切換: English, 中文
3. 變更日誌: CHANGE
4. 視頻教程：PC中文教程

功能

1. 支持所有用戶行爲: 鍵盤事件, 鼠標事件, alert, 文件上傳, 拖放, svg, shadow dom
2. 支持無線native app(Android, iOS)錄製, 基於macaca實現: https://macacajs.com/
3. 無干擾錄製: 和正常測試無任何區別，無需任何交互
4. 錄製用例存儲在本地
5. 支持豐富的斷言類型: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage
6. 支持圖片對比
7. 支持強大的變量字符串
8. 支持公共測試用例: 允許用例中動態調用另外一個
9. 支持併發測試
10. 支持多國語言: 英文, 簡體中文, 繁體中文
11. 支持單步截圖
12. 支持HTML報告和JUnit報告
13. 全系統支持: Windows, Mac, Linux
14. 基於Nodejs的測試用例: jWebDriver

安裝uirecorder

說明：這裏是基於win的安裝。mac系統與之思路類似。

1、安裝node.js（版本號 >= v7.x）

node官網：https://nodejs.org/en/download/

或者直接下載安裝包：https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

安裝時一路next就行了。安裝成功之後，驗證一下安裝是否成功：

打開cmd，輸入node -v，然後回車

圖片地址（看到版本號，就說明安裝成功。這一步一般不會出問題。）

2、安裝 chrome（谷歌瀏覽器）

chrome官網：https://www.google.com/chrome/    （訪問此地址需要‘帆檣’）

或者直接下載百度雲上chrome安裝包：https://pan.baidu.com/s/1RU76eGWOBPJD2EHfE64Bsw

3、安裝 UI Recorder

npm install uirecorder mocha -g

備註：如果下載不成功，很大可能是因爲數據包下載不下來（原因你懂得）。使用淘寶的npm鏡像下載：

使用cnpm命令代替npm：

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

cnpm install uirecorder mocha -g

4、檢查瀏覽器與driver版本是否對應

下載成功之後，需要查看一下chromedirver的版本和chrom版本是否對應，如果版本不對應，是無法驅動器瀏覽器進行錄製和回放的。

selenium之 chromedriver與chrome版本映射表

        a)查看chrome版本：chrome://settings/help

            圖片地址（我的chrome是68版本）

        b)查看chromedierver的版本：npm ls chromedriver -g        (在cmd中運行命令)

            圖片地址

        可以看到uirecorder是2.5.42版本，uirecorder依賴的chromedriver是2.41.0版本

        c)根據selenium之 chromedriver與chrome版本映射表，應該下載2.40.0版本的chromedriver：

             備註：我自己的chrome是68版本的，所以要下載[email protected]版本的。在我自己的電腦上，68版本的chrome使用2.41.0版本的chromedriver，無法錄製。換成2.40.0版本的chromedriver一切正常。

             打開C:\Users\{userNmae}\AppData\Roaming\npm\node_modules\uirecorder\package.json       (把{userName}替換成你的用戶名，就能找到這個文件了。)

             修改uirecorder依賴chromedriver的版本號：

             圖片地址

 

             然後在cmd執行：

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

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

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

圖片地址

5、到此，如果都沒有報錯，說明安裝成功了。

上一步的安裝指定版本的chromedriver特別重要，因爲不同版本的chrome需要相應版本的chromedriver才能驅動起來。如果安裝的版本不對應，錄製或者回放的時候，一般都不會成功。

 

開始錄製

1、初始化工程

mkdir project_name                         // 創建工作目錄

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

uirecorder init                            // 初始化uirecorder

備註：如果運行uirecorder init時報出如下格式的錯誤：

C:\uirecorder_workspaces\project_name>uirecorder init
module.js:549
    throw err;
    ^

Error: Cannot find module 'co-thread'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\uirecorder\node_modules\[email protected]@co-parallel\index.js:6:14)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

就執行cnpm install co-thread -g    這是因爲在運行uirecorder init時，缺少了uirecorder依賴的co-thread包，所以用cnpm安裝（install）一下co-thread。

（編者注：如果運行此命令時報錯說找不到cnpm命令，請看【3、安裝 UI Recorder】小節）

安裝完之後，再執行uirecorder init，此時有可能還報類似的錯誤，就繼續使用cnpm install [包名] -g安裝報錯的那個依賴包。知道uirecorder init執行成功爲止。

（編者注：我在新的電腦安裝uirecorder，大於缺失了10幾個包，如此循環了十幾次，是很正常的。）

圖片地址

2、開始錄製測試用例

啓動uirecorder錄製，並且錄製的腳本保存到工作目錄下的sample/test.spec.js     （我這裏的工作目錄就是project_name）

uirecorder start

圖片地址

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

圖片地址

我們去百度，搜索一下uirecorder。

1）在上面輸入框中輸入www.baidu.com,點擊開始錄製。

2）然後在百度上一頓操作，隨便點。我請客。>_<，然後，不想玩了，就點擊左下角的結束錄製。

3）然後錄製的瀏覽器會自動關閉，然後，cmd展示：

圖片地址

4）具體如何錄製，如何使用斷言，這些，官方提供了視頻教程：視頻教程：PC中文教程

回放

回放，又叫運行測試用例。執行下面命令運行sample/test.spec.js測試用例（即回放剛纔的一頓操作）

run.bat sample/test.spec.js

此時報錯了：

圖片地址

原因：回放的時候，需要運行selenium-standalone，所以重新打開一個cmd，運行：

說明：下面前兩個命令爲安裝selenium-standalone的，如果已經安裝過selenium-standalone，就不用再運行前兩個命令了。

cnpm install selenium-standalone@latest -g
selenium-standalone install                    // 運行這個需要java，安裝java自行百度。最低也要安裝java8
selenium-standalone start

圖片地址

安裝好java8，看一下版本：圖片地址

然後在運行之前的命令：selenium-standalone install，則報錯：

圖片地址

或者去百度雲下載：百度雲盤地址，下載之後，保存到指定位置。並且正確命名文件名稱。

把文件下載下來，並放到指定的目錄中，並重命名之後，執行selenium-standalone start    ，入股看到下圖，Selenium started，就說明啓動成功了。

圖片地址

如果報下面的錯誤，說明是下載的driver沒有放到指定文件夾下，或者是文件命名不對。要該文件的名稱的。

C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\bin\selenium-standalone:79
        throw err;
        ^

Error: Missing C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\.selenium\chromedriver\2.40-x64-chromedriver        // 備註：像這個，需要把zip中的driver解壓並重命名爲2.40-x64-chromedriver（不要帶.exe）
    at C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\lib\check-paths-existence.js:15:20
    at FSReqWrap.cb [as oncomplete] (fs.js:312:19)

啓動了selenium-standalone，在工作目錄下運行：run.bat sample/test.spec.js

圖片地址

查看一下測試用例報告：使用瀏覽器打開，工作目錄下的reports\index.html：

圖片地址

總結

到這裏，uirecorder已經安裝、錄製、回放完畢。

但是大家如果要用這個工具，一定要明白，此工具的作用在哪裏。是做接口測試還是web測試？是做性能測試還是做功能測試？是針對新需求做測試還是針對以往需求做測試？（編者注：這三個問題一定要想明白。）

有人說，用這個工具錄製，很麻煩，還不如自己手動做功能測試呢。其實，是因爲沒有真正明白此工具到底的作用和價值在哪裏，說到底，還是沒有想明白或者是沒有相關上面三個問題。

在這裏，我也不做過多說明 ，我是做開發的，可能對測試瞭解也是皮毛，但是，我還是相信一句話：那些重複的，沒有挑戰性的工作，一定要想辦法交給工具、自動化去完成！工作的意義就是接受挑戰並提升自己。

參考

淘寶 NPM 鏡像

修改 下載倉庫爲淘寶鏡像

selenium-standalone

 

 

Macaca 自動化框架 [Python 系列]

 

 

 

上傳文件

UI Recorder僅支持Native文件上傳, 不支持FLASH上傳

直接點擊“選擇文件”按鈕或點擊“Upload file”, 佔位按鈕必需要用role或data-role標註爲upload

上傳的文件必需保存在/uploadfiles/文件夾中。

 

 

錄製中禁止如下操作！

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

2、禁止使用TAB切換焦點

3、不要使用雙擊, WebDriver兼容性不好

4、不要使用鼠標選擇部分文本, WebDriver兼容性不好

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

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

 

參考：UI Recorder 功能詳解