Question

在量角器中，如何处理重复内容，例如表格？例如，给定以下代码，可以在每行中创建一个包含3列的表：Index，Name和Delete-Button：

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

在我的测试中，我需要根据给定的名称单击删除按钮。在Protractor中找到这个的最佳方法是什么？

我知道我可以获取rows.colum({{row}})文本，获取该文本的索引，然后点击button[index]，但我希望有一个更优雅的解决方案。

例如，在Geb中，您可以将行定位器传递给模块，然后使用列指示符对每行进行切块。而这个解决方案让我关注了Protractors地图方法......

Answer 1

您可以使用地图或过滤器。 api看起来像这样：

  var name = 'some name';

  // This is like element.all(by.css(''))
  return $$('.table.table-stripe tr').filter(function(row) {
    // Get the second column's 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.github.io/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

这是我的解决方案，基于@Andres解决方案，我在我的页面对象中使用：

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

如何在Protractor中处理表数据

3 个答案: