Finding and clicking an ng-click button within a ng-repeat directive

Question

Finding and clicking an ng-click button within a ng-repeat directive

I want to conduct a test on a web page built with AngularJS using Selenium WebDriver and Protractor.

Here is the HTML snippet that needs 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>

This is how it appears:

screenshot of the html angular page

Despite going through documentation, tutorials on youtube, and searching online, I am still unsure how to find and click "Add Item" for a specific item with a particular item id.

Could you please clarify the process for me?

javascript angularjs selenium protractor repeater

Answer 1

Answer №1

If you don't find the specific id in the DOM, it means you won't be able to locate an element using that method.

Here is a code snippet that I personally utilize:

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

Answer 2

If you don't find the specific id in the DOM, it means you won't be able to locate an element using that method.

Here is a code snippet that I personally utilize:

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

Answer 3

Answer №2

Aside from @Danny's response, you can also retrieve the item.id directly from the DOM by utilizing the evaluate() method. Give this code snippet a try:

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

Ref: http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.evaluate

Answer 4

Aside from @Danny's response, you can also retrieve the item.id directly from the DOM by utilizing the evaluate() method. Give this code snippet a try:

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

Ref: http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.evaluate

Finding and clicking an ng-click button within a ng-repeat directive

Answer №1

Answer №2

Similar questions

What is the best way to extract a message as an object from a JSON data in discord.js?

jquery ajax function that returns an object when successful

jquery ajax call not returning data

Can you switch between displaying and concealing a dropdown in the same location based on chosen values?

Experiencing excessive delay in loading data into the DOM following a successful response from a service in AngularJS

Incorporate a FontAwesome Icon into your jsPdf Document

Tips for linking real-time information to an array using AngularJS

Element not being located by Selenium post-click operation

VueJS .filter unexpectedly alters array data

Using CSS and Vue, you can customize the appearance of inactive thumbnails by displaying them

Guide to configuring a background image from the public folder in a React application using Create React App

Click on a selenium python button

Decoding JSON objects using JavaScript/jQuery

Testing the display of an Angular-UI modal through unit testing

Retrieve a specific nested key using its name

Achieving the retrieval of all data can be done simply by utilizing the `echo json_encode($data);

Issues with the "required" functionality in Angular Schema Form on select and checkbox fields are not being resolved

Splitting JavaScript Arrays: Exploring Efficient Division

The specified type `Observable<Pet>&Observable<HttpResponse<Pet>>&Observable<HttpEvent<Pet>>` is not compatible with `Observable<HttpResponse<Pet>>`

My React application came to an unexpected halt with an error message stating: "TypeError: Cannot read properties of undefined (reading 'prototype')"