Полное руководство по кукольнику, часть 1.

Puppeteer: мощный инструмент для веб-автоматизации

В современном быстро меняющемся мире веб-разработки автоматизация играет ключевую роль, и именно здесь на помощь приходит Puppeteer. Разработанная Google Puppeteer представляет собой мощную библиотеку Node.js, которая позволяет разработчикам управлять браузерами Chrome с помощью JavaScript. Независимо от того, перемещаетесь ли вы по сети в автономном режиме для повышения эффективности или в полнофункциональном браузере для визуальной обратной связи, Puppeteer упрощает, как никогда, автоматизацию таких задач, как сбор веб-страниц, тестирование и многое другое. С Puppeteer то, что когда-то требовало ручных усилий, теперь доступно на расстоянии одного сценария.

Почему парсинг веб-страниц?

В недавнем проекте я работал с клиентом, которому нужна была целевая страница для его сообщества трейдеров на рынке Форекс. Он хотел чего-то похожего на тикеры акций, которые вы видите на MarketWatch или Yahoo Finance, но вместо акций он хотел, чтобы на сайте отображались курсы конвертации валюты за 1 доллар США в реальном времени.

Хотя доступны API, которые могут предоставлять данные — с ограничениями на использование и ежемесячной платой — я увидел возможность создать собственное решение с помощью Puppeteer. Потратив некоторое время заранее, я смог бесплатно собрать и отобразить данные, что в конечном итоге избавило моего клиента от периодических расходов.

Сайт клиента: Majesticpips.com

Настройка puppeteer стала проще

Прежде чем мы сможем начать очищать Интернет во всей его красе, мы должны установить puppeteer в наше приложение.

Так же, как описано в документации

Шаг 1

Установите библиотеку, используя npm, Yarn или pnpm по вашему выбору.

• npm и кукольник

• пряжа добавить кукловода

• pnpm добавить кукловода

Во время установки будет загружена совместимая версия Chrome, что поможет новичкам быстро приступить к работе.

Если вы более опытный разработчик и у вас есть конкретная версия Chrome/Chrome, с которой вы хотели бы работать; затем установим эти пакеты

• npm и puppeteer-core

• пряжа добавить сердечник кукловода

• pnpm добавить ядро ​​кукловода

лучше всего подойдет вам, пакет будет легким, так как он устанавливает только puppeteer, а версию Chrome оставляет на ваше усмотрение.

Установка «puppeteer» — лучший вариант для начинающих тестировщиков. Это упрощает настройку и гарантирует, что у вас есть работающая версия Chromium, что позволяет вам сосредоточиться на написании скриптов.

Шаг 2

теперь в вашем файле JS вы хотите импортировать puppeteer для приложений, использующих модульные системы ES (стандарты ES6) с версиями узлов 12 и выше.

импортировать кукловода из «кукловода»; (рекомендуется)
или
импортировать кукловода из 'puppeteer-core';

или вы можете использовать синтаксис require для системы модулей commonJs для Node.js, которая также совместима со старыми версиями Node.js.

const puppeteer = require('кукловод');
или
const puppeteer = require('puppeteer-core');

Шаг 3

После импорта Puppeteer мы можем начать писать команды для парсинга веб-страниц. Код ниже показывает, что вам нужно использовать.

Запускаем браузер, используя методы, предоставленные библиотекой.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = Этот метод запускает новый экземпляр браузера.

browser.newPage() = Этот метод создает новую страницу (или вкладку) в экземпляре браузера.

browser.close() = Этот метод закрывает экземпляр браузера.

В puppeteer.launch() мы можем передавать аргументы, чтобы настроить запуск браузера в соответствии с нашими предпочтениями. Мы рассмотрим это более подробно во второй части. Однако по умолчанию puppeteer.launch() имеет предустановленные значения, например, для режима без головы установлено значение true.

Шаг 4

Браузер запущен, и теперь у нас есть страница, готовая к работе в Интернете. Давайте перейдем на веб-сайт, где мы соберем некоторые данные.

В этом примере мы будем собирать данные с сайта цитат.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

Я добавил в микс await page.screenshot({path: 'screenshot.png' }). Это отличный инструмент, позволяющий убедиться, что все идет по плану. Когда этот код выполнится, в каталоге вашего проекта появится файл изображения, фиксирующий текущее состояние очищаемого веб-сайта. Вы также можете изменить имя файла по своему вкусу.

Если все в порядке, переходите к шагу 5.

Шаг 5

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

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

Чтобы убедиться, что данные были успешно очищены, мы можем запустить узел «server-file-name» в CLI, и данные будут отображаться в консоли с помощью console.log(quotesScraper);.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): Здесь происходит волшебство. Метод оценки позволяет нам запускать код JavaScript в контексте страницы, которую мы очищаем. Это как если бы вы открыли консоль разработчика браузера и запустили код прямо на странице.

const quotes = document.querySelectorAll(".quote"); Здесь мы выбираем все элементы на странице, соответствующие классу .quote. Это дает нам NodeList элементов цитаты.

const quotesArray = [];: мы инициализируем пустой массив для хранения извлеченных цитат.

for (const quote of quotes) { ... }: этот цикл перебирает каждый элемент кавычки. Для каждого извлекаем текст цитаты и автора.

quotesArray.push({ quote: texts,author });: для каждой цитаты мы создаем объект, содержащий текст цитаты и автора, затем помещаем этот объект в quotesArray.

return quotesArray;: Наконец, мы возвращаем массив цитат, который затем сохраняется в quotesScraper в нашей среде Node.js.

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

Закрытие браузера

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

В предвкушении части 2

С помощью этого скрипта вы успешно извлекли данные с веб-сайта с помощью Puppeteer. Но мы лишь поверхностно коснемся того, что возможно. Во второй части мы рассмотрим более продвинутые методы, такие как обработка динамического контента и использование Express.JS для создания функций API для извлеченных данных. Оставайтесь с нами, мы углубляемся в мир Puppeteer!