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

В последнее время появилось множество безголовых браузеров, основанных на 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 Headless Browser Testing с инструментами разработчика

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

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

Ссылка на основную публикацию
Adblock
detector