资源推荐：
视频资源： 软件测试相关系列视频
社区资源： 自动化测试交流群
Selenium UI-Element
介绍
Selenium UI-Element是关于selenium ide中可以将webpage中的元素抽象到对象中的特性，将页面元素抽象到对象中，以方便多个脚本重复利用，并支持在selenese脚本中使用ui locator 方式定位页面元素，它给ui定位器提供了可读性较好的元素定位标识符。
相关术语
Page 指一个完整的页面，或一个完整的DOM对象。
Page element 指页面中任何可交互的页面元素，可以是DOM的node，或者它所包含的文本内容。
Pageset 公共页面元素集合
UI element UI element属于PageSet，用于定位页面元素。
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的对象，代码示例：
|
map.addPageset({ name: 'allPages' , description: 'contains elements common to all pages' , pathRegexp: '.*' }); |
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, 通过判断页面内容来匹配合适的pageset，比如：
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, 如下是一个简短的代码示例：
|
map.addElement('allPages', { name: 'about_link' , description: 'link to the about page' , locator: "//a[contains(@href, 'about.php')]" }); |
如下列出了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/
|
var myMap = new UIMap(); myMap.addPageset({ name: 'allPages' , description: 'all newtours.com pages' , pathRegexp: '.*' }); myMap.addElement('allPages', { name: 'registerEntry', description: 'top level text link to register page.', locator: "xpath=//a[@href='mercuryregister.php']", testcase1: { xhtml: '<h2><a href="mercuryregister.php" expected-result="1">register</a></h2>' } }); myMap.addPageset({ name: 'loginPages' , description: 'all login pages' , paths: ['mercuryregister.php'] }); myMap.addElement('loginPages', { name: 'email', description: 'email is used for the user login account.', args: [ {name: 'email',description: 'used for generate one sys account.', defaultValues: ['email', 'bbb', 'ccc'] } ], getLocator: function(args) { return 'name=' + args.email; }, testcase1: { args: {email: 'qqq'} , xhtml: '<h2 id="masthead"><input name="qqq" expected-result="1"></input></h2>' } }); |
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/198019.html