Не удается получить URL-адрес из списка изображений с помощью кукольного

Я пытаюсь сделать парсер с помощью puppeteer с помощью узла, и все работает нормально. Я хочу получить массив объектов, выглядящий так:

[{
  title,
  price,
  link,
  image,
}]

и следующий код выполняет это, мне повезло, и на странице был атрибут данных с изображением src, и я смог получить его следующим образом:

img: item.querySelector('.imagebox').dataset.imgsrc,.

Тем не менее, я хотел бы знать, почему этот код не работает, когда я хочу получить src вот так

image: item.querySelector('img').src,

вот код, который я использую, и URL-адрес веб-сайта, который я пытаюсь очистить.

import puppeteer from 'puppeteer'

async function getHTML(url) {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url)

  const listItem = await page.evaluate(() =>
    [...document.querySelectorAll('.aditem')].map(item => ({
      title: item.querySelector('.text-module-begin').textContent.trim(),
      price: item.querySelector('.aditem-details strong').textContent.trim(),
      link: item.querySelector('.ellipsis').href,
      img: item.querySelector('.imagebox').dataset.imgsrc,
      image: item.querySelector('img').src,
    }))
  )
  console.info(listItem)

  await browser.close()
}

const searchArea = `s-kreuzberg`
const searchParam = `bike`
const url = `https://www.ebay-kleinanzeigen.de/${searchArea}/seite:1/${searchParam}/k0l3375r5`

async function go() {
  await getHTML(url)
}

go()

заранее спасибо за любую помощь ??

Итак, подождите, вопрос в том, почему вы не можете получить изображение с помощью атрибута src? :)

— 09.04.2019 22:12

javascript node.js web-scraping puppeteer

09.04.2019 21:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

624

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изображения страницы лениво загружаются, как только они прокручиваются в поле зрения. Так что нам нужно прокрутить до них и немного подождать.
Даже тогда некоторые изображения не добавляются в DOM по какой-то причине, поэтому нам нужно добавить проверку для этих случаев.

Вы можете попробовать что-то вроде этого:

import puppeteer from 'puppeteer'

async function getHTML(url) {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url)

  const listItem = await page.evaluate(async () => {
      function delay(ms) {
        return new Promise((resolve) => { setTimeout(resolve, ms) })
      }

      const items = [...document.querySelectorAll('.aditem')]
      for (const item of items) {
        item.scrollIntoView()
        await delay(100)
      }

      return items.map(item => ({
        title: item.querySelector('.text-module-begin').textContent.trim(),
        price: item.querySelector('.aditem-details strong').textContent.trim(),
        link: item.querySelector('.ellipsis').href,
        img: item.querySelector('.imagebox').dataset.imgsrc,
        image: item.querySelector('img')? item.querySelector('img').src : null,
      }));
    }
  )
  console.info(listItem)

  await browser.close()
}
const searchArea = `s-kreuzberg`
const searchParam = `bike`
const url = `https://www.ebay-kleinanzeigen.de/${searchArea}/seite:1/${searchParam}/k0l3375r5`

async function go() {
  await getHTML(url)
}

go()

это сработало хорошо! Я продолжу использовать imgsrc из соображений производительности, но было бы неплохо узнать, как это сделать для лениво загружаемых изображений. ??

— 11.04.2019 15:53

09.04.2019 22:38