Как получить детей от элементов Кукольника

Question

Я понимаю, что puppeteer получает свои собственные дескрипторы, а не стандартные DOM элементы, но я не понимаю, почему я не могу продолжить тот же запрос по найденным элементам, как

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);
}

Answer 1

Задача

Дескрипторы элемента необходимы в качестве уровня абстракции между Node.js и средой выполнения браузера. Фактические элементы DOM не отправляются в среду Node.js.

Это означает, что когда вы хотите получить атрибут от элемента, должны быть данные, переданные в браузер (какой элемент DOM использовать) и обратно (результат).

Решение

Следовательно, результат из await els[i].$('img') на самом деле является не элементом DOM, а только оболочкой, которая ссылается на элемент в среде браузера. Чтобы получить атрибут, вы должны использовать функцию типа elementHandle.$eval:

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

Запускает функцию querySelector для данного элемента и выполняет данную функцию, чтобы вернуть его атрибут.

Answer 2

Вы можете использовать $eval

onst 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);
}