如何在 Protractor 测试中测试重新排序 Ag-Grid 列？

Question

下面是我运行在 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 没有更新，有人可以告诉我如何测试这个重新排序吗？

Answer 1

列位置由left样式决定。左边的值更大，列更靠近右边。

您需要获取所有列的 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);
});

如何在 Protractor 测试中测试重新排序 Ag-Grid 列？

How to test re-ordering Ag-Grid columns in Protractor test?

html

protractor

ag-grid

angular