Uirecorder使用手冊css
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)node
https://www.google.com/chrome/git
npm install uirecorder mocha -ggithub
npm鏡像源可使用淘寶地址npm config set registry http://registry.npm.taobao.orgweb
建立一個項目目錄,而後進入這個目錄執行正則表達式
uirecorder init
chrome
進入剛纔的項目目錄,執行npm
uirecorder sample/***.spec.js
json
開啓一個新窗口,本地啓動方式爲
npm run server(須要進入到項目目錄執行)
webdriver server有多種啓動方式,詳見以下連接:
Selenium Grid: https://github.com/SeleniumHQ/selenium/wiki/Grid2
F2etest: https://github.com/alibaba/f2etest
Run all case: source run.sh
( Linux|Mac ) or run.bat
( Windows )
Run single case: source run.sh sample/test.spec.js
( Linux|Mac ) or run.bat sample/test.spec.js
( Windows )
在項目目錄中會自動生成報告目錄,報告有多種格式
./reports/index.html
./reports/index.xml (JUnit)
./reports/index.json
./screenshots/
錄製腳本若是已經存在,系統會提示繼續錄製或者從新錄製。若是繼續錄製會先執行一次上一次的錄製過程,引導到最後一個錄製的頁面。
錄製面板介紹:
斷言類型:咱們提供子豐富的斷言類型,不一樣的控件類型要選擇合適的斷言類型,這裏針對每一個斷言類型進行介紹
expect:displayed,#add-plan-contiune,equal,true
expect:enabled,#add-plan-contiune,equal,true
能夠對name屬性進行斷言
獲取地址欄的url信息進行斷言
點擊面板中的js代碼後,將焦點放在日期輸入框中,輸入js代碼document.getElementById("cp-end-date").value=」2019-01-01」
圖片對比須要安裝GraphicsMagic,使用gm檢查是否安裝。
有不少開發會寫一些隨機的屬性值,例如某些隨機的id值,這種屬性值會致使錄製的腳本徹底沒法持續運行。
針對這個問題,咱們提供了3套解決方案
屬性值黑名單正則
: 能夠編寫正則表達式過濾掉那些不穩定的屬性值,例如:/attr_value_\d+/
,若是須要過濾多種屬性值,能夠這麼寫:/attr_value1_\d+|attr_value2_\d+/
。這個值能夠在uirecorder init
命令中進行配置,也能夠在錄製過程當中的錄製面板上即時修改。屬性開關
:在錄製面板上,能夠經過臨時切換不一樣屬性項的開啓和關閉,靈活組合出適合本身業務的PATH生成方案,例如某些場景下不適合用text
,就能夠臨時將text
屬性項關閉掉。class
值黑名單正則
:對於某些不穩定的class值,咱們一樣提供了黑名單功能,此功能須要經過uirecorder init
命令進行配置。編輯config.json
{
"recorder": {
...
},
"webdriver": {
...
},
"vars": {
"productId": "123456",
"productName": "mp3"
}
}
http://xxx.com/product?id={{productId}}
{{productName}}
或 aaa{{productName}}bbb
{{productName}}
或 aaa{{productName}}bbb
提示: 全部變量字符串均支持JS語法的模板字符串,例如:{{productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}
commons/login.mod.js
sample/test.spec.js
source run.sh sample/test.spec.js
( Linux|Mac ) 或 run.bat sample/test.spec.js
( Windows )login.mod.js
,或者在輸入框的右端點擊下拉小三角,選擇須要的腳本腳本跳轉
,隨後同上login.mod.js
加載完成後,繼續別的步驟的錄製
公共腳本必定要放在項目的commons目錄中。
<input type="file">
或點擊 <button role="upload">Upload file</button>
, 佔位按鈕必須要用role
或data-role
標註爲upload
uploadfiles/
文件夾中F5
鍵執行腳本, 按 F10
鍵執行下一行添加斷言
, 選擇類型: jscode
return document.title
4. function(){
5. var str = "aaa";
6. return str;
7. }
9. function(done){
10. setTimeout(function(){
11. done(123);
12. }, 100);
13. }
uirecorder init
斷言前隱藏
選項時,輸入須要隱藏的css選擇器uirecorder start
某些步驟不是很是重要,但卻偶爾會出現,這些步驟會老是斷言爲成功。
brew install graphicsmagick (Mac)
sudo apt-get install graphicsmagick (Linux)
http://www.graphicsmagick.org/download.html (Windows)
選擇斷言類型: imgdiff
選擇目標控件
source run.sh sample/test.spec.js --rebuilddiff
(Mac | Linux)
run.bat sample/test.spec.js --rebuilddiff
(Windows)
若是但願基於UIRecorder錄製出來的步驟生成JAVA等別的語言自動化腳本,可使用咱們的原數據導出功能。
此功能能夠在生成js語法的自動化腳本同時,也生成json格式的原數據。基於此json文件,咱們就能夠自由的翻譯成任何語言的自動化腳本。
uirecorder start --raw
sample/test.spec.js
, sample/test.spec.json
2. source ./install.sh
3. source ./run.sh
JUnit: reports/index.xml
HTML: reports/index.html
國內用戶能夠經過oschina和cnpm提高部署效率,修改install.sh以下:
ls ~/nvm || git clone https://git.oschina.net/yaniswang/nvm.git ~/nvm
source ~/nvm/nvm.sh
export NVM_NODEJS_ORG_MIRROR="http://npm.taobao.org/mirrors/node"
nvm install v7.10.0
npm install --registry=https://registry.npm.taobao.org
package.json
, 確保mochawesome-uirecorder
版本在1.5.22
及以上--reporter mochawesome-uirecorder
後面添加: --reporter-options copyShotOnlyFail=true
Uirecorder使用手冊
Install
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)
https://www.google.com/chrome/
npm install uirecorder mocha -g
npm鏡像源可使用淘寶地址npm config set registry http://registry.npm.taobao.org
1. 初始化測試項目
建立一個項目目錄,而後進入這個目錄執行
uirecorder init
2. 開始錄製腳本
進入剛纔的項目目錄,執行
uirecorder sample/***.spec.js
3. Start WebDriver Server
開啓一個新窗口,本地啓動方式爲
npm run server(須要進入到項目目錄執行)
webdriver server有多種啓動方式,詳見以下連接:
Selenium Grid: https://github.com/SeleniumHQ/selenium/wiki/Grid2
F2etest: https://github.com/alibaba/f2etest
4. 運行測試用例
Run all case: source run.sh
( Linux|Mac ) or run.bat
( Windows )
Run single case: source run.sh sample/test.spec.js
( Linux|Mac ) or run.bat sample/test.spec.js
( Windows )
5. 查看報告
在項目目錄中會自動生成報告目錄,報告有多種格式
./reports/index.html
./reports/index.xml (JUnit)
./reports/index.json
./screenshots/
錄製腳本若是已經存在,系統會提示繼續錄製或者從新錄製。若是繼續錄製會先執行一次上一次的錄製過程,引導到最後一個錄製的頁面。
錄製面板介紹:
斷言類型:咱們提供子豐富的斷言類型,不一樣的控件類型要選擇合適的斷言類型,這裏針對每一個斷言類型進行介紹
expect:displayed,#add-plan-contiune,equal,true
expect:enabled,#add-plan-contiune,equal,true
能夠對name屬性進行斷言
獲取地址欄的url信息進行斷言
點擊面板中的js代碼後,將焦點放在日期輸入框中,輸入js代碼document.getElementById("cp-end-date").value=」2019-01-01」
圖片對比須要安裝GraphicsMagic,使用gm檢查是否安裝。
有不少開發會寫一些隨機的屬性值,例如某些隨機的id值,這種屬性值會致使錄製的腳本徹底沒法持續運行。
針對這個問題,咱們提供了3套解決方案
屬性值黑名單正則
: 能夠編寫正則表達式過濾掉那些不穩定的屬性值,例如:/attr_value_\d+/
,若是須要過濾多種屬性值,能夠這麼寫:/attr_value1_\d+|attr_value2_\d+/
。這個值能夠在uirecorder init
命令中進行配置,也能夠在錄製過程當中的錄製面板上即時修改。屬性開關
:在錄製面板上,能夠經過臨時切換不一樣屬性項的開啓和關閉,靈活組合出適合本身業務的PATH生成方案,例如某些場景下不適合用text
,就能夠臨時將text
屬性項關閉掉。class
值黑名單正則
:對於某些不穩定的class值,咱們一樣提供了黑名單功能,此功能須要經過uirecorder init
命令進行配置。編輯config.json
{
"recorder": {
...
},
"webdriver": {
...
},
"vars": {
"productId": "123456",
"productName": "mp3"
}
}
http://xxx.com/product?id={{productId}}
{{productName}}
或 aaa{{productName}}bbb
{{productName}}
或 aaa{{productName}}bbb
提示: 全部變量字符串均支持JS語法的模板字符串,例如:{{productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}
1.
錄製 commons/login.mod.js
2.
錄製 sample/test.spec.js
login.mod.js
,或者在輸入框的右端點擊下拉小三角,選擇須要的腳本腳本跳轉
,隨後同上login.mod.js
加載完成後,繼續別的步驟的錄製
3.
source run.sh sample/test.spec.js
( Linux|Mac ) 或 run.bat sample/test.spec.js
( Windows )
公共腳本必定要放在項目的commons目錄中。
<input type="file">
或點擊 <button role="upload">Upload file</button>
, 佔位按鈕必須要用role
或data-role
標註爲upload
uploadfiles/
文件夾中F5
鍵執行腳本, 按 F10
鍵執行下一行
1.
添加斷言
, 選擇類型: jscode
2.
同步模式: return document.title
3. 函數模式:
4. function(){
5. var str = "aaa";
6. return str;
7. }
8. 異步模式:
9. function(done){
10. setTimeout(function(){
11. done(123);
12. }, 100);
13. }
uirecorder init
斷言前隱藏
選項時,輸入須要隱藏的css選擇器uirecorder start
某些步驟不是很是重要,但卻偶爾會出現,這些步驟會老是斷言爲成功。
1. 安裝GraphicsMagick
brew install graphicsmagick (Mac)
sudo apt-get install graphicsmagick (Linux)
http://www.graphicsmagick.org/download.html (Windows)
2. �添加圖片對比斷言
選擇斷言類型: imgdiff
選擇目標控件
3. 當業務變化時,咱們能夠經過如下命令更新基線圖片
source run.sh sample/test.spec.js --rebuilddiff
(Mac | Linux)
run.bat sample/test.spec.js --rebuilddiff
(Windows)
若是但願基於UIRecorder錄製出來的步驟生成JAVA等別的語言自動化腳本,可使用咱們的原數據導出功能。
此功能能夠在生成js語法的自動化腳本同時,也生成json格式的原數據。基於此json文件,咱們就能夠自由的翻譯成任何語言的自動化腳本。
uirecorder start --raw
sample/test.spec.js
, sample/test.spec.json
1. 添加命令
2. source ./install.sh
3. source ./run.sh
4. 添加報告
JUnit: reports/index.xml
HTML: reports/index.html
國內用戶能夠經過oschina和cnpm提高部署效率,修改install.sh以下:
ls ~/nvm || git clone https://git.oschina.net/yaniswang/nvm.git ~/nvm
source ~/nvm/nvm.sh
export NVM_NODEJS_ORG_MIRROR="http://npm.taobao.org/mirrors/node"
nvm install v7.10.0
npm install --registry=https://registry.npm.taobao.org
package.json
, 確保mochawesome-uirecorder
版本在1.5.22
及以上--reporter mochawesome-uirecorder
後面添加: --reporter-options copyShotOnlyFail=true