How to capture <table> contents using playwright

user_370664 0
Viewed 7952

What is the right query selector to grab all the tags, and iterate, in order to capture table data? The below query selectors are failing to find the elements in the DOM. Thank you in advance 

const allusers = await page.$$eval('tbody .MuiTableRow-root', (users) => {
    return users.map(user => {
        const email = user.querySelector('tr:nth-child(1)');
        const edition = user.querySelector('tr:nth-child(2)');
        return {
            email: email.innerText.trim(),
            edition: edition.innerText.trim()
        };
    });
});

console.log('${allusers.length} users found');
console.dir(allusers);

enter image description here

playwright webautomation javascript
1 Answers

Well, folks, as the saying goes, the devil is in the details.

Two things:

✔️ It's :td, not :tr, because :td is the child of :tr

✔️ There is no innerText on the element. We need to call access the value via textContent

Here's the working snippet:

const allusers = await page.$$eval('tbody .MuiTableRow-root', (users) => {
    return users.map(user => {
        const email = user.querySelector('td:nth-child(1)');
        const edition = user.querySelector('td:nth-child(2)');
        return {
            email: email.textContent.trim(),
            edition: edition.textContent.trim()
        };
    });
});

console.log(`${allusers.length} users found`);
console.dir(allusers);
user_3706640
Related