Puppeteer js eval функция, возвращающая объект объектов

Question

В настоящее время у меня есть следующий частичный код в моем файле кукловода:

  const getImgSrc = await page.$eval('#ldpGallery', el => el.getElementsByTagName('img'));
  console.log(getImgSrc);

HTML-код, который я получаю, это:

<img data-src="https://example.com/981489624/e132d90154bc6cbc6616442c0742fc43l-m0xd-w1020_h770_q80.jpg" class="owl-lazy" src="">

Результаты, которые я получаю в моемконсоль такая:

{ '0': {},
  '1': {},
  '2': {},
  '3': {},
  '4': {} }

Я пытаюсь получить доступ к data-src из приведенного выше HTML.После того, как я восстановил объект, я попытался.forEach () и map, и они оба дают мне ошибку.

Как мне получить строку data-src?

Answer 1

Лучший подход состоит в том, чтобы решить все вопросы, связанные с выборкой данных. Вы могли бы сделать что-то вроде этого:

const getImgSrc = await page.$eval('#ldpGallery', el =>
    Array.from(el.getElementsByTagName('img')).map(e => e.getAttribute("data-src")));
console.log(getImgSrc);

Answer 2

Проблема

Ваш код не работает, поскольку page. $ Eval позволяет возвращать только сериализуемые данные (данные, которые могут быть строковыми ).Вы пытаетесь вернуть HTMLCollection с пятью элементами DOM, которые будут сериализованы для пустых объектов.

Решение

Вы пытаетесь прочитать информацию data-src из всех элементов img внутри#ldpGallery элемент.Для этого я рекомендую использовать функцию page. $$ eval , которая может работать со списком элементов.Таким образом, вы можете напрямую отобразить элементы и получить доступ к атрибутам data через свойство dataset.

Код выглядит следующим образом:

const getImgSrc = await page.$$eval(
    '#ldpGallery img',
    imgs => imgs.map(img => img.dataset.src)
);