如何在Protractor中验证ag-grid多列的排序状态

嘿，我来帮你搞定这个问题！用Protractor做ag-grid的E2E测试时，验证多列升序排序其实可以从UI状态验证和实际数据排序验证两个维度入手，双管齐下更靠谱，我之前处理过类似场景，分享具体方法给你：

一、先验证表头的排序UI状态 #

ag-grid会给排序列的表头添加特定的样式和属性，我们可以通过这些标识来确认排序状态：

1. 检查排序列的升序标记 #

ag-grid的升序列表头会带有aria-sort="ascending"属性，同时还有ag-header-cell-sorted-asc的class，我们可以定位这些元素来验证：

// 定位所有处于升序状态的表头单元格
const sortedAscHeaders = element.all(by.css('.ag-header-cell[aria-sort="ascending"]'));

// 验证升序排列的列数是否符合预期（比如你说的多列，这里假设是2列）
expect(sortedAscHeaders.count()).toBe(2);

2. 验证多列排序的优先级顺序 #

当多列排序时，ag-grid会在表头显示排序的优先级数字（比如第一排序列显示1，第二列显示2），对应的元素是.ag-header-cell-sort-order，我们可以检查这个数字的顺序：

// 遍历每个升序列表头，检查排序优先级
sortedAscHeaders.each((cell, index) => {
  // 第1个排序列的优先级应该是1，第2个是2，以此类推
  expect(cell.$('.ag-header-cell-sort-order').getText()).toBe((index + 1).toString());
});

二、验证表格数据的实际排序逻辑 #

UI状态验证只能确认表头的标记，但实际数据是否真的按多列升序排列才是核心，这一步需要我们获取表格数据后自行对比：

1. 封装获取表格数据的方法 #

先把表格里需要验证的列数据提取出来，注意要根据col-id定位（比用索引更稳定，避免列顺序调整导致测试失败）：

/**
 * 获取表格的目标列数据
 * @returns {Array} 包含每行指定列数据的数组
 */
const fetchTableData = async () => {
  // 定位所有表格行
  const rows = element.all(by.css('.ag-row'));
  const rowTotal = await rows.count();
  const tableData = [];

  for (let i = 0; i < rowTotal; i++) {
    // 假设我们要验证的两列是"productName"和"price"
    const productName = await rows.get(i).$('[col-id="productName"]').getText();
    // 数字类型的列要转换类型，避免字符串排序偏差
    const price = parseFloat(await rows.get(i).$('[col-id="price"]').getText());
    
    tableData.push({ productName, price });
  }
  return tableData;
};

2. 生成预期的排序结果并对比 #

按照多列升序的规则（先按第一列排序，第一列值相同则按第二列排序），生成预期的排序数组，再和实际数据对比：

it('should validate multi-column ascending sort correctly', async () => {
  // 获取实际表格数据
  const actualData = await fetchTableData();
  
  // 生成预期的排序后数据：先按productName升序，再按price升序
  const expectedData = [...actualData].sort((a, b) => {
    // 先比较productName
    const nameCompare = a.productName.localeCompare(b.productName);
    if (nameCompare !== 0) {
      return nameCompare;
    }
    // 若productName相同，再比较price
    return a.price - b.price;
  });
  
  // 验证实际数据和预期排序完全一致
  expect(actualData).toEqual(expectedData);
});

几个额外的注意点 #

• 等待数据加载完成：如果表格是异步加载的，一定要用browser.wait()等待行元素出现，避免获取到空数据
• 处理特殊数据类型：日期、数字类型的列一定要转换为对应类型后再排序对比，不然字符串排序会出错（比如"10"会排在"2"前面）
• 避免硬编码索引：始终用col-id定位列，不要依赖列的显示顺序，这样即使页面调整列顺序，测试也不会失效

内容的提问来源于stack exchange，提问作者Jay