Using protractor to e2e test ui-grid 3.0 (ng-grid)

In my previous post I described upgrading to ui-grid 3.0, which is the not-yet-beta version of ng-grid.  Over time this will offer significant benefits, at the moment it feels like a faster ng-grid.  As part of implementing it on my core application I needed to rewrite the library routines for my end-to-end testing using protractor.  These were reasonably tricky to work out, so I thought I’d post them here for anyone else trying something similar.

The trickiness here is finding the right syntax to identify the elements within the grid, and extract the right row.  I also had quite a few issues with clicking on a row to select it.

    /**
     * @ngdoc function
     * @name tableHeader
     * @methodOf functional_common.api:pageObject.grids
     * @description Gets the whole table header as an array, not normally used in a 
     * test script, used as a utility function within this partial.
     * 
     * @example 
     *   risksPage.tableHeader();
     * 
     */
    pageObject.tableHeader = function() {
      return element( by.id(this.grid)).all(by.repeater('ngRepeat: (colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name'));  
    };
    /**
     * @ngdoc function
     * @name checkTableRows
     * @methodOf functional_common.api:pageObject.grids
     * @description Checks that a grid has the specified number of rows.
     * @param {integer} expectedNumRows the number of rows you expect the
     * grid to have
     * 
     * @example 
     *   risksPage.checkTableRows(2);
     * 
     */
    pageObject.checkTableRows = function( expectedNumRows ) {
      rows = element( by.id( this.grid) ).all( by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by row.uid') );
      expect(rows.count()).toEqual(expectedNumRows);
    };
 
    /**
     * @ngdoc function
     * @name tableRow
     * @methodOf functional_common.api:pageObject.grids
     * @description Gets the whole table row as an array, not normally used in a 
     * test script, used as a utility function within this partial.
     * 
     * @example 
     *   risksPage.tableRow();
     * 
     */
    pageObject.tableRow = function( rowNum ) {
      return element( by.id(this.grid)).element( by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by row.uid').row(rowNum));
    };
  
    /**
     * @ngdoc function
     * @name tableElement
     * @methodOf functional_common.api:pageObject.grids
     * @description Gets the specified element from a grid row.
     * @param {integer} rowNum the row number you want to retrieve
     * from
     * @param {integer} rendered column number - i.e. visible
     * column number
     * 
     * @example 
     *   expect(risksPage.tableElement( 1, 5 ).getText()).toEqual( value );
     * 
     */
    pageObject.tableElement = function( rowNum, renderedColNum ) { 
      row = this.tableRow( rowNum );
      return row.element( by.repeater('(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name').row(renderedColNum) );
    };
    

    /**
     * @ngdoc function
     * @name clickRow
     * @methodOf functional_common.api:pageObject.grids
     * @description Clicks on a row.  We used to just go tableRow.click(),
     * but with ui-grid 3.0 it doesn't like that, so we do this instead.
     * @param {integer} rowNum the row number you want to click on
     * 
     * @example 
     *   risksPage.clickRow( 1 );
     * 
     */
    pageObject.clickRow = function( rowNum ) { 
      row = this.tableRow( rowNum );
      row.element( by.repeater('(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name').row(2) ).element( by.cssContainingText( '.ui-grid-cell-contents', '')).then( function(cell) {
        cell.click();
      });
    };
    

    /**
     * @ngdoc function
     * @name clickGridButton
     * @methodOf functional_common.api:pageObject.grids
     * @description Clicks a button in the specified row
     * @param {integer} rowNum the row number you want to retrieve
     * from
     * @param {string} buttonId the id on the button in the html, usually
     * editBtn or viewBtn 
     * 
     * @example 
     *   risksPage.clickGridButton( row, 'editBtn' );
     * 
     */
    pageObject.clickGridButton = function ( rowNum, buttonId ) {
      this.tableRow( rowNum ).element( by.id(buttonId) ).click();
    };

In my code, I have a decorator that adds these functions onto my pageObject, and I rely on the fact that my pageObject has this.grid defined to be my grid id (for example, “risks).

 

Advertisements

4 thoughts on “Using protractor to e2e test ui-grid 3.0 (ng-grid)

  1. I see you keep writing good comment on Kiwi Blog PaulL, sometimes I wonder how old a man before he gets wise I pick you 45.

  2. Very strange election paulL. We certainly dealt to the dogs, and their little mouths can not bite.
    Next time we will need Conservative 5% , and i will write to you later on this, since you are a discerning man .

  3. Working in javascript but was able to get your thought on how to accomplish this. Took me 4 hours, but this saved me. Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s