2019獨角獸企業(yè)重金招聘Python工程師標準>>>

UI Recorder

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

UI Recorder 要比Selenium IDE更加強大!

UI Recorder 非常簡單易用.

官方網(wǎng)站:?http://uirecorder.com/

語言切換:?English,?中文

變更日志:?CHANGE

視頻教程：PC中文教程

功能

支持所有用戶行為: 鍵盤事件, 鼠標事件, alert, 文件上傳, 拖放, svg, shadow dom

支持無線native app(Android, iOS)錄制, 基于macaca實現(xiàn):?https://macacajs.com/

無干擾錄制: 和正常測試無任何區(qū)別，無需任何交互

錄制用例存儲在本地

支持豐富的斷言類型: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage

支持圖片對比

支持強大的變量字符串

支持公共測試用例: 允許用例中動態(tài)調(diào)用另外一個

支持并發(fā)測試

支持多國語言: 英文, 簡體中文, 繁體中文

支持單步截圖

支持HTML報告和JUnit報告

全系統(tǒng)支持: Windows, Mac, Linux

基于Nodejs的測試用例:?jWebDriver

安裝uirecorder

說明：這里是基于win的安裝。mac系統(tǒng)與之思路類似。

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

node官網(wǎng)：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官網(wǎng)：https://www.google.com/chrome/? ? （訪問此地址需要‘帆檣’）

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

3、安裝 UI Recorder

npm install uirecorder mocha -g

備注：如果下載不成功，很大可能是因為數(shù)據(jù)包下載不下來（原因你懂得）。使用淘寶的npm鏡像下載：

使用cnpm命令代替npm：

npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm 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)根據(jù)selenium之 chromedriver與chrome版本映射表，應該下載2.40.0版本的chromedriver：

? ? ? ? ? ? ?備注：我自己的chrome是68版本的，所以要下載chromederiver@2.40.0版本的。在我自己的電腦上，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執(zhí)行：

cd C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\uirecordercnpm install // 更新uirecorder依賴的chromedriver為2.40.0版本npm ls chromedriver -g // 查看chromedriver的版本

圖片地址

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

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

?

開始錄制

1、初始化工程

mkdir project_name // 創(chuàng)建工作目錄cd project_name // 進入到工作目錄中,以下的命令都是在此工作目錄中執(zhí)行uirecorder init // 初始化uirecorder

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

C:\uirecorder_workspaces\project_name>uirecorder init module.js:549throw 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\_co-parallel@1.0.0@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)

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

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

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

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

圖片地址

2、開始錄制測試用例

啟動uirecorder錄制，并且錄制的腳本保存到工作目錄下的sample/test.spec.js? ? ?（我這里的工作目錄就是project_name）

uirecorder start

圖片地址

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

圖片地址

我們?nèi)グ俣?#xff0c;搜索一下uirecorder。

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

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

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

圖片地址

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

回放

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

run.bat sample/test.spec.js

此時報錯了：

圖片地址

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

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

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

圖片地址

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

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

圖片地址

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

把文件下載下來，并放到指定的目錄中，并重命名之后，執(zhí)行selenium-standalone start? ??，入股看到下圖，Selenium started，就說明啟動成功了。

圖片地址

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

C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\bin\selenium-standalone:79throw 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:20at FSReqWrap.cb [as oncomplete] (fs.js:312:19)

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

圖片地址

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

圖片地址

總結

到這里，uirecorder已經(jīng)安裝、錄制、回放完畢。

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

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

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

參考

淘寶 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、不要點擊非關鍵區(qū)域, 僅錄制關鍵步驟

?

參考：UI Recorder 功能詳解

?

?

?

轉載于:https://my.oschina.net/anxiaole/blog/1923326

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的UIRecorder入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。