javascript - 如何找到特定的 html 元素，AngularJS， Protractor

Question

我是 AngularJS/protractor 的新手，所以非常感谢任何关于这方面的指导。 由于 Angular JS 通过 ng- 指令实例化 html 元素，因此没有允许我定位特定元素的“id”等。 (显然我想这样做是为了验证内容，点击它们等) 我的 Angular js 片段看起来像:

<div ng-repeat="item in myList">
    <span ng-if="item.category == 'lights'">
        <img src="../../../{{item.icon}}"/>
        &nbsp<span id="foo">{{item.name}}</span>&nbsp
    </span>
</div>

我在遍历列表时尝试定位元素 {{item.name}}:

element.all(by.repeater('item in myList')).then(function(rows) {
    noOfItems = rows.length;
    for (i = 0; i < noOfItems; i++) {
        row = element.all(by.repeater('item in myList')).get(i);
        row.isElementPresent(By.id('foo')).then(function (isP) {
            if (isP) {
                console.log("foo exists?" + isP);
                row.findElement(By.id('foo')).then(function (el) {
                    el.getText(txt).then(function (txt) {
                        console.log("Item name  " + txt);
                    });
                });
            }
        });
    }
});

通过检查，“行”元素似乎是 selenium 对象，因此我调用了“isElementPresent(...)”，效果很好。它检测到正确数量的“foo”元素。但是，当 row.findElement(...) 运行时，测试规范会提前终止。 (没有错误，就结束了)

我知道文档中会有多个“foo”元素，但我希望因为它们是在子 html 元素中查询的，所以(行)这可能会起作用。

有什么建议/解决方法吗？

Answer 1

在解决您的具体问题之前，这里似乎有几处不对劲。

1) 我不认为上面的第 4 行是你想要做的。它将为每一行返回到浏览器，每次都重新运行 by.repeater 查询。您真正需要做的就是 row = rows[i]。

2) 更好的是，您可以简单地将前四行替换为 element.all(by.repeater('item in myList')).each(function(row){

至于在上下文中查找 foo 跨度的问题，您可以尝试查找 by.css(':scope #foo')。这应该让您在当前元素的范围内搜索 id='foo'。