How to get HTML element text using puppeteer

Question

This question has definitely been asked multiple times, but I've looked everywhere and none of the answers worked for me.

So I have the following 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>

I am trying to get the text in the parent div: Showing 1 to 20 of 761,871 entries

I tried:

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

and also

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

From Browser Console, this works:

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

and also this:

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

or this:

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

Answer 1

You can use

document.getElementById

You want the text content so use :

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

Your method can be used like this then :

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

I don't like the await pageEval in the const def, so I would change it outside the scope of the eval.

This is because the pageEval is a promise, so you will need in turn to return a promise of the string content. Read More Here

[EDITED - SEE BELOW]

You can it working here : https://jsfiddle.net/9s4zxvLk/

Edit:

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