How to verify the first row of an Angular grid after updating the order of the rows?

Question

I'm trying to create a Protractor test for an Angular Grid.

For my test, I am clicking a column on the grid, this then re-orders the rows.

After this click, I want to verify the order of the rows has been updated correctly, by checking the first cell in that row.

Below is my test code:

myNavbarPage.API_610_Table_H1_button.click();
browser.sleep(2000);
myApi610TableH1.Parts_table_header.click();
browser.sleep(5000);
const first = element.all(by.css('div.ag-cell[aria-colindex="1"]')).first();
expect(first.getText()).toBe('Case Gaskets');

The problem I am facing is that first.getText() is returning the value of the first row in the original order, rather than the updated order.

Can someone please tell me how I can verify the cell within the first row after the grid has been updated?

Note: I've added the browser.sleep() just for myself, so I can validate the button clicks, re-ordering, etc. are all working as expected.

Answer 1

There may be many reasons why it's happening, but to begin with, try to add async/await

it('test case', async () => {
  await myNavbarPage.API_610_Table_H1_button.click();
  await browser.sleep(2000);
  await myApi610TableH1.Parts_table_header.click();
  await browser.sleep(5000);
  const first = element.all(by.css('div.ag-cell[aria-colindex="1"]')).first();
  expect(await first.getText()).toBe('Case Gaskets');
});