在 Playwright Typescript 中使用 POM 对列进行排序不起作用

Question

我想获取column1、column2等值并对列进行相应的排序。下面是 HTML 结构。我无法找到并获取列值。

当我运行下面的代码时，我在“allValues”中得到空列表。请帮助我解决我犯错误的地方。

我的html

    <div role="gridcell" aria-colindex="1">
     <div> value 1 </div>
    </div>
    <div role="gridcell" aria-colindex="1">
     <div> value 2 </div>
    </div>
<!-- More rows... -->
   

我的测试文件

  test("sorting columns data", async ({ page }) => {

  const sortColumn = new SortColumns(page, "1");
  const columnValues = await sortColumn.getColumnValues();
  console.log(columnValues);
  const sortedNames = [...columnValues].sort();
  expect(columnValues).toEqual(sortedNames);

});

sort-columns.ts 文件

import { type Locator, type Page } from "@playwright/test";

export class SortColumns {
 columnValue: Locator;
 page: Page;

 constructor( page: Page,  element: string ) {

   this.page = page;
   this.columnValue =  page.locator(`[role=aria-colindex]`, { hasText: element });
   console.log("test: "+this.columnValue);

 }

async getColumnValues() {
  const allValues = await this.columnValue.allInnerTexts();
  console.log(allValues);
  return allValues.slice(1); // Remove header
}

}

Answer 1

首先，

aria-colindex

不是

role

。其次，

hasText

不适用于您在定位器中使用的列。它用于过滤元素的文本。
你可以做这样的事情：

const columnValues = page.locator(`[aria-colindex="${element}"]`);