Инструменты разработчика браузеров предоставляют удивительный набор опций для изучения веб-сайтов и веб-приложений. Эти возможности могут быть дополнительно расширены и автоматизированы сторонними инструментами. В этой статье мы рассмотрим Puppeteer , библиотеку на основе узлов для использования с Chrome / Chromium.
Сайт кукловода описывает кукловода как
библиотека узлов, которая предоставляет API высокого уровня для управления Chrome или Chromium по протоколу DevTools. Кукольник по умолчанию работает без головы, но может быть настроен для работы с полным (не головным) Chrome или Chromium.
Puppeteer создан командой Google Chrome, поэтому вы можете быть уверены, что он будет в хорошем состоянии. Это позволяет нам выполнять общие действия в браузере Chromium программным способом через JavaScript, через простой и удобный API.
С Кукольником вы можете:
- скрести сайты
- создавать скриншоты сайтов, включая SVG и Canvas
- создавать PDF-файлы сайтов
- сканировать SPA (одностраничное приложение)
- доступ к веб-страницам и извлечение информации с использованием стандартного API DOM
- генерировать предварительно визуализированный контент — то есть рендеринг на стороне сервера
- автоматизировать отправку формы
- автоматизировать анализ производительности
- автоматизировать тестирование пользовательского интерфейса, как Cypress
- тестирование расширений Chrome
Puppeteer не делает ничего нового, что делают Selenium , PhantomJS (который сейчас устарел) и тому подобное, но он предоставляет простой и легкий в использовании API и предоставляет отличную абстракцию, поэтому нам не нужно беспокоиться о мелочах подробности при работе с ним.
Он также активно поддерживается, поэтому мы получаем все новые возможности ECMAScript, поскольку Chromium его поддерживает.
Предпосылки
Для этого урока вам необходимы базовые знания JavaScript, ES6 + и Node.js.
Вы также должны установить последнюю версию Node.js.
В этом уроке мы будем использовать yarn . Если у вас еще не установлена yarn , установите ее отсюда .
Чтобы убедиться, что мы находимся на одной странице, вот версии, используемые в этом руководстве:
- Узел 12.12.0
- пряжа 1.19.1
- кукловод 2.0.0
Установка
Чтобы использовать Puppeteer в своем проекте, выполните в терминале следующую команду:
$ yarn add puppeteer
Примечание: когда вы устанавливаете Puppeteer, он загружает последнюю версию Chromium (~ 170 МБ macOS, ~ 282 МБ Linux, ~ 280 МБ Win), которая гарантированно будет работать с API. Чтобы пропустить загрузку, см. Переменные среды .
Если вам не нужно загружать Chromium, вы можете установить puppeteer-core :
$ yarn add puppeteer-core
puppeteer-core предназначено для облегченной версии Puppeteer для запуска существующей установки браузера или для подключения к удаленной. Убедитесь, что версия установленного вами ядра puppeteer совместима с браузером, к которому вы хотите подключиться.
Примечание: puppeteer-core публикуется только с версии 1.7.0.
использование
Puppeteer требует как минимум Node v6.4.0, но мы собираемся использовать async / await, который поддерживается только в Node v7.6.0 или более поздней версии, поэтому обязательно обновите Node.js до последней версии, чтобы получить все вкусности ,
Давайте углубимся в некоторые практические примеры, используя Puppeteer. В этом уроке мы будем:
- создание скриншота Unsplash с помощью Puppeteer
- создание PDF-файла Hacker News с помощью Puppeteer
- вход в Facebook с помощью Puppeteer
1. Создать скриншот Unsplash с помощью Puppeteer
Это действительно легко сделать с кукловодом. Создайте файл screenshot.js в корневом каталоге вашего проекта. Затем вставьте следующий код:
const puppeteer = require('puppeteer') const main = async () => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto('https://unsplash.com') await page.screenshot({ path: 'unsplash.png' }) await browser.close() } main()
Во-первых, нам нужен пакет puppeteer . Затем мы вызываем метод launch который инициализирует экземпляр. Этот метод асинхронный, так как он возвращает Promise . Поэтому мы await чтобы получить экземпляр browser .
Затем мы вызываем newPage для него и переходим в Unsplash и делаем его снимок экрана и сохраняем снимок экрана как unsplash.png .
Теперь продолжайте и запустите приведенный выше код в терминале, набрав:
$ node screenshot
Теперь через 5–10 секунд вы увидите файл unsplash.png в вашем проекте, который содержит скриншот Unsplash. Обратите внимание, что область просмотра установлена на 800px x 600px, так как Puppeteer устанавливает это как начальный размер страницы, который определяет размер скриншота. Размер страницы можно настроить с помощью Page.setViewport () .
Давайте изменим область просмотра на 1920px x 1080px. Вставьте следующий код перед методом goto :
await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 1, })
Теперь перейдите и также измените имя файла с unsplash.png на unsplash2.png в методе screenshot следующим образом:
await page.screenshot({ path: 'unsplash2.png' })
Весь файл screenshot.js теперь должен выглядеть так:
const puppeteer = require('puppeteer') const main = async () => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 1, }) await page.goto('https://unsplash.com') await page.screenshot({ path: 'unsplash2.png' }) await browser.close() } main()
2. Создайте PDF-файл Hacker News, используя Puppeteer
Теперь создайте файл с именем pdf.js и вставьте в него следующий код:
const puppeteer = require('puppeteer') const main = async () => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' }) await page.pdf({ path: 'hn.pdf', format: 'A4' }) await browser.close() } main()
Мы изменили только две строки из кода screenshot .
Сначала мы заменили URL-адрес на Hacker News, а затем добавили networkidle2 :
await page.goto('https://news.ycombinator.com', { waitUntil: 'networkidle2' })
networkidle2 пригодится для страниц, которые выполняют длинный опрос или любые другие побочные действия, и считает, что навигация завершена, если не более двух сетевых подключений в течение как минимум 500 мс.
Затем мы вызвали метод pdf для создания PDf, назвали его hn.pdf и отформатировали его в формате A4 :
await page.pdf({ path: 'hn.pdf', format: 'A4' })
Вот и все. Теперь мы можем запустить файл, чтобы сгенерировать PDF-файл Hacker News. Давайте продолжим и запустим следующую команду в терминале:
$ node pdf
Это создаст PDF-файл с именем hn.pdf в корневом каталоге проекта в формате A4.
3. Войдите в Facebook, используя Puppeteer
Создайте новый файл с именем signin.js со следующим кодом:
const puppeteer = require('puppeteer') const SECRET_EMAIL = '[email protected]' const SECRET_PASSWORD = 'secretpass123' const main = async () => { const browser = await puppeteer.launch({ headless: false, }) const page = await browser.newPage() await page.goto('https://facebook.com', { waitUntil: 'networkidle2' }) await page.waitForSelector('#login_form') await page.type('input#email', SECRET_EMAIL) await page.type('input#pass', SECRET_PASSWORD) await page.click('#loginbutton') // await browser.close() } main()
Мы создали две переменные, SECRET_EMAIL и SECRET_PASSWORD , которые должны быть заменены вашим адресом электронной почты и паролем Facebook.
Затем мы launch браузер и устанавливаем режим headless в false чтобы запустить полную версию браузера Chromium.
Затем мы идем в Facebook и ждем, пока все загрузится.
На Facebook есть селектор #login_form , к которому можно получить доступ через DevTools. Этот селектор содержит форму входа в систему, поэтому мы ждем ее с waitForSelector метода waitForSelector .
Затем мы должны ввести наш email и password , поэтому мы берем селекторы input#email и input#pass из DevTools и передаем наши SECRET_EMAIL и SECRET_PASSWORD .
После этого мы нажимаем кнопку #loginbutton чтобы войти в Facebook.
Последняя строка закомментирована, так что мы видим весь процесс ввода адреса email и password и нажатия кнопки входа в систему.
Запустите код, набрав в терминале следующее:
$ node signin
Это запустит весь браузер Chromium, а затем войдет в Facebook.
Вывод
В этом уроке мы создали проект, который создает скриншот любой страницы в указанном окне просмотра. Мы также создали проект, в котором мы можем создать PDF любого веб-сайта. Затем нам программно удалось войти в Facebook.
Puppeteer недавно выпустил версию 2, и это хорошая программа для автоматизации тривиальных задач с помощью простого и удобного API.
Вы можете узнать больше о Puppeteer на его официальном сайте . Документы очень хорошие, с множеством примеров, и все хорошо документировано.
Теперь продолжайте и автоматизируйте скучные задачи в вашей повседневной жизни с Puppeteer.