How to process table data in Protractor

Question

In Protractor, how to handle duplicate content in, say, tables? For example, given the following code, it produces a table with three columns Index, Nameand Delete-Buttoneach line:

<table  class="table table-striped">
<tr ng-repeat="row in rows | filter : search"  ng-class="{'muted':isTemp($index)}">
  <td>{{$index+1}}</td>
  <td>{{row}}</td>
  <td>
    <button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
  </td>
</tr>
</table>

And in my test, I need to click the "Delete" button based on the name. What is the best way to find this in Protractor?

I know that I can take the text rows.colum({{row}}), get the index of this, and then click button[index], but I hope for a more elegant solution.

For example, in Geb, you can pass a row locator to a module, which will then accumulate each row with column indicators. And this decision makes me look at the cartographic method "Keepers" ...

Answer 1

. :

  var name = 'some name';

  // This is like element.all(by.css(''))
  return $$('.table.table-stripe tr').filter(function(row) {
    // Get the second column text.
    return row.$$('td').get(2).getText().then(function(rowName) {
      // Filter rows matching the name you are looking for.
      return rowName === name;
    });
  }).then(function(rows) {
    // This is an array. Find the button in the row and click on it.
    rows[0].$('button').click();
  });

http://angular.imtqy.com/protractor/#/api?view=ElementArrayFinder.prototype.filter

Answer 2

- , Protractor Kendo:

, :

// Query all table rows (tr) inside the kendo grid content container
this.getGrid = function () {

    return element.all(by.css('.k-grid-content tr'));
};


// Use the given rows element finder to query for the delete button within the context of the row
this.getDeleteButtonInRow = function (row) {

    return row.element(by.css(".btn.delete"));
};

:

// Verify that a delete button appears in every row of the grid
var grid = pageObj.getGrid();

grid.each(function (row) {

    var deleteButton = downloadsPage.getDeleteButtonInRow(row);

    expect(deleteButton.isDisplayed()).toBe(true);
});

Answer 3

Here is my solution based on the @Andres solution that I used in my page object:

    this.deleteFriend = function(nameString) {
        return this.rows.filter(function(row) {
            // find the row with the name we want...
            return row.$$('td').get(1).getText().then(function(name) {
                return name === nameString;
            });
        }).then(function(filteredRows) {
            filteredRows[0].$('i.icon-trash').click();
        });
    };