How to get text from a specific column from a table in Playwright

Question

I am using Playwright for the e2e tests. The problem statement that I have is that I want to get the text contents of all the rows of a specific column of a table. The table in question is just like the ones displayed here - https://ant.design/components/table/

A similar HTML ->

(although each td inside the tr has a different class in my case).

Let's just say if I want to get all the age from the Age column in the table.

I've tried a couple of approaches but all of them end up with Promise rejected or Promise waiting and the test times out.

Eg -

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) )

I've asked a similar question related to Puppeteer here but I am trying to approach this in a more Playwright-y way using page.locator if possible.

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

With Playwright 1.21 there is a new method was introduced called the :scope . You can read more about it here . Using this your can optimize your code like this:

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)
})