How to get children of elements by Puppeteer

Question

I understand that puppeteer get its own handles rather than standard DOM elements, but I don't understand why I cannot continue the same query by found elements as

const els = await page.$$('div.parent');

for (let i = 0; i < els.length; i++) {
    const img = await els[i].$('img').getAttribute('src');
    console.log(img);
    const link = await els[i].$('a').getAttribute('href');
    console.log(link);
}

What's the problem? what error does it return? – Sam H Apr 12 '19 at 20:45 — Sam H, Apr 12 '19 at 20:45

score 24 · Accepted Answer · answered Apr 12 '19 at 20:48

Problem

The element handles are necessary as an abstraction layer between the Node.js and browser runtime. The actual DOM elements are not sent to the Node.js environment.

That means when you want to get an attribute from an element, there has to be data transferred to the browser (which DOM element to use) and back (the result).

Solution

Therefore, the result from await els[i].$('img') is not really the DOM element, but only a wrapper that links to the element in the browser environment. To get the attribute, you have to use a function like elementHandle.$eval:

const imgSrc = await els[i].$eval('img', el => el.getAttribute('src'));

This runs the querySelector function on the given element and executes the given function to return its attribute.

In this case, can be usefull cause they have one Image children, but if I've multiple images inside, how to get all srcs? const data = await aliexpress.page.evaluate(() => { const tds = Array.from(document.querySelectorAll('div > img')) return tds.map(img => img.src) }); But I dont wanna use .page.evaluate. — Paulo Costa, Sep 22 '20 at 04:23

score 10 · Answer 2 · edited May 02 '22 at 10:34

10

You can use function $eval

const els = await page.$$('div.parent');

for (let i = 0; i < els.length; i++) {
    const img = await els[i].$eval('img', i => i.getAttribute('src'));
    console.log(img);
    const link = await els[i].$eval('a', a => a.getAttribute('href'));
    console.log(link);
}

edited May 02 '22 at 10:34

super7egazi

706
1
8
22

answered Apr 12 '19 at 20:47

hardkoded

18,915
3
52
64

How to get children of elements by Puppeteer

2 Answers2

Problem

Solution

Linked