Как пользоваться Puppeteer: установка и быстрый старт

1.1 Что такое Puppeteer и для чего используется

Puppeteer – это библиотека JavaScript, которая предоставляет высокоуровневый API для управления Chrome или Firefox через DevTools Protocol или WebDriver BiDi. По умолчанию Puppeteer работает в headless (без видимого пользовательского интерфейса).

Это официальное описание, которое не так-то просто понять. С практической точки зрения Puppeteer даёт возможность программировать взаимодействие с веб-страницами так, как будто бы они открываются обычным браузером, но все действия описываются скриптами JavaScript и позволяют работать в с веб-сайтами исключительно из консоли, без открытия окна веб-браузера. При этом с помощью JavaScript кода вы можете программировать самые разные действия: извлечение текста или определённых тегов, нажимать на кнопки, вводить данные в текстовые поля, выполнять аутентификацию на сайтах (как будто бы вы ввели логин и пароль, а затем нажали кнопку «Войти»); вы можете получать и устанавливать кукиз, менять разрешение окна веб-браузера, менять строку User Agent и множество других настроек; вы также можете выполнять произвольный JavaScript код на странице и выводить полученный результат в консоль или сохранять его в файл.

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

Puppeteer — это безголовые веб-браузеры Chrome и Firefox с полным функционалом полноценных веб-браузеров. То есть Puppeteer это не «как бы веб-браузер», это полноценный веб-браузер который обладает всеми характеристиками Chrome и Firefox, но работает без открытия графического окна.

Мы начнём с тривиальных примеров, постепенно переходя к более сложным и более практичным случаем использования Puppeteer. У этой инструкции будет несколько частей.

1.2 Как установить Puppeteer

1.2.1 Установка Puppeteer в Debian, Ubuntu, Linux Mint, Kali Linux и производные от них дистрибутивы

Начните с установки менеджера пакетов JavaScript — npm:

sudo apt install npm

Затем выполните следующую команду:

npm i puppeteer

1.2.2 Установка Puppeteer в Arch Linux Manjaro, BlackArch и производные от них дистрибутивы

Начните с установки менеджера пакетов JavaScript — npm:

sudo pacman -S npm

Затем выполните следующую команду:

npm i puppeteer

1.2.3 Как обновить Puppeteer

Для обновления Puppeteer в любом дистрибутиве выполните следующую команду:

npm update

1.3 Как запустить Puppeteer

Фрагменты кода, которые показаны далее в этой инструкции, нужно сохранять в файл с расширением .js и запускать их с помощью node.

Я начну с того, что создам папку для тестов и перейду в неё — вы можете выбрать любое другое имя папки или работать прямо в домашней — это всё на ваш выбор:

mkdir -p /home/mial/bin/tests/puppeteer
cd /home/mial/bin/tests/puppeteer

Имя файла с расширением .js можно выбрать любое — в инструкциях и примерах обычно используют имя index.js, но можно выбрать какое угодно другое. Мы не будем создавать новый проект с помощью следующей команды, как вы можете увидеть это в некоторых других инструкциях:

npm init

Для наших целей это необязательно.

При запуске файла можно указывать расширение или пропускать его — следующие две команды идентичны:

node index.js
node index

1.4 Как сделать скриншот страницы с помощью Puppeteer

Puppeteer позволяет получать HTML код, а также любой DOM элемент — всё это мы будем делать позже. Но начнём мы с наглядного примера — получения скриншота веб-страницы. Это позволит вам понять, насколько возможности Puppeteer близки к обычном веб-браузерам.

Создайте директорию screenshots — в неё будут сохраняться скриншоты:

mkdir screenshots

Теперь создайте файл screenshots.js и скопируйте в него следующее содержимое:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
  
	await page.goto('https://w-e-b.site/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4.png' });
  
	browser.close();
}

run();

Запустите файл следующим образом:

node screenshots.js

После завершения работы скрипта в директории screenshots появится скриншот.

Уверен, вы без труда разберётесь, как в коде выше поменять URL адрес и имя файла — вы можете поэсперементировать с различными веб-сайтами.

1.5 Как в Puppeteer изменить размер окна веб-браузера

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

Создайте файл screenshots-viewport.js и скопируйте в него следующее содержимое:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
  
	//await page.setViewport({width: 3440, height: 1440});
	await page.setViewport({width: 1440, height: 3440});
	await page.goto('https://w-e-b.site/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-big.png' });
  
	browser.close();
}

run();

Запустите файл следующим образом:

node screenshots-viewport

Опять же, я уверен, что вы уже сами догадались, что ширину и высоту в предыдущем фрагменте кода можно установить с помощью значений width и height. Вы можете менять их произвольно — поэксперементируйте с этим.

Документация:

1.6 Как в Puppeteer сделать скриншот всей страницы

Выше показано, как изменить размер окна веб-браузера и, соответственно, захватываемой области страницы при создании скриншота. Но вам необязательно менять размер окна экрана веб-браузера для каждого сайта — имеется опция, которая позволяет сделать скриншот всей страницы незаменимо от размера этой веб-страницы, а также независимо от выбранного размера окна веб-браузера.

Создайте файл screenshot-fullpage.js и скопируйте в него следующий код:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
  
	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-full.png', fullPage: true });
  
	browser.close();
}

run();

Обратите внимание, что добавлена опция:

fullPage: true

Запустите файл следующим образом:

node screenshot-fullpage

Вы получите скриншот всей страницы независимо от её длины, высоты, ширины и прочих параметров.

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

В следующем примере мы устанавливаем окно браузера шире, чем в настройках по умолчанию, благодаря этому, сайт на скриншоте выглядит иначе:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 2560, height: 1440 });

	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-full-wide.png', fullPage: true });

	browser.close();
}

run();

1.7 Как в Puppeteer сохранить скриншот в формате JPG

Чтобы сохранить скриншот файла в формате JPG, а не PNG, как показано выше, просто измените расширение файла в свойствах «page.screenshot()»:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
  
	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-full.jpg', fullPage: true });
  
	browser.close();
}

run();

При желании вы можете выбрать качество изображений для формата JPG (формат PNG не поддерживает настройку качества, поскольку в отличии от JPG является lossless форматом, то есть хранит изображения без потерь качества).

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 2560, height: 1440 });

	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-high-quality.jpg', quality: 100, fullPage: true });

	browser.close();
}

run();

Качество изображения устанавливается с помощью настройки «quality». Её максимальное значение равно 100 (означает максимальное качество и максимальный размер файла). Минимальное значение — 0.

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 2560, height: 1440 });

	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-low-quality.jpg', quality: 10, fullPage: true });

	browser.close();
}

run();

1.8 Как в Puppeteer сохранить веб-страницу в PDF

Вы можете сохранить страницу веб-сайта в формат PDF. При этом страница будет сохранена полностью — независимо от ширины и высоты. Также PDF файл будет иметь текстовый слой — в нём можно выделять и копировать текст, а также кликать по ссылкам (они будут открываться в веб-браузере по умолчанию).

Создайте файл pdf.js и скопируйте в него следующий код:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
  
	await page.goto('https://suip.biz/?act=client-tls-fingerprinting', {
		waitUntil: 'networkidle2',
	});
	await page.pdf({
		path: 'ja4.pdf',
		format: 'letter',
	});
  
	browser.close();
}

run();

Запустите файл следующим образом:

node pdf

Обратите внимание на настройку «format» - вы можете выбрать другое значение. Список доступных значений вы можете посмотреть здесь: https://pptr.dev/api/puppeteer.paperformat

Документация:

1.9 Как поменять User Agent в Puppeteer

Думаю, вы обратили внимание, что на скриншотах выше в качестве User Agent была получена следующая строка:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/131.0.0.0 Safari/537.36

Нас с головой выдаёт строка «HeadlessChrome» - то есть сервер знает, что мы используем Puppeteer.

Вы можете поменять User Agent в Puppeteer на любое значение. Я бы рекомендовал вместо того, чтобы гуглить примеры User Agent, просто взять реальную строку User Agent для вашего веб-браузера. Чтобы узнать свой User Agent, перейдите на следующую страницу: https://suip.biz/ru/?act=my-user-agent

К примеру, я получил следующую строку для актуальной версии Chrome на Windows:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Теперь создайте файл user-agent.js со следующим содержимым:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	const customUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36';
  
	await page.setViewport({width: 1440, height: 3440});
	await page.setUserAgent(customUserAgent);
	await page.goto('https://w-e-b.site/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ua-spoofed.png' });
  
	browser.close();
}

run();

Запустите файл следующим образом:

node user-agent

Теперь User Agent не вызывает подозрений:

Документация:

https://pptr.dev/api/puppeteer.browser.useragent

1.10 Как в Puppeteer эмулировать телефоны и другие мобильные устройства

Метод Page.emulate() является сокращённой записью для вызова двух методов: Page.setUserAgent() и Page.setViewport().

То есть, этим способом будут установлена строка User Agent и размер экрана, характерные для выбранного устройства. Список устройств, из которых вы можете выбрать, находится по этой ссылке: https://pptr.dev/api/puppeteer.knowndevices

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

Создайте файл iphone.js со следующим содержимым:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	
	await page.emulate(puppeteer.KnownDevices['iPhone 15 Pro']);
	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/iphone.png', fullPage: true });
  
	browser.close();
}

run();

И запустите его следующим образом:

node iphone

Вот так видят страницу пользователи iPhone 15 Pro:

Документация:

Примечание: на момент написания, оба примера в официальной документации не рабочие! А в этой инструкции дан рабочий пример.

1.11 Как в Puppeteer сделать скриншот в формате WEBP (Web/P image). Какие форматы скриншотов поддерживает Puppeteer

Puppeteer поддерживает три формата скриншотов:

png
jpeg
webp

Тип скриншота вы можете как указать с помощью расширения файла, так и с помощью настройки «type». Файлы в формате WEBP поддерживают настройку «quality».

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 2560, height: 1440 });

	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	await page.screenshot({ path: 'screenshots/ja4-high-quality.webp', quality: 100, type: 'webp', fullPage: true });

	browser.close();
}

run();

Документация:

https://pptr.dev/api/puppeteer.screenshotoptions/

1.12 Как в Puppeteer сделать скриншот части экрана

С помощью метода захвата скриншота Puppeteer вы можете указать определённую область с помощью координат. Вы должны определить координаты области, которую вы хотите захватить, которые основаны на положении пикселя от верхнего левого угла страницы. Вам понадобятся четыре значения:

x: Горизонтальная координата
y: Вертикальная координата
width: Насколько широкой должна быть область
height: Насколько высокой должна быть область

После того, как вы определили эти координаты, вы можете определить область отсечения для снимка экрана. Замените значения ниже на те, которые вы определили.

Определив область отсечения, вы теперь можете передать этот объект методу screen() для захвата только указанной области.

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 2560, height: 1440 });

	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	const clip = {
		x: 850,
		y: 1400,
		width: 900,
		height: 700
	};
	await page.screenshot({ path: 'screenshots/ja4-clip.png', clip: clip });

	browser.close();
}

run();

1.13 Как в Puppeteer сделать скриншот определённого элемента (по ID, по имени класса, по имени тега)

Этот вопрос уже относится к взаимодействию с DOM (HTML) веб-страницы, а также к использованию селекторов — всё это мы будем рассматривать, но позже. Пока же я просто хотел продемонстрировать гибкость и возможности Puppeteer. Например, следующий код захватит только значимые для меня данные с веб-страницы:

const puppeteer = require('puppeteer');

async function run() {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 2560, height: 1440 });

	await page.goto('https://suip.biz/?act=client-tls-fingerprinting');
	
	const element = await page.$$('pre');
	await element[1].screenshot({ path: 'screenshots/element.png' });

	browser.close();
}

run();

В предыдущем примере в качестве селектора я использовал имя тега «pre» и, поскольку таких тегов на странице два, я явно указал, что меня интересует второй тег (нумерация начинается с 0):

const element = await page.$$('pre');
await element[1].screenshot({ path: 'screenshots/element.png' });

Также можно делать скриншоты элементов по имени класса или по уникальному id:

const element = await page.$('#unique-element-id');
await element.screenshot({ path: 'element.png' });

Смотрите продолжение в следующей части: Работа с DOM в Puppeteer: как получить HTML код и извлечь различные теги (текст, картинки, ссылки)

HackWare.ru

Этичный хакинг и тестирование на проникновение, информационная безопасность

Как пользоваться Puppeteer: установка и быстрый старт

Оглавление

1.1 Что такое Puppeteer и для чего используется

1.2 Как установить Puppeteer

1.2.1 Установка Puppeteer в Debian, Ubuntu, Linux Mint, Kali Linux и производные от них дистрибутивы

1.2.2 Установка Puppeteer в Arch Linux Manjaro, BlackArch и производные от них дистрибутивы

1.2.3 Как обновить Puppeteer

1.3 Как запустить Puppeteer

1.4 Как сделать скриншот страницы с помощью Puppeteer

1.5 Как в Puppeteer изменить размер окна веб-браузера

1.6 Как в Puppeteer сделать скриншот всей страницы

1.7 Как в Puppeteer сохранить скриншот в формате JPG

1.8 Как в Puppeteer сохранить веб-страницу в PDF

1.9 Как поменять User Agent в Puppeteer

1.10 Как в Puppeteer эмулировать телефоны и другие мобильные устройства

1.11 Как в Puppeteer сделать скриншот в формате WEBP (Web/P image). Какие форматы скриншотов поддерживает Puppeteer

1.12 Как в Puppeteer сделать скриншот части экрана

1.13 Как в Puppeteer сделать скриншот определённого элемента (по ID, по имени класса, по имени тега)

Связанные статьи:

Рекомендуется Вам:

Добавить комментарий Отменить ответ