如何使用 browser.findElements() 对元素进行计数和迭代？答案

【问题标题】：How do I use browser.findElements() to count and iterate through elements?如何使用 browser.findElements() 对元素进行计数和迭代？
【发布时间】：2017-03-23 11:00:15
【问题描述】：

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

<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 项目中正确计算它们，以及之后如何迭代它们以比较文本或以后可能添加的任何其他属性？

【问题讨论】：

标签： javascript html css selenium protractor

【解决方案1】：

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

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);
        });
    });
 });

【讨论】：

listOfElements.count() 不会工作，因为它是一个数组。它应该类似于expect(listOfElements.length).toEqual(4);
@SudharsanSelvaraj，谢谢曼。我认为它会起作用。

【解决方案2】：

我要感谢 @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());
        }
    });

【讨论】：

【解决方案3】：

你把问题复杂化了。使用$$() 和.count() 和.getText()：

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

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

注意我们不需要解析成元素数组 - count() 和 getText() 方法都可用于 ElementArrayFinder（element.all() 或 $$() 的结果）和 @987654335 @ in Jasmine/Protractor 知道什么是承诺，并且会在做出期望之前解决它。

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

【讨论】：