如何在量角器测试中测试重新排序 Ag-Grid 列？答案

【问题标题】：How to test re-ordering Ag-Grid columns in Protractor test?如何在量角器测试中测试重新排序 Ag-Grid 列？
【发布时间】：2020-11-21 08:39:03
【问题描述】：

下面是我在ag-grid 上运行的量角器测试：

element.all(by.css('div.ag-header-cell'))
    .map(function (cell) {
        return cell.getText();
     })
        .then(function (cellValues) {
            expect(cellValues).toEqual(["Spec. or Material", "Grade/Type", "UNS", "Product Form", "%C", "%Mn", "%Si", "%Cr", "%Ni", "%Mo", "Other"]);
});

// Above, we check the text contained in the header cells

// Then I am re-ordering the header cells by dragging 1 of them over the other:

browser.actions()
    .dragAndDrop(
        element(by.xpath('/html/body/app-root/app-shell/div/app-chemistry/div/div[2]/div/ag-grid-angular/div/div[1]/div/div[1]/div[2]/div/div/div[5]/div[3]/div/span[1]')),
        element(by.xpath('/html/body/app-root/app-shell/div/app-chemistry/div/div[2]/div/ag-grid-angular/div/div[1]/div/div[1]/div[2]/div/div/div[10]/div[3]/div')))
            .perform();

// I used `browser.sleep(10000)` to verify the re-ordering is happening.

// Then I added this code with the titles re-ordered:

element.all(by.css('div.ag-header-cell'))
    .map(function (cell) {
        return cell.getText();
     })
         .then(function (cellValues) {
              expect(cellValues).toEqual(["Spec. or Material", "Grade/Type", "UNS", "Product Form", "%Mn", "%Si", "%Cr", "%Ni", "%Mo", "%C", "Other"]);
});

但是，测试失败了，需要原始顺序。

从下面的 HTML 中可以看到，当我将鼠标悬停在 %C 上时，它是页面上的第 10 列，但它仍然是源代码中的第 5 列：

如果 HTML 没有更新，谁能告诉我如何测试这种重新排序？

【问题讨论】：

标签： html angular protractor ag-grid

【解决方案1】：

由left in style 确定的列位置。左侧值更大，列更靠近右侧。

您需要在所有列的style 属性中获取left 值并对值进行排序。

element.all(by.css('div.ag-header-cell'))
  .map(function (column) {
    left = column.getAttribute('style').then(function(style){
      return parseInt(style.split('left:')[1].split('px')[0])
    })

    return { 
      "name": column.getText(),
      "left": left 
    }
  })
  .then(function (colums) {

    expectColumn = [
      "Spec. or Material", "Grade/Type", "UNS", 
      "Product Form", "%Mn", "%Si", "%Cr", "%Ni", 
      "%Mo", "%C", "Other"
    ]

    orderedColumn = colums.sort(function(a,b){
      return a.left - b.left
    })
    .map(function(it){
      return it.name
    })

    expect(orderedColumn).toEqual(expectColumn);
});

【讨论】：