UIRecorder 學習瞭解

時間  2019-11-09
標籤 uirecorder 學習 瞭解 简体版
原文   原文鏈接

Uirecorder使用手冊css

  • Install
  1. Install NodeJs (version >= v7.x)

https://nodejs.org/html

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

  1. Install chrome

https://www.google.com/chrome/git

  1. Install UI Recorder

npm install uirecorder mocha -ggithub

npm鏡像源可使用淘寶地址npm config set registry http://registry.npm.taobao.orgweb

 

PC record

  1. 初始化測試項目

建立一個項目目錄，而後進入這個目錄執行正則表達式

uirecorder initchrome

  1. 開始錄製腳本

進入剛纔的項目目錄，執行npm

uirecorder sample/***.spec.jsjson

  1. Start WebDriver Server

開啓一個新窗口，本地啓動方式爲

npm run server(須要進入到項目目錄執行)

webdriver server有多種啓動方式，詳見以下連接：

Selenium Grid: https://github.com/SeleniumHQ/selenium/wiki/Grid2

F2etest: https://github.com/alibaba/f2etest

 

  1. 運行測試用例

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 )

  1. 查看報告

在項目目錄中會自動生成報告目錄，報告有多種格式

./reports/index.html

./reports/index.xml (JUnit)

./reports/index.json

./screenshots/

 

 

錄製腳本若是已經存在，系統會提示繼續錄製或者從新錄製。若是繼續錄製會先執行一次上一次的錄製過程，引導到最後一個錄製的頁面。

 

錄製面板介紹：

 

  1. 屬性開關：對於某些特殊場景，能夠經過靈活的開啓或關閉屬性項，不一樣步驟選擇不一樣的PATH生成策略，例如：某些控件不太適合用文本定位，就能夠臨時先關閉text屬性項
  2. 屬性值黑名單: 能夠即時配置屬性值黑名單，當即生效，用來解決隨機屬性值的問題，修改後記得按一下回車鍵，讓變動當即生效，格式以下：/aaa_bbb_\d+/
  3. 執行JS: 能夠用來在瀏覽器端執行一些擴展功能，例如：document.title=123;
  4. 添加延遲：某些操做後，會發起異步請求，異步請求的完成時間不太肯定時，能夠經過添加延遲時間提高穩定性，時間單位是毫秒
  5. 腳本跳轉：用來跳到新的URL，或者跳到另一個腳本，通常狀況下用來引用公共腳本，例如登陸操做。

 

斷言類型：咱們提供子豐富的斷言類型，不一樣的控件類型要選擇合適的斷言類型，這裏針對每一個斷言類型進行介紹

  1. val: 斷言輸入框的值

 

  1. text: 斷言文本的內容

 

  1. displayed: 斷言控件是否處於顯示狀態

expect:displayed,#add-plan-contiune,equal,true

  1. enabled: 斷言當前控件是否可用(沒有禁用)

expect:enabled,#add-plan-contiune,equal,true

  1. selected: 斷言當前控件是否打勾選中了

 

  1. attr: 斷言當前DOM的屬性值

能夠對name屬性進行斷言

  1. css: 斷言當前DOM的CSS值

 

 

  1. url: 斷言當前網頁的URL地址

獲取地址欄的url信息進行斷言

  1. title: 斷言當前網頁的title標題

 

  1. cookie: 斷言當前網頁的cookie值

 

 

  1. localStorage: 斷言當前網頁的localStorage
  2. sessionStorage: 斷言當前網頁的sessionStorage
  3. alert: 斷言彈出的alert窗口的提示文本
  4. jscode: 在瀏覽器端執行自定義的JS代碼，斷言JS代碼的返回值

點擊面板中的js代碼後，將焦點放在日期輸入框中，輸入js代碼document.getElementById("cp-end-date").value=」2019-01-01」

  1. count: 斷言控件匹配的數量
  2. imgdiff: 斷言當前控件的圖片差別，能夠自定義圖片差別的百分比

圖片對比須要安裝GraphicsMagic，使用gm檢查是否安裝。

 

 

 

 

UIRecorder PC高級使用

如何解決屬性值不穩定問題？

有不少開發會寫一些隨機的屬性值，例如某些隨機的id值，這種屬性值會致使錄製的腳本徹底沒法持續運行。

針對這個問題，咱們提供了3套解決方案

  1. 屬性值黑名單正則: 能夠編寫正則表達式過濾掉那些不穩定的屬性值，例如：/attr_value_\d+/，若是須要過濾多種屬性值，能夠這麼寫：/attr_value1_\d+|attr_value2_\d+/。這個值能夠在uirecorder init命令中進行配置，也能夠在錄製過程當中的錄製面板上即時修改。
  2. 屬性開關：在錄製面板上，能夠經過臨時切換不一樣屬性項的開啓和關閉，靈活組合出適合本身業務的PATH生成方案，例如某些場景下不適合用text，就能夠臨時將text屬性項關閉掉。
  3. class值黑名單正則：對於某些不穩定的class值，咱們一樣提供了黑名單功能，此功能須要經過uirecorder init命令進行配置。

變量功能怎麼用？

編輯config.json

{
    "recorder": {
        ...
    },
    "webdriver": {
        ...
    },
    "vars": {
        "productId": "123456",
        "productName": "mp3"
    }
}
  1. 開始頁面輸入: http://xxx.com/product?id={{productId}}
  2. 錄製界面中使用工具面建立新變量

 

  1. 錄製界面中使用工具面更新舊變量的值
  2. 錄製界面中使用工具面板跳轉
  3. URL: http://xxx.com/product?id={{productId}}

 

  1. 錄製界面中使用工具面板插入變量字符串: {{productName}} 或 aaa{{productName}}bbb
  2. 斷言中使用變量字符串: {{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
  3. source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )
    1. 在錄製瀏覽器的開始頁面時輸入 login.mod.js，或者在輸入框的右端點擊下拉小三角，選擇須要的腳本
    2. 或者在錄製中間頁面點擊：腳本跳轉，隨後同上
    3. 當login.mod.js加載完成後，繼續別的步驟的錄製

 

公共腳本必定要放在項目的commons目錄中。

 

如何錄製文件上傳步驟？

  1. UI Recorder僅支持Native文件上傳, 不支持FLASH上傳
  2. 直接點擊<input type="file"> 或點擊 <button role="upload">Upload file</button>, 佔位按鈕必須要用role或data-role標註爲upload
  3. 上傳的文件必需保存在uploadfiles/文件夾中

如何斷點調試生成的腳本？

  1. 安裝 Visual Studio Code ，而後打開它
  2. 在vs code中打開項目根目錄
  3. 打開測試腳本, 添加斷點
  4. 按 F5 鍵執行腳本, 按 F10 鍵執行下一行

如何斷言瀏覽器eval js代碼後的結果？

  1. 添加斷言, 選擇類型： jscode
  2. 同步模式: return document.title
  3. 函數模式:
  4. 異步模式:
4.  function(){
5.      var str = "aaa";
6.      return str;
7.  }
9.  function(done){
10.     setTimeout(function(){
11.         done(123);
12.     }, 100);
13. }

如何在斷言前隱藏DOM結點?

  1. uirecorder init
  2. 在初始化斷言前隱藏選項時，輸入須要隱藏的css選擇器
  3. uirecorder start
  4. UIRecorder會在斷言前隱藏全部匹配的DOM結點，而後就能夠斷言那些隱藏在mask層後面的DOM

如何錄製可選的點擊?

某些步驟不是很是重要，但卻偶爾會出現，這些步驟會老是斷言爲成功。

  1. 按下'Alt'鍵
  2. 點擊目標DOM

如何使用圖片對比功能?

  1. 安裝GraphicsMagick

brew install graphicsmagick (Mac)

sudo apt-get install graphicsmagick (Linux)

http://www.graphicsmagick.org/download.html (Windows)

  1. �添加圖片對比斷言

選擇斷言類型: imgdiff

選擇目標控件

  1. 當業務變化時，咱們能夠經過如下命令更新基線圖片

source run.sh sample/test.spec.js --rebuilddiff (Mac | Linux)

run.bat sample/test.spec.js --rebuilddiff (Windows)

如何導出原數據?

若是但願基於UIRecorder錄製出來的步驟生成JAVA等別的語言自動化腳本，可使用咱們的原數據導出功能。

此功能能夠在生成js語法的自動化腳本同時，也生成json格式的原數據。基於此json文件，咱們就能夠自由的翻譯成任何語言的自動化腳本。

  1. uirecorder start --raw
  2. 錄製完後，就能夠得到2個文件: sample/test.spec.js, sample/test.spec.json

如何接入Jenkins？

  1. 添加命令
  2. 添加報告
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

如何失敗時才生成截圖？

  1. 編輯文件：package.json, 確保mochawesome-uirecorder版本在1.5.22及以上
  2. 在--reporter mochawesome-uirecorder後面添加： --reporter-options copyShotOnlyFail=true

 

Uirecorder使用手冊

Install

  1. Install NodeJs (version >= v7.x)

https://nodejs.org/

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

  1. Install chrome

https://www.google.com/chrome/

  1. Install UI Recorder

npm install uirecorder mocha -g

npm鏡像源可使用淘寶地址npm config set registry http://registry.npm.taobao.org

 

PC record

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/

 

 

錄製腳本若是已經存在，系統會提示繼續錄製或者從新錄製。若是繼續錄製會先執行一次上一次的錄製過程，引導到最後一個錄製的頁面。

 

錄製面板介紹：

  1. 屬性開關：對於某些特殊場景，能夠經過靈活的開啓或關閉屬性項，不一樣步驟選擇不一樣的PATH生成策略，例如：某些控件不太適合用文本定位，就能夠臨時先關閉text屬性項
  2. 屬性值黑名單: 能夠即時配置屬性值黑名單，當即生效，用來解決隨機屬性值的問題，修改後記得按一下回車鍵，讓變動當即生效，格式以下：/aaa_bbb_\d+/
  3. 執行JS: 能夠用來在瀏覽器端執行一些擴展功能，例如：document.title=123;
  4. 添加延遲：某些操做後，會發起異步請求，異步請求的完成時間不太肯定時，能夠經過添加延遲時間提高穩定性，時間單位是毫秒
  5. 腳本跳轉：用來跳到新的URL，或者跳到另一個腳本，通常狀況下用來引用公共腳本，例如登陸操做。

 

斷言類型：咱們提供子豐富的斷言類型，不一樣的控件類型要選擇合適的斷言類型，這裏針對每一個斷言類型進行介紹

  1. val: 斷言輸入框的值

  1. text: 斷言文本的內容

  1. displayed: 斷言控件是否處於顯示狀態

expect:displayed,#add-plan-contiune,equal,true

  1. enabled: 斷言當前控件是否可用(沒有禁用)

expect:enabled,#add-plan-contiune,equal,true

  1. selected: 斷言當前控件是否打勾選中了

  1. attr: 斷言當前DOM的屬性值

能夠對name屬性進行斷言

  1. css: 斷言當前DOM的CSS值

  1. url: 斷言當前網頁的URL地址

獲取地址欄的url信息進行斷言

  1. title: 斷言當前網頁的title標題

  1. cookie: 斷言當前網頁的cookie值

  1. localStorage: 斷言當前網頁的localStorage
  2. sessionStorage: 斷言當前網頁的sessionStorage
  3. alert: 斷言彈出的alert窗口的提示文本
  4. jscode: 在瀏覽器端執行自定義的JS代碼，斷言JS代碼的返回值

點擊面板中的js代碼後，將焦點放在日期輸入框中，輸入js代碼document.getElementById("cp-end-date").value=」2019-01-01」

  1. count: 斷言控件匹配的數量
  2. imgdiff: 斷言當前控件的圖片差別，能夠自定義圖片差別的百分比

圖片對比須要安裝GraphicsMagic，使用gm檢查是否安裝。

 

 

 

UIRecorder PC高級使用

如何解決屬性值不穩定問題？

有不少開發會寫一些隨機的屬性值，例如某些隨機的id值，這種屬性值會致使錄製的腳本徹底沒法持續運行。

針對這個問題，咱們提供了3套解決方案

  1. 屬性值黑名單正則: 能夠編寫正則表達式過濾掉那些不穩定的屬性值，例如：/attr_value_\d+/，若是須要過濾多種屬性值，能夠這麼寫：/attr_value1_\d+|attr_value2_\d+/。這個值能夠在uirecorder init命令中進行配置，也能夠在錄製過程當中的錄製面板上即時修改。
  2. 屬性開關：在錄製面板上，能夠經過臨時切換不一樣屬性項的開啓和關閉，靈活組合出適合本身業務的PATH生成方案，例如某些場景下不適合用text，就能夠臨時將text屬性項關閉掉。
  3. class值黑名單正則：對於某些不穩定的class值，咱們一樣提供了黑名單功能，此功能須要經過uirecorder init命令進行配置。

變量功能怎麼用？

編輯config.json

{
    "recorder": {
        ...
    },
    "webdriver": {
        ...
    },
    "vars": {
        "productId": "123456",
        "productName": "mp3"
    }
}
  1. 開始頁面輸入: http://xxx.com/product?id={{productId}}
  2. 錄製界面中使用工具面建立新變量

  1. 錄製界面中使用工具面更新舊變量的值
  2. 錄製界面中使用工具面板跳轉
  3. URL: http://xxx.com/product?id={{productId}}

  1. 錄製界面中使用工具面板插入變量字符串: {{productName}} 或 aaa{{productName}}bbb
  2. 斷言中使用變量字符串: {{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

    1. 在錄製瀏覽器的開始頁面時輸入 login.mod.js，或者在輸入框的右端點擊下拉小三角，選擇須要的腳本
    2. 或者在錄製中間頁面點擊：腳本跳轉，隨後同上
    3. 當login.mod.js加載完成後，繼續別的步驟的錄製

3.    source run.sh sample/test.spec.js ( Linux|Mac ) 或 run.bat sample/test.spec.js ( Windows )

 

公共腳本必定要放在項目的commons目錄中。

如何錄製文件上傳步驟？

  1. UI Recorder僅支持Native文件上傳, 不支持FLASH上傳
  2. 直接點擊<input type="file"> 或點擊 <button role="upload">Upload file</button>, 佔位按鈕必須要用role或data-role標註爲upload
  3. 上傳的文件必需保存在uploadfiles/文件夾中

如何斷點調試生成的腳本？

  1. 安裝 Visual Studio Code ，而後打開它
  2. 在vs code中打開項目根目錄
  3. 打開測試腳本, 添加斷點
  4. 按 F5 鍵執行腳本, 按 F10 鍵執行下一行

如何斷言瀏覽器eval js代碼後的結果？

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. }

如何在斷言前隱藏DOM結點?

  1. uirecorder init
  2. 在初始化斷言前隱藏選項時，輸入須要隱藏的css選擇器
  3. uirecorder start
  4. UIRecorder會在斷言前隱藏全部匹配的DOM結點，而後就能夠斷言那些隱藏在mask層後面的DOM

如何錄製可選的點擊?

某些步驟不是很是重要，但卻偶爾會出現，這些步驟會老是斷言爲成功。

  1. 按下'Alt'鍵
  2. 點擊目標DOM

如何使用圖片對比功能?

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文件，咱們就能夠自由的翻譯成任何語言的自動化腳本。

  1. uirecorder start --raw
  2. 錄製完後，就能夠得到2個文件: sample/test.spec.js, sample/test.spec.json

如何接入Jenkins？

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

如何失敗時才生成截圖？

  1. 編輯文件：package.json, 確保mochawesome-uirecorder版本在1.5.22及以上
  2. 在--reporter mochawesome-uirecorder後面添加： --reporter-options copyShotOnlyFail=true
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程