如何使用 puppeteer 获取 HTML 元素文本

Question

这个问题肯定被问过很多次了，但是我到处找，没有一个答案对我有用。

所以我有以下Div：

<div class="dataTables_info" id="dt-card-entry_info" role="status" aria-live="polite">
    Showing 1 to 20 of 761,871 entries
    <span class="select-info">
        <span class="select-item">
            1 row selected
        </span>
        <span class="select-item">
            
        </span>
        <span class="select-item">
            
        </span>
    </span>
</div>

我正在尝试获取父 div 中的文本：显示 761,871 个条目中的 1 到 20 个

我试过了：

const text = await page.$eval('div#dt-card-entry_info.dataTables_info', el => el.textContent)

还有

 const text = await page.evaluate(() => {
        const el = document.querySelector('#dt-card-entry_info')
        return el.innerText
    })

从浏览器控制台，这可行：

$('#dt-card-entry_info').text()

还有这个：

$('#dt-card-entry_info')[0].innerText

或者这个：

$('#dt-card-entry_info')[0].textContent

Answer 1

你可以使用

document.getElementById

你想要文本内容，所以使用：

var res = document.getElementById('dt-card-entry_info').textContent;

你的方法可以这样使用：

const text = await page.evaluate(() => {
        const el = document.getElementById('dt-card-entry_info');
        return el.textContent;
    })

我不喜欢 const def 中的 await pageEval，所以我会在 eval 范围之外对其进行更改。

这是因为pageEval是一个promise，所以你需要依次返回一个promise的字符串内容。 Read More Here

let text = '';
await page.evaluate(() => {
    const el = document.getElementById('dt-card-entry_info');
    text = el.textContent;
})
console.log(text);

你可以在这里工作：https://jsfiddle.net/9s4zxvLk/