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 - /ponents/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.

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/ponents/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.

• javascript
• e2e-testing
• playwright

4 Answers 4

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

In latest playwright, you can simply do to get and verify text in single step:

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

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

NB : nth(0) -> need to be customized based on the column which you need to get data from

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