Puppeteer: библиотека Node.js для управления безголовым Chrome

Содержание

1 Что такое кукловод
2 Установка кукловода
3 Требования
4 Запуск сценария с Кукольником
5 Использование инструментов разработчика
6 Содействие кукловоду

В последнее время появилось множество безголовых браузеров, основанных на Chromium, таких как Chromeless, Chrominator, Navalia, Lambdium и других, что затрудняло выбор платформы тестирования браузера. Вот почему сегодня мы хотим поделиться с вами одним из самых классных фреймворков для тестирования браузеров на Node.js. Мы говорим о Puppeteer, проекте, возглавляемом командой разработчиков инструментов Google Chrome.

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

По сути, Puppeteer — это библиотека Node, которая предоставляет высокоуровневый API для управления автономным Chrome по протоколу DevTools. Он также может быть настроен на использование полного Chrome. Большинство вещей, которые вы можете сделать вручную в браузере, можно сделать с помощью Puppeteer и его API, например:

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

Установка кукловода

Когда вы устанавливаете Puppeteer с помощью диспетчера пакетов, такого как NPM или Yarn, он загружает последнюю версию Chromium (которая весит около 71 МБ на Mac, ~ 90 МБ на Linux, ~ 110 МБ на Windows), которая гарантированно работает с API. Это означает, что в отличие от других платформ тестирования браузеров, вы не будете беспокоиться о том, чтобы поддерживать свой собственный экземпляр chrome / chromium и запускать сервер без монитора с помощью командной строки.

Как уже упоминалось, вы можете установить Puppeteer с помощью NPM или Yarn с Node.js. Просто запустите любую из следующих команд в терминале:

REM If you use NPM:
npm i puppeteer
REM Or with yarn
yarn add puppeteer

После установки вы сможете управлять безголовым браузером, требуя наличия модуля puppeteer в каком-либо файле JS. Для получения дополнительной информации о библиотеке и ее исходном коде, не забудьте посетите официальный репозиторий на Github здесь.

Требования

Изначально Puppeteer требовал для работы Node.js 7.x, так как он использует ключевое слово await в исходном коде, что облегчает чтение и понимание асинхронного кода. Однако для обеспечения обратной совместимости со старой версией Node.js (и LTS), кукловод теперь может использоваться с версией Node.js 6.x (так как версия v0.10.0), это означает, что вы можете использовать его с установленной версией LTS узла:

REM Needs to output at least version 6
node -v

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

Запуск сценария с Кукольником

Чтобы выполнить некоторые задачи с кукловодом, вам нужны только базовые знания Node.js. Установите модуль кукловода в своем проекте, создайте файл сценария, а именно script.js и написать код, который использует кукловода внутри, в этом случае мы собираемся создать скриншот нашего мира кода со следующим кодом (скопируйте и вставьте код внутри script.js файл):

// Require puppeteer
const puppeteer = require('puppeteer');
(async () => {
// Create an instance of the chrome browser
const browser = await puppeteer.launch();
// Create a new page
const page = await browser.newPage();
// Set some dimensions to the screen
page.setViewport({
width: 1920,
height: 1080
});
// Navigate to Our Code World
await page.goto('http://site.com');
// Create a screenshot of Our Code World website
await page.screenshot({
path: 'screenshot.png'
});
// Close Browser
browser.close();
})();

Наконец, просто запустите скрипт с Node, используя:

node script.js

И вам нужно только подождать, пока задача не закончится, тогда вы найдете скриншот нашего мира кода в том же каталоге script.js файл.

Использование инструментов разработчика

Самое удивительное в Puppeteer — это возможность использовать Chrome Developer Tools, так как вы используете Chrome под капотом! Только не забудьте отключить режим безголового браузера в вашем скрипте инициализации:

// Require puppeteer
const puppeteer = require('puppeteer');
(async () => {
// Create an instance of the chrome browser
// But disable headless mode !
const browser = await puppeteer.launch({
headless: false
});
// Create a new page
const page = await browser.newPage();
// Set some dimensions to the screen
page.setViewport({
width: 1920,
height: 1080
});
// Navigate to Our Code World
await page.goto('http://site.com');
// Create a screenshot of Our Code World website
await page.screenshot({
path: 'screenshot.png'
});
// Don't close via script but manually
// closing the chromium window !
// browser.close();
})();

Сценарий запустит процесс Chromium, и вы сможете использовать инструменты разработчика, как обычно, просто здорово?

Содействие кукловоду

Puppeteer — это проект с открытым исходным кодом, поэтому вопросы, связанные с отчетами, вкладом кода приветствуются в официальный репозиторий Github. Команда Chrome DevTools поддерживает библиотеку, однако, если вы можете помочь, вы можете это сделать, поэтому не забудьте взглянуть на руководство по вкладу проекта здесь.