UIRecorder入门
2019獨角獸企業重金招聘Python工程師標準>>>
UI Recorder
UI Recorder 是一款零成本UI自動化錄制工具，類似于Selenium IDE.
UI Recorder 要比Selenium IDE更加強大!
UI Recorder 非常簡單易用.
功能
安裝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.orgcnpm install uirecorder mocha -g4、檢查瀏覽器與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版本的，所以要下載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執行：
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 // 創建工作目錄cd project_name // 進入到工作目錄中,以下的命令都是在此工作目錄中執行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)就執行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: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已經安裝、錄制、回放完畢。
但是大家如果要用這個工具，一定要明白，此工具的作用在哪里。是做接口測試還是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 功能詳解
?
?
?
轉載于:https://my.oschina.net/anxiaole/blog/1923326
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的UIRecorder入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python爬虫知识点总结（十三）使用代
- 下一篇： JS String类型整理