Лучшие практики создания скриншотов с BotBrowser в headless-режиме

Обзор

Скриншоты в headless-окружениях требуют внимания к размеру viewport, таймингу загрузки страницы и конфигурации дисплея. Профили BotBrowser включают разрешение экрана и соотношение пикселей устройства. Используйте defaultViewport: null для сохранения этих значений.

Конфигурация viewport

const browser = await puppeteer.launch({
  executablePath: '/path/to/botbrowser/chrome',
  args: [
    '--bot-profile=/path/to/profile.enc',
    '--window-size=1920,1080',
  ],
  headless: true,
  defaultViewport: null,
});

Тайминг загрузки страницы

Самая частая проблема - захват частично загруженной страницы. Используйте правильные стратегии ожидания:

await page.goto('https://example.com', {
  waitUntil: 'networkidle0',
  timeout: 30000,
});
await page.waitForSelector('.main-content', { visible: true });
await page.evaluate(() => document.fonts.ready);
await page.screenshot({ path: 'output.png', fullPage: true });

Форматы скриншотов

Используйте PNG для попиксельной точности. Используйте JPEG с quality: 85 для больших пакетов. Для конкретных элементов:

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

Xvfb на Linux

Настройте виртуальный дисплей в соответствии с разрешением профиля. Используйте 24-битную глубину цвета:

Xvfb :10 -screen 0 1920x1080x24 &
export DISPLAY=:10.0

Продакшен-пример

const puppeteer = require('puppeteer-core');

async function captureScreenshot(url, outputPath) {
  const browser = await puppeteer.launch({
    executablePath: '/path/to/botbrowser/chrome',
    args: [
      '--bot-profile=/opt/profiles/profile.enc',
      '--window-size=1920,1080',
    ],
    headless: true,
    defaultViewport: null,
  });

  try {
    const page = await browser.newPage();
    await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });
    await page.evaluate(() => document.fonts.ready);
    await page.screenshot({ path: outputPath, type: 'png' });
  } finally {
    await browser.close();
  }
}

Распространенные проблемы

Пустые скриншоты: страница не завершила загрузку. Используйте waitUntil: 'networkidle0' и добавьте явные ожидания.

Неправильный размер viewport: установите defaultViewport: null.

Отсутствующие шрифты: установите базовые системные шрифты на сервере.

Низкое разрешение: слишком низкая глубина цвета Xvfb. Используйте 24 бита.