Парсинг с помощью Puppeteer для полных профанов: Часть 2

Комментарии

Здравствуйте и добро пожаловать во второй пост из этой серии статей о веб-скрейпинге с помощью Puppeteer. Если вы пропустили первый пост, вы можете ознакомиться с ним здесь. В этой заметке мы продолжим с того места, на котором остановились, и возьмем данные о погоде с сайта weather.com. Текущая цель - получить прогноз погоды в Остине, штат Техас, на 10 дней. Не стесняйтесь заменить Остин на ваш любимый город.

Разбираемся с тем, на чем остановились

Наша функция scrape, которую мы создали в предыдущем посте, выглядит следующим образом:

async function scrape() {
  const browser = await puppeteer.launch({ dumpio: true });
  const page = await browser.newPage();

  await page.goto("https://weather.com/weather/tenday/l/Austin+TX");

  const weatherData = await page.evaluate(() =>
    Array.from(
      document.querySelectorAll(".DaypartDetails--DayPartDetail--2XOOV"),
      (e) => ({
        date: e.querySelector("h3").innerText,
      })
    )
  );

  await browser.close();
  return weatherData;
}

const scrapedData = await scrape();
console.log(scrapedData);

Теперь добавим данные weatherData. В дополнение к внутреннему тексту h3 мы получим высокую температуру, низкую температуру и процент осадков за день.

Давайте посмотрим, как мы можем это сделать:

const weatherData = await page.evaluate(() =>
    Array.from(
      document.querySelectorAll(".DaypartDetails--DayPartDetail--2XOOV"),
      (e) => ({
        date: e.querySelector("h3").innerText,
        highTemp: e.querySelector(".DetailsSummary--highTempValue--3PjlX")
          .innerText,
        lowTemp: e.querySelector(".DetailsSummary--lowTempValue--2tesQ")
          .innerText,
        precipitationPercentage: e.querySelector(
          ".DetailsSummary--precip--1a98O"
        ).innerText,
      })
    )

Как вы видите, я добавляю три новых свойства к объекту, который возвращается в функции отображения Array.from. Этими свойствами являются highTemp, lowTemp и precipitationPercentage. Я нашел имена классов, просматривая документ в браузере. Похоже, что эти значения работают, но только время покажет, придется ли что-то обновлять.

Давайте теперь запустим node scraper.js в терминале и проверим результаты:

[
  {
    date: 'Tonight',
    highTemp: '--',
    lowTemp: '31°',
    precipitationPercentage: '84%'
  },
  {
    date: 'Thu 02',
    highTemp: '41°',
    lowTemp: '32°',
    precipitationPercentage: '53%'
  },
  {
    date: 'Fri 03',
    highTemp: '55°',
    lowTemp: '30°',
    precipitationPercentage: '6%'
  },
  {
    date: 'Sat 04',
    highTemp: '57°',
    lowTemp: '40°',
    precipitationPercentage: '7%'
  },
  {
    date: 'Sun 05',
    highTemp: '64°',
    lowTemp: '47°',
    precipitationPercentage: '9%'
  },
  {
    date: 'Mon 06',
    highTemp: '71°',
    lowTemp: '58°',
    precipitationPercentage: '14%'
  },
  {
    date: 'Tue 07',
    highTemp: '68°',
    lowTemp: '50°',
    precipitationPercentage: '54%'
  },
  {
    date: 'Wed 08',
    highTemp: '60°',
    lowTemp: '47°',
    precipitationPercentage: '40%'
  },
  {
    date: 'Thu 09',
    highTemp: '60°',
    lowTemp: '42°',
    precipitationPercentage: '52%'
  },
  {
    date: 'Fri 10',
    highTemp: '62°',
    lowTemp: '38°',
    precipitationPercentage: '17%'
  },
  {
    date: 'Sat 11',
    highTemp: '59°',
    lowTemp: '42°',
    precipitationPercentage: '11%'
  },
  {
    date: 'Sun 12',
    highTemp: '64°',
    lowTemp: '48°',
    precipitationPercentage: '15%'
  },
  {
    date: 'Mon 13',
    highTemp: '67°',
    lowTemp: '51°',
    precipitationPercentage: '24%'
  },
  {
    date: 'Tue 14',
    highTemp: '71°',
    lowTemp: '51°',
    precipitationPercentage: '24%'
  },
  {
    date: 'Wed 15',
    highTemp: '70°',
    lowTemp: '50°',
    precipitationPercentage: '21%'
  }
]

Очень круто. Мы получаем значения, которые я ожидал получить.

Репозиторий GitHub

Я создал репозиторий GitHub для этого проекта. Вы можете найти ссылку здесь. Не стесняйтесь форкать/клонировать этот репозиторий и играть вокруг. Если вам не очень удобно использовать git, есть множество ресурсов. Если вас заинтересует учебник для новичков, пожалуйста, дайте мне знать в разделе комментариев.

Подведение итогов

В этом посте мы смогли собрать немного больше данных о прогнозе погоды и вернуть их в нашу функцию scrape. В следующем посте я покажу вам, как создать GitHub Action, который будет запускать функцию scrape раз в день и сохранять собранные данные о погоде в .json-файл в том же репозитории GitHub.

Поделиться:

Оглавление