0
511
ViewsHow to get text from a specific column from a table in Playwright
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.
2 answers
Answer question0
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())
}
0
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)
})