protractor 创建一个表格页面对象来处理具有不同选择器的表格？

Question

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

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

显然，我可以将字符串传递给方法并切换方法以构造正确的选择器。基于 ProTractorPageObjects 中的 cmets 我试图不那样写代码。我在这里是不是很傻，只是使用字符串并继续使用它，还是有办法创建这样的方法而无需传入字符串？

在 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>
 ......

Answer 1

完全可以根据传递给方法的字符串值构造选择器，然后用于匹配div 元素的data-row-type 属性。 data-row-type 属性在您的情况下是一个“面向数据”的属性（好吧，将其与例如 style 属性进行比较 - 这个属性非常面向 UI/样式，并且始终是依赖定位器的糟糕选择on) 并唯一区分/定义页面上的页面块。

示例实现：

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

示例用法：

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