Why Does `page.evaluate()` Return Empty Objects When Querying Elements in Puppeteer?

Puppeteer: page.evaluate querySelectorAll Dilemma

When using the page.evaluate() function in Puppeteer, some users have encountered the issue of receiving an array of empty objects as a result. This puzzling behavior stems from the need to return serializable values from within the evaluate function.

Consider the following Puppeteer code, where the goal is to extract the title elements from the popular social news aggregation website Reddit:

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://reddit.com/');

let list = await page.evaluate(() => {
  return Promise.resolve(Array.from(document.querySelectorAll('.title')));
});

console.log(JSON.stringify(list))

await browser.close();

Upon execution, this code may return an array of empty objects similar to the one mentioned in the problem description. The reason for this lies in the fact that while DOM elements are not directly serializable to JSON, Puppeteer attempts to stringify them anyway.

To resolve this issue, the code needs to extract the desired values from the elements and return them in a JSON-serializable format. In this case, the href attribute of the title elements holds the actual title links. To obtain these, the code can be modified as follows:

let links = await this.page.evaluate((sel) => {
        let elements = Array.from(document.querySelectorAll(sel));
        let links = elements.map(element => {
            return element.href
        })
        return links;
    }, sel);

The above is the detailed content of Why Does `page.evaluate()` Return Empty Objects When Querying Elements in Puppeteer?. For more information, please follow other related articles on the PHP Chinese website!