量角器创建一个表页对象来处理具有不同选择器的表?

时间:2015-11-11 22:47:10

标签: javascript selenium protractor end-to-end pageobjects

我的第一篇文章。我正在使用带有javascript / nodejs的页面对象在量角器中编写e2e测试。已阅读过很多SO帖子,阅读Julie的页面以及学习ProtractorPageObjects

应用程序中的所有表都具有相同的结构。唯一的区别在于属性:data-row-type可以是10个可能的值之一,如'job','node','rack'等...

显然我可以将字符串传递给方法并切换方法以构造正确的选择器。基于ProTractorPageObjects中的注释 我试图不写那种方式的代码。我在这里很傻,只是使用字符串并继续使用它或者有没有办法创建这样的方法而不必传入字符串?

在ProTractorPageObjects的第5章中,在columns.js文件中提到不要使用传入字符串的模式来确定要查找的内容。

例如:

<div id="ee54a74e-17b8-4380-bbd8-2a5087bad7c9" class="tableRow escale-table-row-selected" data-row-type="ipAddress" data-qa-row-number="1">
            <div class="tableCell">
                <span class=""></span>                    ips-172-20-143-20-21
            </div>
            <div class="tableCell">
                <span class=""></span>                    UP
            </div>
            <div class="tableCell">
                <span class=""></span>                    Yes
            </div>

...

另一张表:

<div id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9" class="tableRow escale-table-row-selected" data-row-type="fileSystem" data-qa-row-number="0">
            <div class="tableCell">
                <span class=""></span>                    card-view<div><span class="fa fa-square success fileSystemIndicator"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-share" class="fa fa-square fileSystemIndicator success"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-accessRule" class="fa fa-square fileSystemIndicator success"></span></div>
            </div>
            <div class="tableCell">
                <span class=""></span>                    UP
            </div>
            <div class="tableCell">
                <span class=""></span>                    Yes
            </div>
 ......

1 个答案:

答案 0 :(得分:0)

完全可以根据传递给方法的字符串值构建选择器,然后用于匹配div元素的data-row-type属性。你的案例中的data-row-type属性是一个非常“面向数据”的属性(好吧,比较它,例如,style属性 - 这个属性非常多UI /风格,总是一个糟糕的选择依赖你的定位器)并唯一地区分/定义页面上的页面块。

示例实施:

function getTable (tableType) {
    return element(by.css("div[data-row-type='" + tableType + "']"));
}

样本用法:

getTable("ipAddress");
getTable("fileSystem");