Mejores practicas para capturas de pantalla con BotBrowser en modo headless

Descripcion general

Las capturas de pantalla en entornos headless requieren atencion al tamano del viewport, tiempo de carga de pagina y configuracion de display. Los perfiles de BotBrowser incluyen resolucion de pantalla y ratio de pixeles del dispositivo, usa defaultViewport: null para preservar estos valores.

Configuracion del 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,
});

Tiempo de carga de pagina

El problema mas comun es capturar una pagina parcialmente cargada. Usa estrategias de espera adecuadas:

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 });

Formatos de captura

Usa PNG para precision pixel a pixel. Usa JPEG con quality: 85 para lotes grandes. Para elementos especificos:

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

Xvfb en Linux

Ajusta el display virtual a la resolucion de tu perfil. Usa profundidad de color de 24 bits:

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

Ejemplo de produccion

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();
  }
}

Problemas comunes

Capturas en blanco: Pagina no terminada de cargar. Usa waitUntil: 'networkidle0' y agrega esperas explicitas.

Tamano de viewport incorrecto: Establece defaultViewport: null.

Fuentes faltantes: Instala fuentes base del sistema en tu servidor.

Baja resolucion: Profundidad de color de Xvfb demasiado baja. Usa 24 bits.