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

Posted 2023-03-28

【中文标题】如何在量角器测试中测试重新排序 Ag-Grid 列？

【英文标题】：How to test re-ordering Ag-Grid columns in Protractor test?

【发布时间】：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 没有更新，谁能告诉我如何测试这种重新排序？

【参考方案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);
);