Question

我正在测试一个网页，其中包含以下元素：

<span class="step-count ng-binding">1</span>
<span class="step-count ng-binding">2</span>
<span class="step-count ng-binding">3</span>
<span class="step-count ng-binding">4</span>

首先，我想计算它们，所以我尝试了以下代码：

it('make sure all elements exist at page', function() {
    var x = browser.findElements(by.css('.step-count.ng-binding'));
    expect(x.length).toEqual(4);
});

和

it('make sure all elements exist at page', function() {
    var x = browser.findElements(by.css('.step-count.ng-binding'));
    expect(x.size).toEqual(4);
});

两者都产生了失败信息：

失败：预期未定义为等于4.

如何在我的ProtractorJS项目中正确计算它们以及如何在之后迭代它们以便比较文本或稍后可能添加的任何其他属性？

Answer 1

您过度复杂化问题。使用$$()和.count()以及.getText()：

var elements = $$('.step-count');

expect(elements.count()).toEqual(4);
expect(elements.getText()).toEqual(["1", "2", "3", "4"]);

请注意我们不需要解析为元素数组 - ElementArrayFinder上可以使用count()和getText()方法（element.all()的结果或$$()）和Jasmine / Protractor中的expect()知道承诺是什么，并会在做出预期之前解决它。

另请注意，在定位器中使用ng-binding类并不是一个好主意 - 它是一个纯技术的Angular类，它不提供任何有价值的，独特的，面向数据的和有意义的信息。如果您希望强制不在定位器中使用Angular类或其他技术属性，则可以使用ESLint静态代码分析工具和eslint-plugin-protractor插件，其中包含no-angular-classes和no-angular-attributes相关规则。

Answer 2

您可以使用element.all()在Protractor中查找具有相同定位器的所有元素。使用以下代码：

element.all(by.css('.step-count.ng-binding')).then(function(listOfElements){
    //verify the count of elements   
    expect(listOfElements.count()).toEqual(4);

    //iterate on list of elements
    listOfElements.each(function(eachElement){
        eachElement.getText().then(function(text){
           console.log("Ele Text:"+text);
        });
    });
 });

Answer 3

我要感谢@GillesC和@Suresh Salloju以下代码对我有用：

it('make sure all elements exist at page', function() {
        var x = element.all(by.css('.step-count.ng-binding')).then(function (items) {
            expect(items.length).toBe(4);
        });
        for (let i = 1; i < x.length; ++i) {
            expect(x[i].getText()).toBe(i.toString());
        }
    });

如何使用browser.findElements（）来计算和迭代元素？

3 个答案: