How to validate all column headers of Angular Grid in Protractor test if headers span past the width of the screen?

Question

I am trying to write a Protractor test for the below requirement in my Angular app:

I am trying to validate the text of all column headers in my Angular grid below:

myPage.column_headers
      .map(function (header) {
          return header.getText()
      }).then(function (headers) {
    expect(headers).toEqual(['Column1', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6']);
});

When I run this, I get the below console error:

Expected $.length = 3 to equal 6.
Expected $[0] = 'Col1' to equal 'Column1'.
Expected $[1] = 'Col2' to equal Column2'.
Expected $[2] = 'Col3' to equal 'Column3'.
Expected $[3] = undefined to equal 'Column4'.
Expected $[4] = undefined to equal 'Column5'.
Expected $[5] = undefined to equal 'Column6'.

As a real-time user, when I navigate to the page, only 3 of the columns are immediately visible to the user.

To see the other 3 columns, you would need to scroll across the page / grid, so I am wondering if that is why this test is failing with the above error.

If that is the case, can someone please tell me what changes I need to make so that I can validate all of the column headers within the Angular grid?

Answer 1

if elements are in DOM but not present, you should use .getAttribute('innerText') instead of .getText()

if element are not in DOM, then you have to scroll to these elements. A request will be sent, and when resolved you can get their text value.