介紹

Selenium UI-Element是關於selenium ide中可以將webpage中的元素抽象到對象中的特性，將頁面元素抽象到對象中，以方便多個腳本重復利用，並支持在selenese腳本中使用ui locator 方式定位頁面元素，它給ui定位器提供了可讀性較好的元素定位標識符。

相關術語

Page 指一個完整的頁面，或一個完整的DOM對象。

Page element 指頁面中任何可交互的頁面元素，可以是DOM的node，或者它所包含的文本內容。

Pageset 公共頁面元素集合

UI element UI element屬於

UI argument 通過參數重復使用UI element（參數化），UI element通過參數動態生成不同的元素定位方式。

UI map pageset的集合，通過 UIMap建立pageset, ui element之間的關系

UI specifier string 一個json代碼片段，用於說明解釋pageset,element.

UI-Element測試代碼示例：

<tr>
    <td>clickAndWait</td>
    <td>ui=allPages::section(section=topics)</td>
    <td></td>
</tr>
<tr>
    <td>clickAndWait</td>
    <td>ui=topicListingPages::topic(topic=Process)</td>
    <td></td>
</tr>

clickAndWait的locator參數指定為ui定位器

ui=allPages::section(section=topics)，采用這種面向對象的方式將頁面元素封裝到不同的pageset中可以提高很大的重復利用率，而且增加腳本的可讀性。

使用方法

UI-Element目前已經集成在selenium core中，我們使用UI-Element特性時，只需要使用UIMap類去定義map文件。

Map定義文件語法：

    var map = new UIMap();    
    map.addPageset({
    name: 'aPageset'
    , description: 'contains elements common to all pages'
    , pathRegexp: '.*'
        , ...
    });
    map.addElement ('aPageset', {...});
    map.addElement('aPageset', { ... });
    ...
    map.addPageset({
        name: 'anotherPageset'
        , ...
    });
    ...

§ 首先定義一個UIMap實例，用於構建pageset與ui element之間的關系；

§ 定義一個或多個pageset，使用json形式對pageset進行說明解釋，並使用UIMap#addPageset方法添加到UIMap實例中。

§ 每個pageset可以定義定義一個或多個element，並通過UIMap#addElement方法將定義的多個element一一綁定到相應的pageset中。

Pageset相關屬性列表：

通過UIMap#addPageset(pagesetShothand)方法可以向UIMap中添加pageset，pagesetShorthand是一個json形式描述pageset的對象，代碼示例：

Name，pageset的名字，必填，在UIMap中需要保證該命名的唯一性。

Description，pageset的描述，必填，用於描述該pageset包含哪些頁面元素。

pathPrefix，

pageset所包含的web page路徑前綴，比如：pathPreffix: “gallery/”，表明該pageset包含gallery/路徑下所有子頁面資源。

Paths & pathRegexp

Paths 與pathRegexp二者選其一，Paths使用數組方式匹配pageset所包含的頁面路徑，比如paths: [ 'gotoHome.do' , 'gotoAbout.do' , 'gotoFaq.do']。

PathRegexp使用正則表達式方式匹配pageset所包含的頁面資源路徑，比如：pathRegexp: 'goto(Home|About|Faq)\\.do'

paramRegexps，定義通過url參數去匹配該pageset所覆蓋的頁面資源，比如：paramRegexps: { dept: '^[abcd]$', team: 'marketing' }.

pageContent: function(doc) {

    var id = 'address-tab';
    return doc.getElementById(id) != null;
}

PageContent中可以使用document對象獲取頁面內容，包括dom節點和文本內容等，通過對這些內容的判斷以確定是否符合當前pageset.

UI-Element相關

UIMap#addElement(pagesetName, uiElementShorthand), pagesetName是UI Element所要關聯的pageset名字，uiElementShorthand是一個json對象，用於描述UI Element, 如下是一個簡短的代碼示例：

如下列出了UI Element所有包含的屬性信息：

Name, (String) UI Element的名字，命名註意結合屬性意義來定義，達到見名知意的效果。

Description,(String) 對當前UI Element的描述，同時也作為文檔顯示。

Args, (Array) 一組參數，用於修改getLocator()方法實現，默認為空列表。

Locator & getLocator(args),(Stirng | Function) locator和getLocator選擇其一，用於生成定位頁面元素的表達式。

genericLocator & getGenericLocator(),(String | Function) 通用元素定位器，通過指定通用元素定位器可以很大程度上提高定位元素的效率，指定通用定位器後，匹配元素引擎會優先使用該定位器，當與該定位器匹配成功時，才會調用locator或getLocator定位器進一步定位。

testcase*, (Object) 定義一個用於測試getLocator的測試案例，命名須以testcase作為開頭。

UI-Element args相關屬性

Name, (String) 定義參數名字，參數名字用於向getLocator中傳入參數值。

Description,(String) 關於參數的描述。

DefaultValues & getDefaultValues(inDocument), (Array | Function) 用於指定參數默認值，getDefaultValues須返回Array類型數據。

Newtours註冊流程案例

Newtours 網站地址：http://newtours.demoaut.com/

Selenium IDE 進階部分-UI-Element