如何验证量角器中多个 ag-grid 列的排序

Question

我正在使用量角器进行 e2e 测试。 有一个 ag-grid 表，其中多列按升序排序。

我该如何验证这一点？
Picture of Sample table

Answer 1

在 AgGrid 中，行的显示顺序可能与您从数据模型中插入的顺序不同。但它们总是被正确地分配了属性“row-index”，因此您可以查询它以确定哪些行显示在哪个索引处。

因此，在您的 E2E 测试中，您应该创建两个所谓的“页面对象”（您视图中的选择器，与文本执行代码分开，谷歌用于页面对象模式），如下所示：

// list page object
export class AgGridList {
  constructor(private el: ElementFinder) {}

  async getAllDisplayedRows(): Promise<AgGridRow[]> {
    const rows = $('div.ag-body-container').$$('div.ag-row');
    await browser.wait(EC.presenceOf(rows.get(0)), 5000);
    const result = await rows.reduce((acc: AgGridRow[], elem) => [...acc, new AgGridArtikelRow(elem)], []);
    return await this.sortedRows(result);
  }

  private async sortedRows(rows: AgGridRow[]): Promise<AgGridRow[]> {
    const rowsWithRowsId = [];
    for (const row of rows) {
      const rowIndex = await row.getRowIndex();
      rowsWithRowsId.push({rowIndex, row});
    }
    rowsWithRowsId.sort((e1, e2) => e1.rowIndex - e2.rowIndex);
    return rowsWithRowsId.map(elem => elem.row);
  }
}

// row page object
export class AgGridRow {
  constructor(private el: ElementFinder) {}

  async getRowIndex(): Promise<number> {
    const rowIndexAsString: string = await this.el.getAttribute('row-index');
    return parseInt(rowIndexAsString, 10);
  }
}

在你的测试中：

it('should display rows in right order', async () => {
  const rows = await gridList.getCurrentDisplayedRows(); // gridList is your AgGridList page object, initialised in beforeEach()
  // now you can compare the displayed order to the order inside your data model
});

这段代码的作用是：创建页面对象来访问整个表格和访问一行中的元素。要以与视图中显示的顺序相同的顺序访问列表，您必须获取所有显示的行（使用延迟加载或分页，它应该低于 100，否则您的实现很糟糕），从它们中获取 rowIndex，按它排序，然后才将网格列表返回到测试执行 (.spec) 文件。