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上的文档，教程并使用Google搜索，但我仍然不明白如何找到并点击具有特定商品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()方法从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按钮

2 个答案: