Создание скриншотов с помощью Puppeteer

Прямое использование Puppeteer

подсказка

Для запуска этого примера на платформе Apify выберите образ apify/actor-node-puppeteer-chrome в вашем Dockerfile.

В этом примере показано, как сделать скриншот веб-страницы с помощью Puppeteer. Тот же результат можно получить, используя Playwright.

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

Использование page.screenshot():

Run on

import { KeyValueStore, launchPuppeteer } from 'crawlee';

const keyValueStore = await KeyValueStore.open();

const url = 'https://crawlee.dev';
// Запускаем браузер
const browser = await launchPuppeteer();

// Открываем новую вкладку в браузере
const page = await browser.newPage();

// Переходим на URL
await page.goto(url);

// Создаем скриншот
const screenshot = await page.screenshot();

// Сохраняем скриншот в хранилище ключ-значение по умолчанию
await keyValueStore.setValue('my-key', screenshot, { contentType: 'image/png' });

// Закрываем Puppeteer
await browser.close();

Скриншот через Crawler Utils

Использование utils.puppeteer.saveSnapshot():

Run on

import { launchPuppeteer, utils } from 'crawlee';

const url = 'http://www.example.com/';
// Запускаем браузер
const browser = await launchPuppeteer();

// Открываем новую вкладку в браузере
const page = await browser.newPage();

// Переходим на URL
await page.goto(url);

// Создаем скриншот
await utils.puppeteer.saveSnapshot(page, { key: 'my-key', saveHtml: false });

// Закрываем Puppeteer
await browser.close();

Использование PuppeteerCrawler

Этот пример демонстрирует создание скриншотов нескольких веб-страниц с помощью PuppeteerCrawler:

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

Использование page.screenshot():

Run on

import { PuppeteerCrawler, KeyValueStore } from 'crawlee';

// Создаем PuppeteerCrawler
const crawler = new PuppeteerCrawler({
    async requestHandler({ request, page }) {
        // Создаем скриншот с помощью Puppeteer
        const screenshot = await page.screenshot();
        // Преобразуем URL в допустимый ключ
        const key = request.url.replace(/[:/]/g, '_');
        // Сохраняем скриншот в хранилище ключ-значение по умолчанию
        await KeyValueStore.setValue(key, screenshot, { contentType: 'image/png' });
    },
});

await crawler.addRequests([
    { url: 'http://www.example.com/page-1' },
    { url: 'http://www.example.com/page-2' },
    { url: 'http://www.example.com/page-3' },
]);

// Запускаем краулер
await crawler.run();

Скриншот через Crawler Utils

Использование контекстно-зависимой утилиты saveSnapshot():

Run on

import { PuppeteerCrawler } from 'crawlee';

// Создаем PuppeteerCrawler
const crawler = new PuppeteerCrawler({
    async requestHandler({ request, saveSnapshot }) {
        // Преобразуем URL в допустимый ключ
        const key = request.url.replace(/[:/]/g, '_');
        // Создаем скриншот
        await saveSnapshot({ key, saveHtml: false });
    },
});

await crawler.addRequests([
    { url: 'http://www.example.com/page-1' },
    { url: 'http://www.example.com/page-2' },
    { url: 'http://www.example.com/page-3' },
]);

// Запускаем краулер
await crawler.run();

Для создания полного скриншота страницы с помощью Puppeteer необходимо передать параметр fullPage со значением true в метод screenshot(): page.screenshot({fullPage: true})

В обоих примерах с использованием page.screenshot() создается переменная key на основе URL веб-страницы. Эта переменная используется в качестве ключа при сохранении каждого скриншота в хранилище ключ-значение.