Делаем скриншоты страниц в безголовом браузере

Безголовый(от английского Headless) – это браузер, в котором отсутствует графический пользовательский интерфейс. Фактически, это метод навигации в интернете при помощи командной строки.

Делаем скриншоты страниц в безголовом браузере

Стандартный и безголовый браузеры

Безголовые браузеры полезны для тестирования веб-сайтов. Они могут переходить на страницу и выполнять действия без необходимости вручную открывать браузер и нажимать на кнопки. Ещё одно применение безголовых браузеров – динамическое создание скриншотов веб-страниц.

Чего я пытаюсь добиться?

Пару лет назад я написала код для встраивания данных с caniuse для любого конкретного свойства. Посмотрите пример того, как это выглядит.

Но для выведения данных требовался JavaScript. Если Javascript отключен в браузере или если сеть работает слишком медленно, вот что мы получаем:

Делаем скриншоты страниц в безголовом браузере

Так как до тех пор, пока скрипт не сгенерирует iframe, программный код для встраивания будет выглядеть так:

<p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1,past_2" data-accessible-colours="false"> <a href="http://caniuse.com/#feat=css-grid">Могу ли я использовать CSS-Grid?</a> </p>

Я пришла к выводу, что лучшим решением будет программное создание скриншота страницы со встраиванием. Это можно сделать, используя безголовый браузер, а потом добавить скриншот в запасной(fallback) программный код.

Для этого надо выполнить следующие действия:

  1. Сделать скриншот страницы для встраивания.
  2. Создать API для обработки картинок и загрузить изображение в Cloudinary.
  3. Обновить запасной код, чтобы он содержал скриншот.

В данной статье я расскажу об использовании безголового браузера для получения скриншота страницы.

Безголовый Chrome

Начиная с версии 59, безголовый Chrome доступен при помощи команды chrome. Чтобы приобрести DOM-содержимое страницы, используется флаг — dump-dom.

chrome --headless --disable-gpu --dump-dom https://bitsofco.de

Чтобы сделать скриншот, используем вместо него флаг — screenshot.

chrome --headless --disable-gpu --screenshot https://bitsofco.de

Puppeteer – безголовый Chrome на node-интерфейсе API

Puppeteer может использовать безголовый Chrome почти везде. Чтобы сделать скриншот при помощи Puppeteer, необходимо:

  1. Запустить браузер.
  2. Открыть новую страницу.
  3. Перейти к выбранному URL-адресу.
  4. Сделать скриншот.
const puppeteer = require('puppeteer');(async() => { // 1. 1.Запустите браузер const browser = await puppeteer.launch(); // 2. 1.Откройте новую страницу const page = await browser.newPage(); // 3. 1.Перейдите к выбранному URL await page.goto('https://bitsofco.de');// 4. 1.Сделайте скриншот await page.screenshot({path: 'screenshot.png'}); await browser.close();})();

При помощи этого кода мы сделали скриншот страницы https://bitsofco.de и сохранили его как PNG-файл в текущей папке под именем screenshot.png.

Делаем скриншот встраиваемых данных

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

Определение области просмотра браузера

По умолчанию Puppeteer использует размер окна браузера 800px на 600px. Чтобы настроить это, можно вручную установить высоту и ширину области просмотра в настройках, переданных puppeteer.launch().

const browser = await puppeteer.launch({ defaultViewport: { width: 800, height: 500,   isLandscape: true    }});

Также можно установить размеры окна просмотра в режиме landscape при помощи isLandscape boolean.

Ожидание загрузки страницы

Когда мы делаем скриншот, необходимо убедиться, что страница загружена в полном объеме. Можно указать, когда Puppeteer должен сделать скриншот с настройками, переданными page.goto().

await page.goto(    pageUrl,    { waitUntil: 'networkidle2' });

Значение networkidle2 означает, что Puppeteer будет считать страницу в полном объеме загруженной, если произошло не более двух сетевых подключений в течение не менее 500 мс.

Удаление фона

Необходимо захватить только встраиваемые данные, отображаемые на странице, исключив из создаваемого скриншота белый фон. Это можно сделать, передав специальный настройка способу page.screenshot().

await page.screenshot({    omitBackground: true});

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *