无法使用 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 时的顺序相同。

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

Answer 1

因为 ag-Grid 按 CSS 而不是 HTML 节点位置 显示排序的行。

从上面的截图可以看出Amelia Cage是排序后的第一行，但是这一行的HTML节点并不是tablebody的第一个childNode，而是table body.

的最后第二个子节点

我们还可以看到这一行的css/style集合top: 0px，也就是说这一行position Y相对于table body是0，这就是为什么该行显示为第一行，即使其 HTML 节点位置不是第一行。

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

选项 1) 通过属性 row-index 对 element.all() 的元素进行排序，然后检查排序数组的文本是否符合顺序。 (row-index越多，行越靠近尾)

选项 2) 按 top: yyypx 排序 element.all() 的元素，然后检查排序数组的文本是否符合顺序。 (yyy越多，行越靠近尾)

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

Not able to get the values of a sorted ag-grid column in an array using Protractor and Typescript

typescript

protractor

ag-grid