UI Recorder 功能詳解
前言:
UI Recorder安裝教程見:UI Recorder 安裝教程(一)、UI Recorder 安裝教程(二)
本次著重介紹UI Recorder錄制過程中的功能按鈕:添加懸停,添加斷言,使用變量,執行JS,添加延遲,腳本跳轉,結束錄制。如下圖所示:
1、屬性開關
進入錄制頁面後,屬性開關全部為默認開啟狀態,因此在你點擊任意DOM時,DomPath會自動選擇屬性並展示。如下圖所示:
鼠標點擊頁面DOM“Email:”,DomPath展示為://td[text()="Email:”]
若將屬性開關text關閉後,DomPath會自動選擇其他屬性並展示。(點擊屬性開關text,text置灰並關閉,再次點擊點亮並開啟)
2、屬性黑名單
因為某些屬性值是隨機或不穩定,我們無法錄制出穩定的CSS選擇器路徑,因此我們可以使用黑名單過濾這些屬性值。
提示: 屬性黑名單是一個正則表達式, 可以類似這樣使用:/attr_\d+/
a)可以在UI Recorder初始化時,屬性值黑名單正則設置時,輸入黑名單正則表達式,如:/attr_\d+/
b)也可以在錄制頁面,屬性黑名單處,輸入黑名單正則表達式,如:/attr_\d+/
3、添加懸停
當頁面中存在二級目錄等類似情況時,需要鼠標懸停操作,UI Recorder就提供了添加懸停操作,可單次懸停或者多次添加懸停。依據需求可自行選擇實現方式。
a)單次懸停,點擊“添加懸停”按鈕,鼠標變為綠色鎖定元素,單擊後結束懸停。
b)多次添加懸停,按下Ctrl鍵,點擊添加懸停按鈕,進入懸停模式,可釋放Ctrl鍵;點擊需要懸停的DOM控件(可多次添加懸停)。
按下Esc鍵 或 點擊結束懸停按鈕, 退出懸停模式。
懸停模式下,可對元素進行斷言操作,點擊添加斷言按鈕,點擊需要斷言的DOM控件。
4、添加斷言
UI Recorder支持豐富的斷言類型: val、text、displayed、enabled、selected、attr、css、url、title、cookie、localStorage、sessionStorage
步驟:點擊添加斷言按鈕,點擊需要斷言的DOM控件。彈出添加斷言的窗口,在窗口中填入相關信息。點擊確認,添加斷言成功。
#延遲時間,默認為300ms
#斷言類型,支持以上列出的12種類型,根據自己的需要選擇。
#斷言DOM,顯示鼠標定位的元素
#比較方式,支持7種類型:equal、notEqual、contain、notContain、above、below、match、notMatch,,根據自己的需要選擇。
#斷言結果,填寫期望結果
5、使用變量
一、添加變量有2種方式,一種方式是在config.json文件中直接編輯添加,另一種方式是在錄制頁面,點擊使用變量,選擇創建變量。
提示: 所有變量字符串均支持JS語法的模板字符串,例如:{{productName}}, ${new Date().getTime()}
1)編輯config.json,設置變量。
如下圖:此處設置了4個變量,分別為:username、password、test、dev
2)在錄制頁面,創建變量。
如下圖所示,在錄制頁面,點擊使用變量,彈出使用變量彈窗,使用方式選擇為插入變量,變量名,點擊添加變量,即可設置變量。
二、更新變量,在錄制頁面,點擊使用變量,彈出使用變量彈窗,使用方式選擇為更新變量。
選擇想要更新的變量名username,選擇取值方式(與斷言方式一致,為12種類型),取值正則,即可更新已有變量。
三、使用變量,在錄制頁面,點擊使用變量,鼠標定位需要插入變量的DOM,彈出使用變量彈窗,使用方式選擇為插入變量
選擇想要插入的已有變量名username,頁面自動展示username相關信息。
鼠標定位需要插入變量的DOM為Email的輸入框,點擊使用變量框的確認按鈕,變量添加成功。在輸入框中插入該變量username
插入變量的DOM,若要添加斷言,可使用變量字符串:{{username}}
6、執行JS
在錄制頁面,點擊執行JS按鈕,可輸入一段js代碼,並執行,例:document.title="test"
輸入js代碼後,點擊確認,瀏覽器會立即執行該js代碼,如下圖,title更改為test。
7、添加延遲
在錄制頁面,點擊添加延遲按鈕,可在錄制過程中添加延遲時間,在添加延遲彈框中,輸入延遲時間,並執行,默認為1000ms。
8、腳本跳轉
錄制過程中,可錄制一些公用腳本,例如登錄腳本、固定流程腳本等等。
調用公共腳本方法:在開始頁面的時候輸入sample/test.login.js,或者在錄制中間頁面時點擊腳本跳轉,腳本跳轉彈框中輸入sample/test.login.js
當sample/test.login.js加載完成後,繼續別的步驟的錄制。
9、上傳文件
UI Recorder僅支持Native文件上傳, 不支持FLASH上傳
直接點擊“選擇文件”按鈕或點擊“Upload file”, 占位按鈕必需要用role或data-role標註為upload
上傳的文件必需保存在/uploadfiles/文件夾中。
錄制中禁止如下操作!
1、禁止直接手動修改地址欄中的URL
2、禁止使用TAB切換焦點
3、不要使用雙擊, WebDriver兼容性不好
4、不要使用鼠標選擇部分文本, WebDriver兼容性不好
5、不要手動切換至背景窗口
6、不要點擊非關鍵區域, 僅錄制關鍵步驟
以上為本節內容,如有不全,後續使用過程中,繼續補充~
UI Recorder 功能詳解