如何使用剧作家捕获 <table> 内容？答案

【问题标题】：How to capture <table> contents using playwright?如何使用剧作家捕获 <table> 内容？
【发布时间】：2021-06-18 12:21:25
【问题描述】：

什么是正确的查询选择器来获取所有标签并进行迭代以捕获表数据？以下查询选择器无法在 DOM 中找到元素。提前谢谢你？？？

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

【问题讨论】：

标签： javascript webautomation playwright

【解决方案1】：

document.getElementsByClassName 或 document.querySelectorAll

【讨论】：

您能详细说明一下吗？是要替换 eval 调用吗？
感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请编辑您的答案以添加一些解释，包括您所做的假设。

【解决方案2】：

好吧，伙计们，俗话说，魔鬼在细节中。

两件事：

✔️ 是:td，不是:tr，因为:td 是:tr 的孩子

✔️ 元素上没有innerText。我们需要通过textContent调用访问值

这是工作的 sn-p：

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

【讨论】：