Get cells of rows - node.js

Question

I'm successfully getting the rows of a table as so:
var rows = await page.evaluate(() => Array.from(document.querySelectorAll('.summary > tbody > tr'), element => $(element)))
How do I get the children of each row as an array?
Do I do ... Array.from(rows[i].querySelectorAll(...?
I've tried a few different methods but I can't figure it out.

Answer 1

I understand your question so that you want to get only the values of cells grouped as an array for each of the rows present in a table. If that's correct, then you could do it in this way:
const rows = await page.evaluate(
() => Array.from( document.querySelectorAll('table > tbody > tr') ) // Get the rows as an array
.map(row => Array.from( row.querySelectorAll("td") ) // For each row get its cells as an array
.map(td => td.textContent)) // Replace each cell in the latter array with its text
)

Answer 2

Short answer:
Use the following code, which queries the direct child elements of the tr elements:
const rowChildren = await page.$$('.summary > tbody > tr > *');
Long Answer
Your code is not doing what you think it is doing. I go over your code, to show you the problem.
Problem
Here is your code again:
var rows = await page.evaluate(
() => Array.from(
document.querySelectorAll('.summary > tbody > tr'),
element => $(element),
)
)
What this code does is:
Run document.querySelectorAll in the browser
Map each element in the NodeList to a jQuery object (I'm assuming $ is jQuery here)
Call JSON.stringify on the array of jQuery objects (to serialize them)
puppeteer transfers your serialized data from the browser environment to the Node.js environment
rows now contains an array of "jQuery objects", without reference to their actual DOM node
So, this code does not give you the handle to the jQuery elements in the Node.js environment as the function page.evaluate can only return serializable objects (which DOM nodes are not). Although it looks like you successfully queried the DOM nodes, these objects are just the "jQuery wrappers" around the DOM nodes without the actual DOM nodes as these were not serialized.
Solution
To query DOM nodes from the browser environment, you have to use a function like page.$$, which can return ElementHandles. Therefore, using the following code, will return the actual tr rows:
const rows = await page.$$('.summary > tbody > tr');
To then further query their child elements, you can simply add a > * selector to the end, which will query all direct child nodes of the tr rows:
const rowChildren = await page.$$('.summary > tbody > tr > *');

Answer 3

i think you might be looking to do something along these lines
const rows = await page.evaluate(
() => Array.from(
document.querySelectorAll('.summary > tbody > tr'),
element => $(element)
)
)
let children = []
for (const row of rows)
children = [...children, ...row.children]