CODEWITHSUNDEEP
jquerynode.jspuppeteer
Alex
Alex

Reputation: 876

Get the children of an element in puppeteer

So my goal here is to count the number of children of a div class that has inside it multiple div's; I do that by selecting the div then using the children attribute, and then I count the children with their length property and print it.

To achieve my goal i'm trying to implement this code in puppeteer:

$('div[data-test-selector="center-window__content"]').children

(which works flawlessly on the chrome debug console)

this is my converted code:

let childrens = await page.evaluate(() => document.querySelector('div[data-test-selector="center-window__content"]'), i => Array.from(i.children));

However this expression evaluates to undefined.

On their documentation for evaluate it is said that:

if the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined.

Is that the case here? How can I fix it?

Thanks in advance.

EDIT:

So in the end I think that puppeteer couldn't serialize the children array for some reason.

I ended up using that:

const notifs = await page.evaluate(() => {
            return (Array.from(document.querySelector('[data-test-selector="center-window__content"]').children).length);
})

Thanks to @TerryLennox for the help.

Upvotes: 4

Views: 7590

Answers (1)

Terry Lennox
Terry Lennox

Reputation: 30725

You might give this a try: 

const children = await page.evaluate(() => {
    return (Array.from(document.querySelector('div[data-test-selector="center-window__content"]').children).length);
})
console.log("Result:", children);

Testing against this

html

<html>
<div data-test-selector="center-window__content">
    some text
    <div>Child 1</div>
    <div>Child 2</div>
    <div>Child 3</div>
</div>
</html>

Upvotes: 5

Related Questions