[QUESTION] N-th element selector does not work for data inside tables? #9090
Description
I have this failing test on GitHub Actions and Azure DevOps with the same error messages.
const allTableBody = await page.$$eval(
'tbody .MuiTableRow-root',
(items) => {
return items.map((item) => {
const secondColumnData = item.querySelector('td:nth-child(2)');
const thirdColumnData = item.querySelector('td:nth-child(3)');
return {
secondColumnData: secondColumnData.textContent.trim(),
thirdColumnData: thirdColumnData.textContent.trim(),
};
});
},
);
console.log(`The table has ${allTableBody.length} items....`);
if (allTableBody.length > 0) {
console.dir(allTableBody);
console.log('OneClickLink:', `${allTableBody.at(0).thirdColumnData}`);
accessSecretFullLinkText = `${allTableBody.at(0).thirdColumnData}`;
} else {
console.log('The table is empty!');
}However, I can run this test successfully locally on my machine on each and every single time.
The table has 3 items....
[
{
secondColumnData: 'One-click link',
thirdColumnData: 'http://localhost:3000/#/s/84e6def0-9a60-41ab-902e-260e871e7d17/phtROfGY6SrA'
},
{
secondColumnData: 'Short link',
thirdColumnData: 'http://localhost:3000/#/s/84e6def0-9a60-41ab-902e-260e871e7d17'
},
{
secondColumnData: 'Decryption Key',
thirdColumnData: 'phtROfGY6SrA'
}
]
OneClickLink: http://localhost:3000/#/s/84e6def0-9a60-41ab-902e-260e871e7d17/phtROfGY6SrA
How can I obtain the text inside the red area in the table using the correct way?
I have also tried the following alternative, but I receive locator.textContent: Target closed error.
const fullLinkSelector = 'tr >> nth=0 >> td >> nth=2';
const fullLinkLocator = page.locator(fullLinkSelector);
console.table(fullLinkLocator);
accessSecretFullLinkText = (await fullLinkLocator.textContent()).toString();Any ideas to debug this tricky issue are very much appreciated.