How to getText from all rows & columns in an infinite scrolling ng-grid using protractor?

Question

I am trying to write a function which returns the complete grid content in an array. Our ng-grid has infinite scrolling through the rows and also have scrolling through the columns.

I have found an answer for scrolling here Protractor: Scrolling a table and testing for infinite scroll

But I am looking to scroll through the grid fully and get the data, So that I can validate the data when I apply filters to the grid.

Any help on this is highly appreciated, thanks

Sample HTML Code for the rows

<div class="ag-body" style="padding-top: 25px; padding-bottom: 30px;">
  <div class="ag-pinned-left-cols-viewport" style="display: inline; height: 245px;">
    <div class="ag-pinned-left-cols-container" style="width: 480px; height: 1830px; top: 0px;">
      <div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-111 ag-row-index-10" style=" top: 300px; height: 30px;" row-id="111" row="10" v_element_id="19490">
        <div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 0px; width: 35px;" colid="id" v_element_id="19491">
        <div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 35px; width: 245px;" colid="title" v_element_id="19492">June12-AA-3</div>
        <div class="ag-cell ag-cell-no-focus ag-cell-value" style=" left: 280px; width: 200px;" colid="operation_status_enum" v_element_id="19493">INVALID</div>
      </div>
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-110 ag-row-index-9" style=" top: 270px; height: 30px;" row-id="110" row="9" v_element_id="20136">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-109 ag-row-index-8" style=" top: 240px; height: 30px;" row-id="109" row="8" v_element_id="20153">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-107 ag-row-index-6" style=" top: 180px; height: 30px;" row-id="107" row="6" v_element_id="20170">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-108 ag-row-index-7" style=" top: 210px; height: 30px;" row-id="108" row="7" v_element_id="20187">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-105 ag-row-index-4" style=" top: 120px; height: 30px;" row-id="105" row="4" v_element_id="20204">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-106 ag-row-index-5" style=" top: 150px; height: 30px;" row-id="106" row="5" v_element_id="20221">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-104 ag-row-index-3" style=" top: 90px; height: 30px;" row-id="104" row="3" v_element_id="20238">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-102 ag-row-index-1" style=" top: 30px; height: 30px;" row-id="102" row="1" v_element_id="20255">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-103 ag-row-index-2" style=" top: 60px; height: 30px;" row-id="102" row="1" v_element_id="20258">

Seems you might be better off having unit tests cover the filtering code to make sure when supplied a particular data set it filters the data correctly. Also are you using ng-grid or ui-grid? believe the latter supersedes the former and ng-grid had stopped development for a while at least at some point. Also if you want the testing of the filtering of the component it seems more appropriate for that test to be in the component lib instead of in your project lib, but just my 2 cents I understand CYA and all. — shaunhusain, May 26 '16 at 18:29
@shaunhusain thanks for your comment. Most of our frontend functional/e2e tests are depend on the grid data. So I will have to implement this as part of my e2e testing — kvm006, May 26 '16 at 18:35
Where is the data coming from in the first place? Meaning, could you may be just mock the response with the pre-defined data with as much data rows as you need? Thanks. — alecxe, May 30 '16 at 18:25
@alecxe we are working on the angular mocking. Meanwhile I thought having this implemented would be nice, just in case if we have to test the grid with more data — kvm006, May 31 '16 at 15:01

score 1 · Answer 1 · answered May 31 '16 at 16:35

You need to find the last row from the dom and use scrollintoview javascript function. please find the example below.

var last_row=element.all(by.css(".ag-row")).last() //this will give you the last row from the grid
browser.executeScript("arguments[0].scrollIntoView();",last_row.getWebElement());

This will scroll the entire grid.Now you can get all the text from row by

element.all(by.css(".ag-row")).getText().then(function(RowValueArray) { 
         //do whatever you want to do with the values.
})

Hope it helps you!

score 1 · Accepted Answer · edited May 23 '17 at 12:22

I am able to scroll through the grid and get the data from all rows in the following way. I got the scrollDown code from Protractor: Scrolling a table and testing for infinite scroll (thanks @alecxe)

There is little hard coding in the for loop. I should find out a way to know how many times I should scrollDown the table. Also the final result have some duplicates will need to clean it up.

  
    scrollDown() {
    return browser.executeScript("return arguments[0].offsetTop;", this.lastRow.getWebElement()).then((offset) => {
      browser.executeScript("arguments[0].scrollTop = arguments[1];", element(by.className("ag-body-viewport")).getWebElement(), offset);
    });
  }

  getRows() {
    return this.pinnedRows.getText();
  }

  getTotalRows() {
    const defer = Promise.defer();
    let allRows = [];

    for (let i = 0; i < 3; i++) {
      this.getRows().then((rows) => {
        allRows = allRows.concat(rows);
        this.scrollDown();
        this.waitToLoad();
        if (i === 2) {
          defer.resolve(allRows);
        }
      });
    }
    return defer.promise;
  }

  waitToLoad() {
    waitFor.elementToBeVisible(this.pinnedRows.get(15));
    browser.waitForAngular();
  }

In the spec:

  getTotalRows().then((data) => {
      log.info(`TOTAL ROWS: ${data}`);
      log.info(`TOTAL NUMBER OF ROWS : ${data.length}`);
      expect(data.length).toBeGreaterThan(50);
    });

How to getText from all rows & columns in an infinite scrolling ng-grid using protractor?

2 Answers2

Linked