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

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

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

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

考虑以下控制器：

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',{id: 3,name: 'Michael Smith',email: 'michael@company.com',city: 'Berkeley',{id: 4,name: 'Fred Tyler',email: 'fred@company.com',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测试的完整可运行示例.

希望能帮助到你.

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

猜你在找的Angularjs相关文章