How do I access ng-grid elements using protractor?

Question

I would like to write a protractor test for a page that uses ng-grid. I don't see any documentation on how to do that. On my page, I see a grid with data, the html looks like this:

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

How do I find elements on this grid from protractor?

Answer 1

Consider following Controller:

var app = angular.module('angularE2EExamples');
app.controller('GridCustomersController', function ($scope, $http) {
  $scope.customers = [{id: 1, name: 'Lissa Montrose', email: '[email protected]', city: 'Washington', comment: ''},
                      {id: 2, name: 'Karri Lanze', email: '[email protected]', city: 'Dallas', comment: ''},
                      {id: 3, name: 'Michael Smith', email: '[email protected]', city: 'Berkeley', comment: ''},
                      {id: 4, name: 'Fred Tyler', email: '[email protected]', 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'
  };
});

And following HTML:

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

A very useful way to acces to different elements inside ng-grid component is use by.binding('row.entity.<field>'), where 'field' is a key of your data model. You need to define a test case as follows:

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

Source code of controller and HTML content found in Plunker

In this example, I defined a custom template for last column. So, I used by.model('row.entity.<field>') to access to respective element.

A complete runnable example of given e2e test is available in this Git repository.

Hope It helps.