1. 程式人生 > >UI Recorder 功能詳解

UI Recorder 功能詳解

斷言 完成 需要 加載完成 eight nal doc 字符 一段

前言:

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 功能詳解