TL;DR

Все примеры кода из этой статьи вы можете найти в репозитории GitHub https://github.com/AndrejsAbrickis/axios-cheerio-puppeteer

Axios и cheerio - отличный набор инструментов для извлечения и очистки содержимого статической веб-страницы. Но в настоящее время, когда многие веб-сайты построены как одностраничные приложения и динамически отображаются на клиенте, может оказаться невозможным получить контент.

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

Давайте быстро посмотрим на исходный HTML-код SPA-приложения и на полученный результат.

На скриншоте выше слева вы можете увидеть полностью отрисованную таблицу турнирной таблицы. Но посмотрите на источник, который загрузил браузер, и все, что мы можем заметить, - это один <div id="#app"></div>, пара файлов JavaScript и НИКАКОГО содержимого. Итак, давайте попробуем получить HTML-содержимое тела.

Начните с axios + cheerio

Axios - это HTTP-клиент на основе Promise для браузера и node.js. Поскольку это HTTP-клиент, мы можем использовать его для выборки конечной точки HTTP и получения ответа с телом. Мы можем использовать HTTP-клиент для получения не только конечной точки HTML, но также JSON, изображений и т. Д. И, следовательно, мы несем ответственность за обработку ответа в виде простого текста.

Вот где на помощь приходит чирио. Cheerio - это Быстрая, гибкая и экономичная реализация ядра jQuery, разработанная специально для сервера. По сути, он загружает и анализирует разметку HTML как обычный текст и возвращает модель DOM, к которой мы затем можем получить доступ и пройти в стиле jQuery.

И потому, что Cheerio не интерпретирует разметку, как браузер. Он не применяет стили CSS и не запускает JavaScript, а динамически отображаемый контент не будет добавлен в DOM.

В качестве примера попробуем получить содержимое тега body с помощью axios и cheerio. В следующей сущности вы можете видеть, что мы запускаем запрос GET (L6), затем анализируем данные ответа в DOM с помощью cheerio (L7) и, наконец, ищем элемент <body> (L9) для вывода его HTML-содержимого.

При выполнении этого скрипта узла мы получаем элемент-заполнитель веб-приложения <div id="app"> без динамически отображаемого содержимого.

Из-за того, что мы получили по сети простой текст, а сценарии JavaScripts, включенные в HTML, не были выполнены, и здесь на помощь приходит безголовый браузер.

Перейти на кукловод и безголовый Chrome

Вкратце объясню, что такое безголовый браузер. В двух словах, безголовый означает, что это браузер без графического пользовательского интерфейса (GUI), которым можно управлять программно. В основном это полезно для тестирования E2E, поскольку оно применяет все стили и запускает JavaScript для создания DOM. И поэтому это идеальный инструмент для очистки одностраничных приложений.

И, как я уже упоминал, это контролируется программно. И по этой причине мы можем использовать кукольник для управления браузером по протоколу DevTools. Давайте посмотрим, как получить динамически отображаемый HTML.

В приведенном выше примере мы используем пакет pf puppeteer с одиночной зависимостью. Сначала мы инициализируем экземпляр браузера (L5) и создаем новую страницу браузера (L6). После этого мы инструктируем страницу браузера посетить URL-адрес (L7) и дождаться появления элемента на странице (L8), прежде чем продолжить. Обратите внимание, что можно установить тайм-аут в миллисекундах, как долго браузер должен ждать элемент.

После ожидания элемента мы используем метод оценки страницы для выполнения JavaScript в контексте веб-страницы (L10 - L12). Это позволяет нам получить доступ к HTML-документу с помощью стандартного DOM API. Отсюда мы возвращаем HTML-код элемента body и вывода. И, наконец, мы закрываем браузер, что убивает безголовый процесс Chrome.

И теперь результат выполнения этого скрипта включает содержимое динамически отображаемого HTML.

Заключение

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

Я надеюсь, что эта статья поможет вам начать использовать упомянутые инструменты, поскольку их можно использовать не только для очистки веб-сайтов, но и для тестирования ваших веб-приложений (E2E или тесты моментальных снимков) или создания снимков экрана.

Если вы нашли этот пост полезным и хотели бы узнать больше о случайных темах веб-разработки, просто похлопайте по этой статье или оставьте здесь комментарий. И, как всегда, вы можете найти меня в Twitter @ andrejsabrickis

Эта статья, содержание и мнения, высказанные на Medium, принадлежат мне. Но поскольку я работаю на одной из ведущих торговых площадок P2P-кредитования Mintos.com, я хотел бы использовать эту последнюю строчку для продвижения того, что мы нанимаем. Включая команду Growth Engineering, я на данный момент возглавляю.

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

Ваше здоровье!