Unable to get element childNodes/children

var listSelector = "#list"
var listElement = await page.$(listSelector);
var listChildren = await page.evaluateHandle(e => e.children, listElement);
// listChildren is null here

I’ve tried dozens of other ways, including using elementHandle.getProperties as described here, and I can’t get a list of children.

My end goal is to get a list, iterate through all the children, and then click on one of the children based on its text. I can do the text clicking part, but I’m having a heck of a time getting node children.

[willy2dg]

A bit late, but just in case it’s still useful or someone comes here from Google. You can use the ‘:scope’ selector.

let $parent = await page.$('#parent')
let $childs = await $parent.$$(':scope > *')

[vsemozhetbyt]

To iterate over children, you have at least 2 options: 1) transfer all the iteration logic to the browser context and get the final data; 2) get an array of JSHandles to iterate over it:

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    // Way 1.
    const childrenNames = await page.evaluate((selector) => {
      const names = [];
      for (element of document.querySelector(selector).children) {
        names.push(element.tagName);
      }
      return names;
    }, 'body div');
    console.log(childrenNames);

    // Way 2.
    const elements = await page.$$('body div > *');
    const names = [];
    for (const element of elements) {
      names.push(await (await element.getProperty('tagName')).jsonValue());
    }
    console.log(names);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();