使用量角器，如何确定父元素的类以查看它是否被禁用？

Question

使用量角器时，我正在为选择已找到项目的父元素的语法而苦苦挣扎。我们有一个分页的记录列表，我想做的是查看该列表的右箭头是否被禁用。但诀窍在于，箭头被其父级 div 元素禁用。

这是缩写标记。

<px-page-navigation id="myList" name="myList" page-number="vm.pageNumber" total-page-count="vm.totalPageCount" show-first-last-page="vm.showFirstLastPage" class="ng-isolate-scope">
    <div>
        <!-- Other pagination button markup omitted for clarity -->
        <div class="btn-group px-margin-top-xx-small px-margin-left-xx-small px-font-link-disabled" ng-class="vm.arrowFont(vm.pageNumber + 1)" ng-click="vm.setPage(vm.pageNumber + 1)">
            <!-- Find this "right arrow" element, then get the parent div and determine if it has a class of "px-font-link-disabled" -->
            <i class="fa fa-chevron-right px-image-font bold"></i>
        </div>
    </div>
</px-page-navigation>

我已经能够成功抓取这个元素并点击它。

<i class="fa fa-chevron-right px-image-font bold"></i>

但在捕获该元素后，我需要检查 parent 容器 div 以确定该 div 是否具有“px-font-link-disabled”类。在它被禁用的情况下，测试将不会单击右箭头。否则点击右箭头图标。

这是我为找到父元素所做的几次尝试。

// Attempt A
function findNewInstrument(newInstrumentName: string) {
    element(by.linkText(newInstrumentName)).isPresent().then(function (exists) {
        if (exists === true) {
            console.log('found it');
            return element(by.linkText(newInstrumentName));
        } else {
            var RIGHT_ARROW = '#myList i.fa-chevron-right';

            // TODO: Is the right arrow enabled?
            element(by.css('#myList > i.fa-chevron-right: parent')).then(function (arrowContainer) {
                if (page.hasClass(arrowContainer, 'px-font-link-disabled')) {
                    // Paginated through all pages, and didn't find the instrument.
                } else {
                    // Instrument was not on this page. Click the right-arrow and look for it again.
                    element(by.css(RIGHT_ARROW)).getLocation().then(function (location) {
                        browser.executeScript('window.scrollTo(' + location.x + ',' + location.y + ')').then(function () {
                            element(by.css(RIGHT_ARROW)).click();
                        });
                    });
                    findNewInstrument(newInstrumentName);
                }
            });
        }
    });
}

// Attempt B
function findNewInstrument(newInstrumentName: string) {
    element(by.linkText(newInstrumentName)).isPresent().then(function (exists) {
        if (exists === true) {
            console.log('found it');
            return element(by.linkText(newInstrumentName));
        } else {
            // TODO: Is the right arrow enabled?
            var RIGHT_ARROW = '#myList i.fa-chevron-right';
            element(by.css(RIGHT_ARROW)).then(function (rightArrow) {
                var parentDiv = rightArrow[0].findElement(by.xpath('ancestor::div'));
                if (page.hasClass(parentDiv, 'px-font-link-disabled')) {
                    // The right arrow is disabled.
                } else {
                    // Click the right arrow, then inspect the grid again.
                    element(by.css(RIGHT_ARROW)).getLocation().then(function (location) {
                        browser.executeScript('window.scrollTo(' + location.x + ',' + location.y + ')').then(function () {
                            element(by.css(RIGHT_ARROW)).click();
                        });
                    });
                    findNewInstrument(newInstrumentName);
                }
            });
        }
    });
}

这个 hasClass 函数被上面调用。这是在我们的基础 pageObject 中。

public hasClass(elm: protractor.ElementFinder, theClass: string) {
    return elm.getAttribute('class').then(function (classes) {
        return classes.split(' ').indexOf(theClass) !== -1;
    });
};

在这两种情况下（尝试 A 和 B）出现的错误是：

TypeError: element(...).then 不是函数

捕获右箭头元素后，我将使用什么语法检查父 div 的类以确定该 div 是否具有禁用的类？如果有比我所追求的道路更简单的方法，那么我也会对此持开放态度。感谢您的帮助。

Answer 1

TypeError: element(...).then 不是函数

您无法再用then() 解析ElementFinder - 这是故意的breaking change in Protractor 2.0.0。

以下是我将如何检查父 div 元素的类：

var rightArrow = $('#myList i.fa-chevron-right');
var parentDiv = rightArrow.element(by.xpath('ancestor::div'));

expect(parentDiv).toHaveClass("px-font-link-disabled");

toHaveClass 是一个方便的自定义匹配器：

beforeEach(function() {
    jasmine.addMatchers({
        toHaveClass: function() {
            return {
                compare: function(actual, expected) {
                    return {
                        pass: actual.getAttribute("class").then(function(classes) {
                            return classes.split(" ").indexOf(expected) !== -1;
                        })
                    };
                }
            };
        },
    });
});