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

Puppeteer - официальный инструмент для Chrome Headless от команды Google Chrome. Это библиотека node.js, которая предоставляет высокоуровневый API для управления Chromium или Chrome по протоколу DevTools. способ запускать браузеры Chrome без запуска Chrome.

Чего можно достичь с помощью кукловода?

Практически все, на что способен Chrome или Chromium.

  • Создавайте скриншоты и PDF-файлы страниц.
  • Сканируйте SPA (одностраничное приложение) и генерируйте предварительно обработанный контент (т. Е. «SSR» (рендеринг на стороне сервера)).
  • Автоматизируйте отправку форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. Д.
  • Создайте современную автоматизированную среду тестирования. Запускайте тесты прямо в последней версии Chrome, используя новейшие функции JavaScript и браузера.
  • Захватите временную шкалу вашего сайта, чтобы помочь диагностировать проблемы с производительностью.
  • Протестируйте расширения Chrome.

ЦЕЛИ

В этом руководстве мы исследуем силу кукловода. Мы будем использовать кукольник, чтобы очистить твиттер, сделать снимок экрана веб-страницы, преобразовать веб-страницу в pdf. Этот пост даст вам хорошее представление о том, как его использовать и как настроить, если вы решите использовать его в своем следующем проекте. Также следите за обновлениями документации, потому что Puppeteer находится в стадии разработки, а API-интерфейсы подвержены изменениям. Вот сопроводительная ссылка на код на GitHub.

ОБЯЗАТЕЛЬНО

  1. Node.js: это серверная платформа, основанная на движке JavaScript Google Chrome (движок V8).
  2. Кукольник

После того, как мы его установили, мы создаем новый проект nodejs и устанавливаем puppeteer.

npm i --save puppeteer

После установки кукольника. Нам определенно потребуется кукловод в нашем приложении.

const puppeteer = require('puppeteer');

КОД

Создание снимков экрана

Приведенный выше код получает веб-адрес, который пользователь захочет использовать, из запроса к серверу. Если ничего не указано, по умолчанию используется medium.com. Строки 6–11 делают следующее:

  • Запускаем кукольник.
  • Откройте новую страницу.
  • Откройте указанный веб-адрес.
  • Получает снимок веб-страницы и сохраняет изображение в папке с ресурсами.
  • Близкий кукольник.

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

await page.screenshot({ path: `./assets/snapshot.png` });

и другие виды использования

await page.pdf({ path: `./assets/news.pdf`, format: 'A4' });

как определено ниже.

Преобразование веб-страницы в PDF

Чтобы узнать, как настроить задание cron, которое каждый день отправляет pdf (веб-страницу, преобразованную в pdf) с помощью puppeteer и nodemailer, отметьте здесь и здесь. Если у вас есть вопросы по этому поводу, не стесняйтесь задавать их в разделе комментариев.

Очистка твиттера

Переход к приведенному выше коду:

  • Получает поисковый запрос из запроса, отправленного на наш сервер.
  • Запускаем кукольник.
  • Откройте новую страницу.
  • Откройте указанный веб-адрес.
  • Установите порт просмотра страницы.
  • Строка 17-59 содержит информацию в элементах DOM твита.
  • Отправьте ответ пользователю.

Если вы хотите получить популярный твит по определенной теме, просто нажмите на конечную точку ниже и замените osibanjo тем, что вы хотите найти.

Ударьте по конечной точке ниже:

https://puppeteer-demo1.herokuapp.com/scrape-twitter?search=osibanjo

На этом все. Вы можете найти полный исходный код на Github. Комментарии и отзывы приветствуются.

И если вы 👏👏👏, я могу даже сделать пошаговое видео-руководство и написать, как вы можете настроить задание cron, которое продолжает отправлять веб-страницу pdf с ежедневными новостями с ycombinator на вашу почту. 😉

Обо мне: я внештатный разработчик Javascript, жонглирую между контрактной работой, открытым исходным кодом, сторонними проектами и ведением блога. Подпишись на меня в Твиттере" .

Справочные ссылки:

Эта история публикуется в Noteworthy, куда ежедневно приходят более 10 000 читателей, чтобы узнать о людях и идеях, формирующих наши любимые продукты.

Подпишитесь на нашу публикацию, чтобы увидеть больше историй о продуктах и ​​дизайне, представленных командой Journal.