Not able to get the values of a sorted ag-grid col

Question

I have to verify the sorting function in an ag-grid. When the UI is opened, the column data will be in some order.
I am sorting it in ascending order and then storing the values in a array.

ag_grid_utils.clickOnHeader("Name");
var testArr=[];
element.all(by.css('div.ag-body-container div[col-id="Name"]'))
    .map(function (Element) {
        element.getText().then(function (result) {
        console.log("result :: "+result);
        testArr.push(result);
    });
})

However when I print the array, the values are not sorted. They are in the same order like when I open the UI first time.

I have also added sleep statement after clicking on the header to verify the sorting in the UI.
Is there anything I am missing? Thanks in advance.

Answer 1

Because ag-Grid display sorted rows by CSS not by HTML Node Position.

From above screenshot, we can see Amelia Cage is the first row after sort, but the HTML node of this row is not the first childNode of table body, but the last 2nd childNode of table body.

Also we can see the css/style of this row set top: 0px which means this row position Y relative to table body is 0, that's why this row displayed as the first row even its HTML Node position is not first.

But element.all() return elements as order as their HTML Node position, so your testArr[] get same order as HTML Node position in HTML DOM Tree, rather than display order on page.

Option 1) order elements of element.all() by attribute row-index, then check the ordered array's text is with order or not. ( row-index more greater, row more near tail)

Option 2) order elements of element.all() by top: yyypx, then check the ordered array's text is with order or not. ( yyy more greater, row more near tail)