javascript - How to get HTML element text using puppeteer - Stack Overflow

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

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

• javascript
• html
• node.js
• puppeteer
• innertext

Share Improve this question Follow asked Feb 12, 2021 at 14:32 francisfrancis 4,53522 gold badges3333 silver badges3535 bronze badges 5

• can you try document.getElementById('dt-card-entry_info') developer.mozilla/en-US/docs/Web/API/Document/… Browser console has jQuery available to it, but puppiteer does not iirc – Pogrindis Commented Feb 12, 2021 at 14:35
• And how do I get the text? – francis Commented Feb 12, 2021 at 14:36
• Am suspecting it has to do with the nested span element. – francis Commented Feb 12, 2021 at 14:38
• The accepted answer is functionally identical to OP's original code, just written in a slightly different (more verbose) style, so I don't think this is a minimal reproducible example. Most likely, OP wasn't waiting for their element to load, the script was being blocked running headlessly or the element was in a frame or shadow DOM. – ggorlen Commented Mar 29, 2023 at 13:09
• Canonical: how to get text inside div in puppeteer – ggorlen Commented Mar 29, 2023 at 13:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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/9s4zxvLk/

Edit:

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