如何使用量角器访问 ng-grid 元素？答案

【问题标题】：How do I access ng-grid elements using protractor?如何使用量角器访问 ng-grid 元素？
【发布时间】：2014-08-25 21:19:22
【问题描述】：

我想为使用 ng-grid 的页面编写量角器测试。我没有看到任何关于如何做到这一点的文档。在我的页面上，我看到一个带有数据的网格，html 如下所示：

<div class="gridStyle" 
     ng-grid="tenantsGridOptions" 
     ng-if="tenantsGridOptions != undefined" >
</div>

如何从量角器中找到此网格上的元素？

【问题讨论】：

标签： protractor ng-grid angularjs-e2e

【解决方案1】：

考虑以下控制器：

var app = angular.module('angularE2EExamples');
app.controller('GridCustomersController', function ($scope, $http) {
  $scope.customers = [{id: 1, name: 'Lissa Montrose', email: 'lissa@company.com', city: 'Washington', comment: ''},
                      {id: 2, name: 'Karri Lanze', email: 'karri@company.com', city: 'Dallas', comment: ''},
                      {id: 3, name: 'Michael Smith', email: 'michael@company.com', city: 'Berkeley', comment: ''},
                      {id: 4, name: 'Fred Tyler', email: 'fred@company.com', city: 'Washington', comment: ''}
                     ];

  $scope.gridCustomers = {
    data: 'customers',
    columnDefs: [{field: 'id', displayName: 'Id', width: 30},
                 {field: 'name', displayName: 'Name'},
                 {field: 'email', displayName: 'Email'},
                 {field: 'city', displayName: 'City'},
                 {field: 'comment', displayName: 'Comment', 
                  cellTemplate: '<input class="form-control input-sm" type="text" ng-input="COL_FIELD" ng-model="row.entity.comment" />'}
    ],
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEdit: true,
    enableColumnResize: true,
    enableColumnReordering: true,
    multiSelect: false,
    width: 'auto'
  };
});

以下 HTML：

<div ng-controller="GridCustomersController">
  <div class="gridStyle" ng-grid="gridCustomers" style="height: 200px">
  </div>
</div>

访问 ng-grid 组件中不同元素的一种非常有用的方法是使用 by.binding('row.entity.<field>')，其中 'field' 是数据模型的键。你需要定义一个测试用例如下：

describe('Customer test cases.', function() {
  it('Should iterate all grid elements', function(){
    browser.get('http://localhost:9000/customers');
    element.all(by.binding('row.entity.id')).each(function(cell){
      browser.sleep(500);
      cell.click();
      cell.getText().then(function(text){
        console.log('Id: ' + text);
      });
    });
    element.all(by.binding('row.entity.name')).each(function(cell){
      browser.sleep(500);
      cell.click();
      cell.getText().then(function(name){
        console.log('Name: ' + name);
      });
    });
    element.all(by.model('row.entity.comment')).each(function(cell){
      browser.sleep(500);
      cell.click();
      cell.sendKeys('New customer.');
    });
    browser.sleep(2000);
  });
});

Plunker中找到的控制器源代码和HTML内容

在本例中，我为最后一列定义了一个自定义模板。所以，我使用by.model('row.entity.<field>') 来访问相应的元素。

this Git repository 中提供了给定 e2e 测试的完整可运行示例。

希望对你有帮助。

【讨论】：