Error "Object reference chain is too long" on querySelectorAll request

Question

I would like to get all the elements in my DOM with a specific css path:

var elements = await chromeless.evaluate(() => document.querySelectorAll('div a'))
console.log(elements[0].innerHTML)
console.log(elements[1].innerHTML)

but this code gives me the error "Object reference chain is too long" on the first line

This code works though:

var element = await chromeless.evaluate(() => document.querySelectorAll('div a')[0].innerHTML)
console.log(element)

and I could potentially use a loop to retrieve them all but I have no idea how many elements have this css in my DOM so I don't know how many times to loop.

What's the correct syntax to get all the desired elements?

Answer 1

const elements = await chromeless.evaluateHandle(() => {
  const allOccurances = [...document.querySelectorAll("div a")];
  const data = allOccurances.map((node) => node.innerHTML);
  return data;
});
const response = await elements.jsonValue();

console.log(response);

Instead of chromeless we can use page by creating a page as per puppeteer documentation https://pptr.dev/#?product=Puppeteer&version=v13.1.3&show=api-class-page