За последнее десятилетие веб-разработка продвинулась огромными темпами, появилось множество фреймворков как для серверной, так и для внешней разработки. Веб-сайты стали умнее, а вместе с ними и базовые фреймворки, используемые при их разработке. Все эти достижения в веб-разработке привели к развитию и самих браузеров. Большинство браузеров теперь доступны в «безголовой» версии, в которой пользователь может взаимодействовать с веб-сайтом без какого-либо пользовательского интерфейса. Вы также можете парсить веб-сайты в этих безголовых браузерах, используя такие пакеты, как puppeteer и nodeJS.
Веб-разработка в значительной степени зависит от механизмов тестирования для проверки качества, прежде чем мы запустим их в производственную среду. Сложный веб-сайт потребует сложной структуры наборов тестов, прежде чем мы развернем его где-либо. Безголовые браузеры значительно сокращают время тестирования, связанное с веб-разработкой, так как нет дополнительных затрат на какой-либо пользовательский интерфейс. Эти браузеры позволяют нам просматривать больше веб-страниц за меньшее время.
В этом блоге мы научимся парсить веб-сайты в этих безголовых браузерах с помощью nodeJS и асинхронного программирования. Прежде чем мы начнем парсить веб-сайты, давайте немного подробнее узнаем о безголовых браузерах. Кроме того, если вас беспокоит законность парсинга, вы можете развеять свои мифы о парсинге.
Что такое безголовый браузер
Безголовые браузеры более гибкие, быстрые и оптимизированы для выполнения таких задач, как автоматизированное веб-тестирование. Поскольку пользовательский интерфейс не требует накладных расходов, безголовые браузеры подходят для автоматического стресс-тестирования и веб-скрейпинга, поскольку эти задачи выполняются быстрее. Хотя такие поставщики, как PhantomJS и HtmlUnit, давно существуют на рынке, предлагая возможности безголового браузера, браузерные игроки, такие как chrome и firefox, теперь также предлагают «безголовые» версии своих браузеров. Следовательно, нет необходимости устанавливать дополнительный браузер для безголовых возможностей.
Необходимость безголового браузера
С развитием фреймворков веб-разработки браузеры стали умнее и стали загружать все библиотеки javascript. Со всей эволюцией технологий веб-разработки тестирование веб-сайтов претерпело изменения и стало одним из основных элементов индустрии веб-разработки. Эволюция безголовых браузеров позволяет нам выполнять следующие приложения
- Сквозное тестирование — это методология, используемая для проверки того, работает ли поток приложения так, как задумано, от начала до конца. Целью проведения сквозных тестов является выявление системных зависимостей и обеспечение передачи правильной информации между различными системными компонентами и системами. Автоматизация тестирования веб-приложений Безголовые браузеры были разработаны для этого варианта использования, поскольку они позволяют ускорить веб-тестирование с помощью интерфейса командной строки.
- Безголовые браузеры обеспечивают более быстрый просмотр веб-сайтов, поскольку им не приходится иметь дело с накладными расходами, связанными с открытием какого-либо пользовательского интерфейса. С помощью безголовых браузеров можно просто автоматизировать механизм очистки и извлекать данные гораздо более оптимизированным способом.
- Безголовые браузеры могут не предлагать никаких графических интерфейсов, но они позволяют пользователям делать снимки веб-сайтов, которые они отображают. Это, безусловно, помогает в тех случаях, когда вы выполняете автоматическое тестирование и хотите визуализировать эффекты кода на веб-сайте и сохранять результаты в виде снимков экрана. Создание большого количества скриншотов без какого-либо пользовательского интерфейса — это легкая прогулка с использованием безголовых браузеров.
- Компании, которые успешно обеспечивают выдающееся качество обслуживания клиентов, постоянно добиваются большего успеха, чем их конкуренты. Сопоставление пути пользователя по веб-сайтам
Безголовые браузеры позволяют нам запускать программы, сопоставляющие тестовые сценарии пути клиента, чтобы оптимизировать взаимодействие с пользователем на протяжении всего процесса принятия решений на веб-сайте. .
Что такое Кукловод
Puppeteer — это библиотека API с протоколом DevTools для управления Chrome или Chromium. Обычно он безголовый, но его можно настроить для работы с Chrome или Chromium в целом (не безголовый). Кроме того, Puppeteer — это библиотека узлов, которую мы можем использовать для мониторинга экземпляра Chrome без головок (UI).
Веб-скрапинг с помощью Puppeteer
В этой статье мы будем использовать puppeteer для очистки списка товаров с веб-сайта. Puppeteer будет использовать безголовый браузер Chrome, чтобы открыть веб-страницу и запросить все результаты. Прежде чем мы начнем реализовывать puppeteer для просмотра веб-страниц, мы рассмотрим его настройку и установку.
После этого мы реализуем простой вариант использования, когда мы перейдем на веб-сайт электронной коммерции, найдем продукт и соберем все результаты. Все вышеперечисленные задачи будут решаться программно с помощью библиотеки puppeteer. Кроме того, мы будем использовать язык nodeJS для выполнения указанной выше задачи.
Установка кукольника
Следующий фрагмент кода поможет вам в установке узла js.
## Updating the system libraries ## sudo apt-get update ## Installing node js in the system ## sudo apt-get install nodejs
Вы можете использовать приведенную ниже команду для установки пакета puppeteer.
npm install --save puppeteer
Поскольку все зависимости уже установлены, мы можем приступить к реализации нашего варианта использования парсинга с помощью puppeteer. Мы будем контролировать действия на веб-сайте с помощью нашей программы Node JS на базе пакета puppeteer.
Скрапинг списка продуктов с помощью puppeteer
Шаг 1. Посещение страницы и поиск продукта
const puppeteer = require('puppeteer');const browser = await puppeteer.launch(); const page = await browser.newPage(); var args = process.argv[2] await page.goto("https://www.croma.com/"); 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("https://www.croma.com/"); 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);
Вы можете использовать приведенную ниже команду для запуска приведенного выше скрипта puppeteer в безголовом браузере. Мы будем использовать nodejs для запуска нашего кода. Вам просто нужно указать узел ключевого слова и имя файла, за которым следует название продукта, данные которого вам нужны для поиска на данном веб-сайте и очистки результатов.
В этом примере мы ищем iPhone на веб-сайте Croma, а затем удаляем списки продуктов.
node headlessScrape.js iphones
Вывод
Вывод приведенного выше кода можно визуализировать следующим образом.
Списки товаров после очистки через автономный браузер
Вы должны присоединиться к сторонникам использования очистки данных в своих операциях, пока не стало слишком поздно. Это поможет вам повысить эффективность вашей организации. Кроме того, это поможет вам получить информацию, о которой вы, возможно, еще не знаете. Это обеспечит обоснованное принятие решений в ваших бизнес-процессах.
Мы научились собирать данные из безголового браузера с помощью пакета puppeteer в nodeJS. Мы также выполнили некоторые задачи по автоматизации, чтобы автоматизировать несколько действий на веб-сайте, прежде чем окончательно удалить содержимое. Безголовые браузеры все еще находятся в зачаточном состоянии, но уже обещают многообещающие возможности для автоматизированного веб-скрапинга и веб-тестирования. Более быстрый просмотр веб-страниц через безголовые браузеры поможет вам получить конкурентное преимущество перед другими игроками на рынке с точки зрения стоимости сервера.
