CoderCastrov logo
CoderCastrov
JavaScript

Парсинг веб-страниц с помощью Puppeteer — Некоторые простые примеры

Парсинг веб-страниц с помощью Puppeteer — Некоторые простые примеры
просмотров
2 мин чтение
#JavaScript
Table Of Content

Что такое Puppeteer?

Puppeteer - это библиотека для NodeJS, которая предоставляет API для управления безголовым браузером Chromium или Chrome. Безголовой браузер - это браузер без пользовательского интерфейса, который используется для парсинга или обхода веб-страниц.

Вот некоторые интересные вещи, которые можно сделать с помощью Puppeteer:

Начало работы

Вам понадобится установленный NodeJS, базовые знания командной строки, JavaScript и DOM.

Установка

Чтобы установить Puppeteer, выполните следующую команду в терминале:

npm i puppeteer

Она также загружает последнюю версию Chromium для плавной работы с API. Если вы не хотите, чтобы Chromium устанавливался по умолчанию, вы можете использовать следующую команду:

npm i puppeteer-core

Настройка проекта

Примеры

Я буду использовать scrapethissite.com для всех примеров. Вы можете использовать любой другой сайт, если он позволяет его парсить. Поищите их политику и посмотрите site/robots.txt.

Сохранение скриншота

Создайте файл с названием screenshot.js в созданной вами папке и введите следующий код:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://scrapethissite.com/');
  await page.screenshot({ path: 'screenshot.png' });
  await browser.close();
})();

Выполните команду в терминале:

node screenshot.js

Создание PDF

Создайте файл с названием make_pdf.js и введите следующий код:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://scrapethissite.com/');
  await page.pdf({ path: 'output.pdf' });
  await browser.close();
})();

Парсинг данных

Теперь мы будем парсить некоторые данные и сохранять их в файл. Мы будем использовать данные команд Национальной Хоккейной Лиги (NHL) с 1990 года.

Сначала нам нужно создать некоторые селекторы. Селектор - это путь к данным. Мы воспользуемся инструментами разработчика нашего браузера, чтобы сделать это. Откройте их на следующей странице: https://scrapethissite.com/pages/forms/, используя Ctrl + Shift + I, если вы используете Chrome.

Мы возьмем только название команды, год, количество побед и количество поражений.

Обратите внимание на следующее:

  • Данные находятся в таблице.
  • Строки с данными о командах имеют класс team.
  • Внутри tr.team находятся несколько td с классами: name, year, wins и losses.

Мы будем использовать следующие селекторы для этого примера:

  • Строка команды: tr.team
  • Данные: teamRow > td.${dataName}

Мы сохраним эти данные в формате JSON с помощью следующих шагов:

Создайте файл grab_data.js и добавьте в него следующий код:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://scrapethissite.com/pages/forms/');
  
  const data = await page.evaluate(() => {
    const teamRows = Array.from(document.querySelectorAll('tr.team'));
    
    return teamRows.map(row => {
      const name = row.querySelector('td.name').innerText;
      const year = row.querySelector('td.year').innerText;
      const wins = row.querySelector('td.wins').innerText;
      const losses = row.querySelector('td.losses').innerText;
      
      return { name, year, wins, losses };
    });
  });
  
  console.log(data);
  
  await browser.close();
})();

Вы можете увидеть все примеры кода на моем аккаунте GitHub: ссылка на GitHub

rishabhp99/puppeteer-basic-sample

Внести вклад в развитие rishabhp99/puppeteer-basic-sample, создав учетную запись на GitHub.

github.com

Вот и все. Надеюсь, вам было интересно узнать что-то новое.