[Bug]: Using $eval or evaluate selector to get child elements results in missing HTML properties

Bug description

Hello, when I try to use await page.$eval('.container', e => e.children) to select a nested element like the one below:

 <div class="container">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
  </div>

I do not get the element’s available properties. For example , when I selected an element with children and want to get its innerHTML or innerText. All I end up with is after converting to an array from a HTMLCollection is:

[
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {  vei: { onClick: [Object] } },
  {},
  { vei: { onClick: [Object] } },
  { vei: { onClick: [Object] } }
]

This is a list of buttons for a paginated navigation element and I would like to get the innerText properties for each element so I can access the page numbers, but only the onClick event handler property is accessible. Selecting the elements using the selector individually I am able to access all of its properties. I’ve also tried using

await queryLoadedPage.evaluate(() => { 
      let elem = document.querySelector('.container');
      let children = elem?.children
      console.log(children)
   });

But this just returns undefined for the children. Any help would be greatly appreciated!

Puppeteer version

19.4.0

Node.js version

v18.12.1

npm version

9.1.3

What operating system are you seeing the problem on?

Linux, Windows

Configuration file

No response

Relevant log output

No response

[OrKoN]

What I mean is

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
    });
    const page = await browser.newPage();
    await page.setContent(`
    <div class="container">
        <div class="child">A</div>
        <div class="child">B</div>
        <div class="child">C</div>
    </div>
    `)
    let children = await page.$eval('.container', e => {
        const data = [];
        for (const child of e.children) {
            data.push({ tagName: child.tagName, innerText: child.innerText });
        }
        return data;
    });
    console.log(children); // [ { tagName: 'DIV', innerText: 'A' }, { tagName: 'DIV', innerText: 'B' }, { tagName: 'DIV', innerText: 'C' }]
    await browser.close();
})()  

otherwise you get the default representation of the DOM Element as a string.

[OrKoN]

@JohnnyRacer better ask on StackOverflow. Short answer: the same way, either using selectors or DOM APIs in the evaluated function.