0

I have the following code to retrieve all the span elements within a particular div during an iteration as shown below:

const getFruitElements = async () => {
    const fruits = await page.$$(
        `[aria-label="Banana Apple"]`
    );
    for (let fruit of fruits) {
        const spanElements = await fruit.evaluate(() => {
            return Array.from(document.querySelectorAll('span'));
        });
        console.log(spanElements); //This is always undefined even though there are spans
    }
}

There are spans within the dev but I keep getting undefined when logging the retrieved spans.

Is there something wrong with my evaluate function?

ololo
  • 1,326
  • 2
  • 14
  • 47
  • aah, async/await in for loops. Refer: https://zellwk.com/blog/async-await-in-loops/ once see it helps. – Hiren Feb 16 '23 at 15:19
  • @Hiren that's not the issue. i've updated my question. The function itself is an async function – ololo Feb 16 '23 at 16:39
  • You can't return DOM nodes from the browser. They're complex, non-serializable objects that don't work in Node. Use `page.$$('[aria-label="Banana Apple"]')` to get ElementHandles or collect serializable data from your callback, e.g. `fruit.evaluate(el => [...el.querySelectorAll("span")].map(e => e.textContent))`. – ggorlen Feb 16 '23 at 16:43
  • Why not you are using inside page.evaluate document.querySelectorAll('div[aria-label="Banana Apple"] > span'); – Naeem Ahmed Feb 16 '23 at 19:18

0 Answers0