javascript - 如何在中继器中定位并单击 ng-click 按钮

Question

我需要使用 Selenium WebDriver 和 Protractor 测试 AngularJS 网页。

要测试的 HTML 片段:

<tr ng-repeat="item in items" class="ng-scope">
    <td class="ng-binding">
        Item1
    </td>
    <td class="ng-binding">
        description
    </td>
    <td class="ng-binding">
        1234
    </td>
    <td>
        <div ng-click="AddItem(item.id)" class="btn">Add Item</div>
    </td>
</tr>

<tr ng-repeat="item in items" class="ng-scope">
    <td class="ng-binding">
        Item2
    </td>
    <td class="ng-binding">
        description
    </td>
    <td class="ng-binding">
        1235
    </td>
    <td>
        <div ng-click="AddItem(item.id)" class="btn">Add Item</div>
    </td>
</tr>

看起来像这样:

screenshot of the html angular page

我已经浏览了 youtube 上的文档、教程并进行了谷歌搜索，但我仍然不明白如何找到并单击具有特定项目 ID 的特定项目的“添加项目”。

你能给我解释一下这是怎么做到的吗？

Answer 1

您要查找的特定 ID 不会出现在 DOM 中，这意味着您无法使用该方法定位元素。

以下是我个人使用的代码:

element.all(by.repeater('item in items')).filter(function(row){
 return row.all(by.tagName('td')).first().getText().then(function(val){
     return val === "Item1" //this can be your per your wish
  })
}).first().$('[ng-click="AddItem(item.id)"]').click();