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

Question

我想为使用ng-grid的页面编写量角器测试.我没有看到有关如何做到这一点的任何文档.在我的页面上,我看到一个包含数据的网格,html看起来像这样:

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

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

Answer 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 组件内不同元素的一个非常有用的方法是 use 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>')访问相应的元素。

此 Git 存储库中提供了给定 e2e 测试的完整可运行示例。

希望能帮助到你。