Bonnes pratiques de capture d'ecran avec BotBrowser en mode headless

Presentation

Les captures d'ecran dans les environnements headless necessitent une attention a la taille du viewport, au timing de chargement de page et a la configuration de l'affichage. Les profils BotBrowser incluent la resolution d'ecran et le ratio de pixels, utilisez defaultViewport: null pour preserver ces valeurs.

Configuration du 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,
});

Timing de chargement de page

Le probleme le plus courant est de capturer une page partiellement chargee. Utilisez des strategies d'attente appropriees :

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

Formats de capture

Utilisez PNG pour une precision pixel parfaite. Utilisez JPEG avec quality: 85 pour les gros lots. Pour des elements specifiques :

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

Xvfb sous Linux

Faites correspondre l'affichage virtuel a la resolution de votre profil. Utilisez une profondeur de couleur de 24 bits :

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

Exemple de production

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

Problemes courants

Captures blanches : Page non terminee de charger. Utilisez waitUntil: 'networkidle0' et ajoutez des attentes explicites.

Taille de viewport incorrecte : Definissez defaultViewport: null.

Polices manquantes : Installez les polices systeme de base sur votre serveur.

Basse resolution : Profondeur de couleur Xvfb trop faible. Utilisez 24 bits.