Puppeteer page.evaluate querySelectorAll return empty objects
Problem:
The return value for page.evaluate()
must be serializable.
According to the Puppeteer documentation, it says:
If the function passed to the
page.evaluate
returns a non-Serializable value, thenpage.evaluate
resolves toundefined
. DevTools Protocol also supports transferring some additional values that are not serializable byJSON
:-0
,NaN
,Infinity
,-Infinity
, and bigint literals.
In other words, you cannot return an element from the page DOM environment back to the Node.js environment because they are separate.
Solution:
You can return an ElementHandle
, which is a representation of an in-page DOM element, back to the Node.js environment.
Use page.$$()
to obtain an ElementHandle
array:
let list = await page.$$('.title');
Otherwise, if you want to to extract the href
values from the elements and return them, you can use page.$$eval()
:
let list = await page.$$eval('.title', a => a.href);
The values returned from evaluate function should be json serializeable. https://github.com/GoogleChrome/puppeteer/issues/303#issuecomment-322919968
the solution is to extract the href values from the elements and return it.
await this.page.evaluate((sel) => {
let elements = Array.from(document.querySelectorAll(sel));
let links = elements.map(element => {
return element.href
})
return links;
}, sel);
I faced the similar problem and i solved it like this;
await page.evaluate(() =>
Array.from(document.querySelectorAll('.title'),
e => e.href));