Скриншоты с помощью Headless Chrome и Puppeteer

Я люблю Headless Chrome за скорость работы, оптимальный расход памяти и возможность установки на «голый» Linux-сервер.

Один из способов использовать API Headless Chrome — инструмент Puppeteer. Он предоставляет простой интерфейс программирования, который закрывает широкий круг задач, в том числе создание скриншотов.

Скриншот одной страницы

Чтобы сделать с помощью Puppeteer скриншот одной страницы, нужно выполнить всего 4 шага.

// 1. Запустить браузер.
const browser = await puppeteer.launch();

// 2. Открыть новую страницу.
const page = await browser.newPage();

// 3. Перейти по нужной ссылке.
await page.goto('https://yandex.ru');

// 4. Получить скриншот.
await page.screenshot({path: 'screenshot.png'});

await browser.close();

В текущей директории появится файл screenshot.png с изображением содержимого https://yandex.ru.

Скриншоты нескольких страниц

const urls = ['https://yandex.ru', 'https://mail.ru', 'https://google.com'];
const browser = await puppeteer.launch();

const page = await browser.newPage();

const screenshots = [];

for (let i = 0; i < urls.length; i++) {
    await page.goto(urls[i]);

    screenshots.push({
        screenshot: await page.screenshot({path: `screenshot_${i}.png`})
    });
}

await browser.close();

Настройка видимой области

По умолчанию Puppeteer подготовит картинку с размером видимой области страницы 800×600 пикселей. Это настраиваемый параметр:

const browser = await puppeteer.launch({
    defaultViewport: {
        width: 1024,
        height: 900
    }
});

С помощью опции isLandscape (булево значение) для launch() можно выбрать ориентацию страницы.

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

Укажите значение networkidle2 для параметра waitUntil, и puppeteer будет считать, что страница полностью загружена, если открыто не более 2 активных запросов (см. также документацию).

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

На сайте try-puppeteer.appspot.com можно протестировать рассмотренные примеры кода. Результат получите прямо в браузере.