如何查找特定的 html 元素、AngularJS、量角器

Question

我是 AngularJS/量角器的新手，因此非常感谢任何有关这方面的指导。 由于 Angular JS 通过 ng- 指令实例化 html 元素，因此没有允许我定位特定元素的“id”等。 （显然我想这样做来验证内容，点击它们等） 我的 Angular js sn-p 看起来像：

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

从检查来看，“行”元素似乎是硒对象，所以我调用了“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 span 的问题，您可以尝试查找by.css(':scope #foo')。这应该会让您在当前元素的范围内搜索 id='foo'。

Answer 2

顺便说一句，找到正确的 Angular 生成元素的另一种方法是使用 by.js 定位器。这不是 Protractor 特定的定位器，而是底层 WebDriverJS 提供的定位器，因此您必须查看 there 的文档。

本质上，by.js 让您提供一个 javascript 函数，该函数将在浏览器上运行以查找您要查找的元素。 javascript 反过来可以询问 DOM 元素以查找和检查已附加到它们的 Angular $scopes，从而找到具有特定范围值的元素。例如，您可以因此找到与实际 recordId 相关联的元素，该元素存在于范围内但从未呈现为 HTML。这非常有用，因为考虑到 Angular 的工作原理，您很少需要将这些类型的 id 渲染到 HTML 中，但测试仍然需要能够找到代表它们的元素！

Answer 3

var eleB = element(by.css('.ui-grid-render-container.ng-isolate-scope.ui-grid-render-container-body'));

eleB.element(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index').row(10)).$('.ui-grid-cell.ng-scope.ui-grid-coluiGrid-000B').getText().then(function(arr){
            console.log("-------------------\n" + arr);
});