无法使用 Protractor 和 Typescript 获取数组中已排序的 ag-grid 列的值

Question

我必须在 ag-grid 中验证排序功能。 打开 UI 时，列数据将按某种顺序排列。
我将它按升序排序，然后将值存储在一个数组中。

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);
    });
})

但是，当我打印数组时，这些值没有排序。它们的顺序与我第一次打开 UI 时的顺序相同。

点击标题后我还添加了 sleep 语句以验证 UI 中的排序。
我有什么遗漏吗？ 提前致谢。

Answer 1

因为 ag-Grid 按 CSS 而不是 HTML Node Position 显示排序的行。

从上面的截图我们可以看到Amelia Cage是排序后的第一行，但是该行的HTML节点不是表体的第一个childNode，而是表体的最后2个childNode。

我们还可以看到这一行集合top: 0px的css/style，这意味着这一行position Y相对于表体是0，这就是为什么这一行显示为第一行，即使它的HTML节点位置不是首先。

但是element.all() 返回元素的顺序是它们的 HTML 节点位置，所以你的 testArr[] 在 HTML DOM 树中获取与 HTML 节点位置相同的顺序，而不是在页面上显示顺序。

选项 1) 通过属性row-index 对element.all() 的元素进行排序，然后检查有序数组的文本是否有顺序。 （row-index 更大，行更靠近尾部）

选项 2) 将element.all() 的元素按top: yyypx 排序，然后检查有序数组的文本是否有顺序。 （yyy 更大，行更靠近尾部）