How to get all the child elements values of an html element using puppeteer

Question

I am using puppeteer . I want to get the values of column names of a table.

<tbody>
<tr class="GridHeader" align="center" style="background-color:Black;">
    <td class="HeaderStyleOfdatalist">XYZ</td>
    <td>0500</td>
    <td>0550</td>
    <td>0600</td>
    <td>0650</td>
</tr>
</tbody>

What I need to get is an array of these td values. I tried page.$(selector) but could not understand the output. I also tried:

let idAttribute = await page.$eval('.GridHeader', e => e.childNodes);
console.log(idAttribute)

But not able to get the array of these td values.

Can you please help me loop over these values.

EDIT: Found the answer to the problem and posted it in the answers section.

Answer 1

I was able to get the solution using:

const data = await page.evaluate(() => {
        const tds = Array.from(document.querySelectorAll('.GridHeader td'))
        return tds.map(td => td.textContent)
    });

console.log(data) // ['xyz', '0500', '0550','0600', '0650']