How to use .$$eval function

Question

I'm trying to run this code:

var aaa = await page.$$eval(
  selector,
  list => (list, value) => {
    return resolve(list.find(element => element.textContent === value));
  },
  value
);

But I received an error.

Therefore, I tried to print the items in "list" (because I assumed that the problem is there), I tried this code:

var aaa = await page.$$eval(selector, list => list);

And I received that "aaa" is empty.

Any idea what may be the problem?

Answer 1

You are attempting to return DOM elements from page.$$eval(), which will return undefined because DOM elements are not serializable.

Try using page.$$() instead if you would like to return an ElementHandle array.

Take a look at the Puppeteer Documentation for page.$$eval() below:

page.$$eval(selector, pageFunction[, ...args])

• selector <string> A selector to query page for
• pageFunction <function> Function to be evaluated in browser context
• ...args <...Serializable|JSHandle> Arguments to pass to pageFunction
• returns: <Promise<Serializable>> Promise which resolves to the return value of pageFunction

This method runs Array.from(document.querySelectorAll(selector)) within the page and passes it as the first argument to pageFunction.

If pageFunction returns a Promise, then page.$$eval would wait for the promise to resolve and return its value.

Examples:

const divsCounts = await page.$$eval('div', divs => divs.length);

Answer 2

Just try to map your array to more serializable one.

For example:

const links = await page.$$eval('h1 > a', e=>e.map((a)=>a.href))