如何使用 Protractor Locator 进行 Web 测试 JQWidget

Question

您好，我是使用 ProTractor 的新手。我按照他们网站上的教程进行操作，我想我理解得很好。

我需要测试的网站有点混乱。它在某些页面上有一个 JQwidget 表。列标题有两个部分：一个是文本部分，当您单击它时，它只是旋转通过所有订单；第二个是一个图标，当您单击它时，会出现一个下拉菜单来选择 asc/desc 顺序。

我在浏览器的列标题上使用了检查元素，下面是突出显示的内容：

图标部分似乎有一个 ID，所以我可以只使用 by.ID()，但文本部分没有。如果我只想单击文本部分，我该怎么做？

还想知道查找属性/定位器以用于测试婚礼内容的最佳方法是什么？

谢谢

Answer 1

给出一些基于jQuery Table demo的代码示例：

进一步操作列标题的一些基本功能：

var utils = require('util');

findColumnHeader(columnName) {
    // find column by column text
    return element(by.xpath(
                util.format("//div[@role='columnheader'][.='%s']", columnName)
            ));
}

mouseOverColumnHeader(columnHeader) {
    // mouseover on column header
    return browser.executeScript('$(argument[0]).mouseover()',
           columnHeader.getWebElement());
}

makeSortMenuDisplay(columnName) {
    var columnHeader = findColumnHeader(columnName);

    // mouse over on the column header 
    mouseOverColumnHeader(columnHeader)

    .then(function() {
        // click on the icon to display sort menu
        columnHeader.element(by.css('div.iconscontainer + div')).click();
    });
}

下面的函数操作列标题使用上面的基本函数：

clickColumnHeader(columnName) {
    // click on the column header
    return findColumnHeader(columnName).click();
}

clickAscSort(columnName) {      
    return makeSortMenuDisplay(columnName)

    .then(function()) {
        // click on the ASC sort menu
        element(by.css('div.jqx-menu-wrapper li > div.jqx-grid-sortasc-icon')).click();
    }
}

clickDescSort(columnName) {
    return makeSortMenuDisplay(columnName)

    .then(function()) {
        // click on the DeSC sort menu
        element(by.css('div.jqx-menu-wrapper li > div.jqx-grid-sortdesc-icon')).click();
    }
}

clickRemoveSort(columnName) {
    return makeSortMenuDisplay(columnName)

    .then(function()) {
        // click on the DeSC sort menu
        element(by.css('div.jqx-menu-wrapper li > div.jqx-grid-sortremoev-icon')).click();
    }
}

多练习css选择器和xpath，你就会擅长写定位器。