how to get readable value from CDPElementHandle

Question

I am just trying to scrap something from some website my code looks like it

const puppeteer = require("puppeteer") 
const main = async () => {
const browser = await puppeteer.launch({})
const page = await browser.newPage()
await page.goto("https://www.example.com")
await page.waitForSelector(".example") 
const titleNode = await page.$$(".example")
titleNode.forEach(  el => {
  el.getProperties("textContent").then(el => {
          console.log(el)
  })
})
 console.log( titleNode );
 browser.close()
}
main()

And result is something like this

[
    CDPElementHandle { handle: CDPJSHandle {} },
    CDPElementHandle { handle: CDPJSHandle {} },
    CDPElementHandle { handle: CDPJSHandle {} },
    CDPElementHandle { handle: CDPJSHandle {} },
    CDPElementHandle { handle: CDPJSHandle {} },
]

i want to get actual text content inside the element with class 'example' how to extract that value i used .getProperties with .jsonValue but it didnt work Any help would be appreciated

I suggest using `page.$$eval`, not `page.$$` so you don't have to worry about ElementHandles. See [this answer](https://stackoverflow.com/a/76058292/6243352). — ggorlen, Apr 19 '23 at 19:55

score 3 · Accepted Answer · answered Apr 19 '23 at 16:48

Array.prototype.forEach is not designed for asynchronous code, so instead of using .forEach use for...of, or map.

Code :

const puppeteer = require("puppeteer");

const html = `
    <div>
        <a>text1</a>
        <a class='example'>text2</a>
        <a>text3</a>
        <a class='example'>text4</a>
        <a>text5</a>
        <a>text6</a>
    </div>
`;

const main = async () => {
    const browser = await puppeteer.launch({})
    const page = await browser.newPage()
    await page.setContent(html);

    const titleNode = await page.$$(".example");

    let result = [];
    for(let t of titleNode) {
        result.push(await t.evaluate(x => x.textContent));
    }

    let result2 = await Promise.all(titleNode.map(async (t) => {
        return await t.evaluate(x => x.textContent);
    }))


    console.log({result : result, result2 : result2});
}

main();

how to get readable value from CDPElementHandle

1 Answers1