如何从 Playwright 中的表格的特定列获取文本

Question

我正在使用 Playwright 进行 e2e 测试。我的问题陈述是我想获取表的特定列的所有行的文本内容。有问题的表格就像此处显示的表格一样 - https://ant.design/components/table/

类似的 HTML ->

（尽管

td

中的每个

tr

在我的例子中都有不同的类）。

假设我想从表中的 Age 列获取所有年龄。

我尝试了几种方法，但所有方法最终都以 Promise 被拒绝或 Promise 等待而测试超时。

例如-

let table_row = page.locator("tbody.ant-table-tbody tr");   // get the tr tags
       let text = table_row.locator('td:nth-child(2)');
       const arrayoftext = await page.$$eval(text, links=>
           links.map(link.textContent) )

我已经问了一个与 Puppeteer 相关的类似问题here，但我正在尝试使用

page.locator

（如果可能的话）以更剧作家的方式来解决这个问题。

Answer 1

const textsFromThirdColumn = [];    
const rowCount = await page.locator('.ant-table-tbody').locator('tr').count();

for (let i = 0; i < rowCount; i++) {
textsFromThirdColumn.push(await page.locator('.ant-table-tbody').locator('tr').nth(i).locator('td').nth(2).innerText())
}

Answer 2

在最新的剧作家中，您只需一步即可获取并验证文本：

expect(page.locator('.my-table-row').nth(2)).toContainText('Steve')

Answer 3

Playwright 1.21 引入了一种新方法，称为

:scope

。您可以在这里阅读更多相关信息。使用这个你可以像这样优化你的代码：

const row = page.locator('tbody.ant-table-tbody tr[data-row-key="3"]')
const rowTexts = await row.locator(':scope').allInnerTexts()
await rowTexts.forEach((text) => {
  console.log(text)
})

Answer 4

let arrayName = new Array<string>();
let count = await page.locator('tr').count();
for (let i = 0; i < count; i++){
  let name : string;
  name  = await page.locator('tr').nth(i).locator('td').nth(0).locator(':scope').allInnerTexts();
  name = name.toString();
  arrayName.push(name);
}
console.log(arrayName);

注意：nth(0) -> 需要根据您需要从中获取数据的列进行自定义