Sauerkraut Sauerkraut - 25 days ago 7
AngularJS Question

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

I need to test an AngularJS web page using Selenium WebDriver and Protractor.

HTML snippet to be tested:



<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>





it looks like this:

screenshot of the html angular page

I already went through the documentation, tutorials on youtube and googled it but I still don't understand how to locate and click "Add Item" for a specific item with a specific item id.

can you please explain to me how it's done?

Answer

The specific id you are looking for wont be in the DOM, which means you cannot locate an element using that approach.

The following is the code which i personally use:

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();
Comments