Веб-скрейпинг с помощью браузера без заголовка: руководство по кукловодам

Начать писать здесьВ последнее десятилетие веб-разработка развивалась огромными темпами, появилось множество фреймворков как для серверной части, так и для внешней разработки. Веб-сайты стали умнее, а вместе с ними и базовые фреймворки, используемые при их разработке. Все эти достижения в веб-разработке привели к развитию и самих браузеров. Большинство браузеров теперь доступны с «безголовой» версией, где пользователь может взаимодействовать с веб-сайтом без какого-либо пользовательского интерфейса. Вы также можете очищать веб-сайты в этих безголовых браузерах, используя такие пакеты, как puppeteer и nodeJS.

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

В этом блоге мы научимся очищать веб-сайты в этих безголовых браузерах, используя nodeJS и асинхронное программирование. Прежде чем мы начнем парсить веб-сайты, давайте немного подробнее узнаем о безголовых браузерах. Кроме того, если вас беспокоит законность скрейпинга, вы можете развеять свои мифы о веб-скрейпинге.

Что такое безголовый браузер

Безголовый браузер — это просто браузер без пользовательского интерфейса. Безголовый браузер, как и обычный браузер, включает в себя все возможности рендеринга веб-сайта. Поскольку графический интерфейс недоступен, для взаимодействия с браузером необходимо использовать утилиту командной строки. Безголовые браузеры предназначены для таких задач, как автоматическое тестирование.

Безголовые браузеры более гибкие, быстрые и оптимизированы для выполнения таких задач, как автоматизированное веб-тестирование. Поскольку нет никаких накладных расходов на какой-либо пользовательский интерфейс, безголовые браузеры подходят для автоматизированного стресс-тестирования и веб-скрапинга, поскольку эти задачи могут выполняться быстрее. Хотя такие поставщики, как PhantomJS и HtmlUnit, давно существуют на рынке, предлагая возможности безголового браузера, браузерные игроки, такие как chrome и firefox, теперь также предлагают «безголовые» версии своих браузеров. Следовательно, нет необходимости устанавливать дополнительный браузер для безголовых возможностей.

Необходимость безголового браузера

С развитием фреймворков веб-разработки браузеры стали умнее и стали загружать все библиотеки javascript. Со всей эволюцией технологий веб-разработки тестирование веб-сайтов претерпело изменения и стало одним из основных элементов индустрии веб-разработки. Эволюция безголовых браузеров позволяет нам выполнять следующие приложения

Автоматизация тестирования веб-приложений

Сквозное тестирование — это методология, используемая для проверки того, работает ли поток приложения так, как задумано, от начала до конца. Целью проведения сквозных тестов является выявление системных зависимостей и обеспечение передачи правильной информации между различными системными компонентами и системами. Безголовые браузеры были разработаны, чтобы удовлетворить этот вариант использования, поскольку они обеспечивают более быстрое веб-тестирование с использованием CLI.
Парсинг веб-сайтов
Безголовые браузеры позволяют быстрее очищать веб-сайты, поскольку им не приходится иметь дело с накладными расходами на открытие любого пользовательского интерфейса. С безголовыми браузерами можно просто автоматизировать механизм очистки и извлекать данные гораздо более оптимизированным способом.
Создание веб-скриншотов
Безголовые браузеры могут не предлагать какой-либо графический интерфейс, но они позволяют пользователям делать снимки веб-сайтов, которые они отображают. Это, безусловно, помогает в тех случаях, когда вы выполняете автоматическое тестирование и хотите визуализировать эффекты кода на веб-сайте и сохранять результаты в виде снимков экрана. Создание большого количества скриншотов без какого-либо реального пользовательского интерфейса — это легкая прогулка с использованием безголовых браузеров.
Отображение пути пользователя по веб-сайтам
Компании, которые успешно обеспечивают выдающееся качество обслуживания клиентов, постоянно добиваются большего успеха, чем их конкуренты. Безголовые браузеры позволяют нам запускать программы, отображающие тестовые сценарии взаимодействия с клиентом, чтобы оптимизировать взаимодействие с пользователем на протяжении всего процесса принятия решений на веб-сайте.

Что такое Кукловод

Puppeteer — это библиотека API с протоколом DevTools для управления Chrome или Chromium. Обычно он безголовый, но его можно настроить для работы с Chrome или Chromium в целом (не безголовый). Кроме того, Puppeteer — это библиотека узлов, которую мы можем использовать для мониторинга экземпляра Chrome без головок (UI).

Под капотом мы используем Chrome, но программно это будет JavaScript. Puppeteer — официальный безголовый браузер Chrome от команды Google Chrome. Это может быть не самым эффективным, поскольку он разбивает свежий пример Chrome при его инициализации. Это самый точный способ автоматизировать тестирование Chrome, поскольку он использует реальный навигатор.

Веб-скрапинг с помощью Puppeteer

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

После этого мы реализуем простой вариант использования, когда мы заходим на веб-сайт электронной коммерции, ищем продукт и очищаем все результаты. Все вышеперечисленные задачи будут решаться программно с использованием библиотеки puppeteer. Кроме того, мы будем использовать язык nodeJS для выполнения указанной выше задачи.

Установка кукольника

Начнем с установки. Puppeteer — это библиотека javascript узла, поэтому нам понадобится установленный узел js на нашем компьютере. Node js поставляется с npm (менеджером пакетов узла), который поможет нам установить пакет puppeteer.

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

## Updating the system libraries ##
sudo apt-get update
## Installing node js in the system ##
sudo apt-get install nodejs

Вы можете использовать приведенную ниже команду для установки пакета puppeteer.

npm install —сохранить кукловод
Поскольку у нас уже установлены все зависимости, мы можем приступить к реализации нашего варианта использования парсинга с помощью puppeteer. Мы будем контролировать действия на веб-сайте с помощью нашей программы node JS, работающей на основе пакета puppeteer.

Скрапинг списка продуктов с помощью puppeteer

Шаг 1: Посещение страницы и поиск продукта

В этом разделе мы сначала инициализируем объект puppeteer. Этот объект имеет доступ ко всем служебным функциям, доступным в пакете puppeteer. В этом разделе наша программа посещает веб-сайт, затем ищет панель поиска продукта на веб-сайте. Найдя элементы поиска, он вводит название продукта в строку поиска и загружает результат. Мы дали название продукта программе, используя аргументы командной строки

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch();
const page = await browser.newPage();
var args = process.argv[2]
await page.goto("
await page.click('button.mobile__nav__row--btn-search')
await page.type('input#js-site-search-input', args)
await page.keyboard.press('Enter');
await page.screenshot({path: 'sample.png'})

Шаг 2. Очистка списка элементов

В этом разделе мы очищаем списки продуктов, которые мы получили после поиска нашего продукта. Селекторы HTML использовались для захвата веб-контента. Все вырезанные результаты были сопоставлены вместе, чтобы сделать набор данных. Функция querySelector позволяет нам извлекать контент с веб-страницы с помощью селектора HTML. Функции querySelectorAll получают весь контент, помеченный конкретным селектором, тогда как функция querySelector просто возвращает первый соответствующий элемент.

let urls = await page.evaluate(() = {
let results = [];
let items = document.querySelectorAll('li.product__list--item');
items.forEach((item) = {
          let name = item.querySelector('a.product__list--name').innerText
          let price = item.querySelector('span.pdpPrice').innerText
          let discount = item.querySelector('div.listingDiscnt').innerText
          results.push({
                prod_name:  name,
                prod_price: price,
                prod_discount: discount
           });
      });
return results;
})

Полный код

Вот полный рабочий образец реализации. Мы завернули весь логин в функцию запуска и записываем удаленные результаты в консоль.

const puppeteer = require('puppeteer');
function run () {
    return new Promise(async (resolve, reject) ={
        try {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();
            var args = process.argv[2]
            await page.goto("
            await page.click('button.mobile__nav__row--btn-search')
            await page.type('input#js-site-search-input', args)
            await page.keyboard.press('Enter');
            await page.screenshot({path: 'sample.png'})
            
            let urls = await page.evaluate(() = {
                let results = [];
                let items = document.querySelectorAll('li.product__list--item');
                items.forEach((item) = {
                    let name = item.querySelector('a.product__list--name').innerText
                    let price = item.querySelector('span.pdpPrice').innerText
                    let discount = item.querySelector('div.listingDiscnt').innerText
                    results.push({
                        prod_name:  name,
                        prod_price: price,
                        prod_discount: discount
                    });
                });
                return results;
            })
            browser.close();
            return resolve(urls);
        } catch (e) {
            return reject(e);
        }
    })
}
run().then(console.log).catch(console.error);

Запуск скрипта

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

В этом примере мы ищем iPhone на веб-сайте Croma, а затем удаляем списки продуктов.

узел headlessScrape.js для айфонов

Выход

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

кукла.png