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

Question

我需要使用 Selenium WebDriver 和量角器测试 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 上的文档、教程并进行了谷歌搜索，但我仍然不明白如何找到并单击 "Add Item" 具有特定项目 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();

Answer 2

除了@Danny 的回答之外，还可以使用下面的代码 evaluate() method.Try 从 DOM 中找到 item.id。

element.all(by.repeater('item in items')).filter(function(row){
   return row.evaluate('item.id').then(function(id){
      return val === "1234";
    })
}).first().$('.btn').click();

来源：http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.evaluate

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

How to locate and click an ng-click button in a repeater

javascript

selenium

repeater

angularjs

protractor