Capturer des captures d’écran avec Puppeteer : pages complètes, éléments et optimisation de la taille

Puppeteer est une bibliothèque Node.js qui simplifie l’automatisation des navigateurs, pour exécuter rapidement et efficacement des tâches comme la prise de captures d’écran. Que vous ayez besoin de captures de pages entières, d’instantanés d’éléments spécifiques ou d’images optimisées, Puppeteer offre des options flexibles avec un minimum de code. Voici ce que vous pouvez faire avec Puppeteer :

• Captures d’écran de pages entières : capturez des pages web complètes, y compris leur contenu défilant.
• Captures d’éléments spécifiques : ciblez des composants précis à l’aide de sélecteurs CSS.
• Optimisation de la taille : contrôlez le format, la qualité et la taille des fichiers image (par ex. PNG, JPEG, WebP).

Exemple rapide :

await page.screenshot({ path: 'screenshot.jpg', fullPage: true });

Pourquoi utiliser Puppeteer ?

• Automatisez les tests visuels et les rapports de bugs.
• Gagnez du temps grâce à des interactions efficaces avec le navigateur.
• Personnalisez les captures d’écran pour optimiser les performances et la clarté.

Que vous soyez un développeur qui teste des sites web ou documente des erreurs, Puppeteer simplifie le processus grâce à des outils puissants et des commandes simples.

sbb-itb-23997f1

Capturez des captures d’écran de pages web avec le navigateur headless basé sur Puppeteer sur Latenode !

Latenode propose une intégration directe avec la bibliothèque Puppeteer, sans rien avoir à installer sur votre système. Choisissez simplement un nœud dans la bibliothèque de nœuds d’intégration, ajoutez-le à votre workflow d’automatisation, ajoutez un script de capture d’écran et reliez-le à d’autres nœuds. Voici quelques exemples. Consultez-les et choisissez celui qui correspond à vos besoins !

Exemple #1 : Analyse de site web basée sur des captures d’écran

Cet outil d’automatisation est conçu pour analyser et résumer du contenu web en capturant et en traitant des captures d’écran de sites web spécifiés. Grâce à un navigateur headless et à l’intégration de l’IA, il vous permet d’extraire des informations clés depuis des pages web. Il est idéal pour surveiller les changements sur un site web, analyser les concurrents ou collecter des données visuelles pour des rapports.

Clonez ce modèle, personnalisez-le selon vos besoins et automatisez la surveillance de vos sites web !

Exemple #2 : Collecte de données e-commerce (scraper Ebay)

Ce workflow automatisé est conçu pour collecter et traiter les résultats de recherches web. Utilisez un navigateur headless et du code JavaScript assisté par IA afin de recueillir des informations depuis les moteurs de recherche, capturer des captures d’écran à titre de référence et enregistrer les données pour une analyse ultérieure. Cet outil est idéal pour les études de marché ou toute tâche nécessitant la collecte automatisée de données sur le web.

Clonez ce modèle prêt à l’emploi pour extraire les données de n’importe quel produit sur Ebay !

Exemple #3 : Scraper d’études de marché

Cet outil analyse les avis en ligne concernant une entreprise donnée et fournit des informations exploitables grâce à une analyse pilotée par IA. Un navigateur headless est utilisé pour naviguer, effectuer des captures d’écran et collecter les avis, tandis que l’IA DeepSeek facilite une analyse détaillée. Il est idéal pour surveiller la réputation d’une marque, améliorer le service client et prendre des décisions fondées sur les données.

Clonez ce modèle pour collecter des avis, les analyser et obtenir des informations détaillées sur n’importe quelle marque !

Premiers pas avec Puppeteer

Suivez ces étapes pour configurer Puppeteer et commencer à capturer du contenu web. Une configuration adéquate garantit des performances fluides pour différents besoins de captures d’écran, qu’il s’agisse de pages entières, d’éléments spécifiques ou de captures optimisées en taille.

Démarrer le navigateur et la page

Après avoir ajouté le nœud Navigateur headless, créez une nouvelle instance de navigateur avec le code suivant :

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        defaultViewport: { width: 1280, height: 720 }
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');
})();

Cela configure votre environnement et vous permet de capturer des captures d’écran avec précision.

Définir les paramètres de la page

Pour affiner vos captures d’écran, ajustez les paramètres de la fenêtre d’affichage. Voici les principaux paramètres :

Utilisez le code suivant pour configurer ces paramètres :

await page.setViewport({
    width: 1280,
    height: 720,
    deviceScaleFactor: 1,
    isMobile: false
});

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36');

« Dans Puppeteer, la manipulation de la fenêtre d’affichage est particulièrement importante pour des tâches telles que le web scraping, les tests d’applications web sur différents appareils et la génération de captures d’écran ou de PDF de pages web. » - Webshare [2]

Pour le contenu dynamique, définissez un délai d’expiration afin de prendre en compte les retards de chargement :

page.setDefaultTimeout(30000); // 30 seconds timeout

Avec ces configurations, vous êtes prêt à réaliser des captures d’écran de haute qualité adaptées à vos besoins.

Captures d’écran de pages entières

Découvrez comment réaliser des captures d’écran de pages entières avec Puppeteer en utilisant des paramètres spécifiques, des méthodes de défilement et des techniques de résolution des problèmes.

Activer le mode page entière

Pour capturer une page web complète, y compris le contenu situé hors de la zone visible, utilisez l’option fullPage de Puppeteer :

await page.screenshot({
    path: 'complete-page.png',
    fullPage: true
});

Avant la capture, assurez-vous que la page est entièrement chargée et que le rendu du contenu dynamique est terminé :

await page.waitForNetworkIdle();
await page.waitForTimeout(2000);

Si du contenu dynamique manque encore dans la capture d’écran, envisagez d’utiliser les techniques de défilement expliquées ci-dessous.

Gérer les pages à défilement

Pour les pages nécessitant un défilement afin de charger tout le contenu, vous pouvez automatiser le processus de défilement :

async function captureFullPage(page) {
    // Scroll through the page and wait for content to load
    await page.evaluate(async () => {
        return await new Promise((resolve) => {
            const timer = setInterval(() => {
                window.scrollBy(0, window.innerHeight);
                if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });

    // Scroll back to the top, then take the screenshot
    await page.evaluate(() => window.scrollTo(0, 0));
    return await page.screenshot({ fullPage: true });
}

« Réaliser des captures d’écran par sections est la meilleure solution dont nous disposons aujourd’hui pour capturer une page complète. » [4]

Cette méthode garantit que toutes les sections de la page sont chargées et incluses dans la capture.

Résoudre les problèmes courants

Voici certains problèmes courants que vous pouvez rencontrer, ainsi que leurs solutions :

Pour les pages à défilement infini ou au contenu dynamique important, ajoutez une limite de défilement afin d’éviter une boucle sans fin :

const maxScrolls = 10;
let scrollCount = 0;

while (scrollCount < maxScrolls) {
    const previousHeight = await page.evaluate('document.body.scrollHeight');
    await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
    await page.waitForTimeout(1000);

    const newHeight = await page.evaluate('document.body.scrollHeight');
    if (newHeight === previousHeight) break;

    scrollCount++;
}

« Puppeteer est actuellement le meilleur outil de l’écosystème pour exécuter un navigateur headless... Cependant, Puppeteer n’est pas parfaitement performant lorsqu’il s’agit de réaliser des captures d’écran. » [5]

Pour les mises en page particulièrement délicates où l’option fullPage ne fonctionne pas comme prévu, définissez manuellement les dimensions et utilisez-les comme paramètres de découpage :

const dimensions = await page.evaluate(() => {
    return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.scrollHeight
    };
});

await page.screenshot({
    path: 'precise-capture.png',
    clip: {
        x: 0,
        y: 0,
        width: dimensions.width,
        height: dimensions.height
    }
});

Grâce à ces techniques, vous pourrez gérer efficacement les captures d’écran de pages entières. Étape suivante : capturer des éléments spécifiques et affiner les paramètres de taille et de qualité.

Captures d’écran d’éléments

Puppeteer facilite le ciblage d’éléments spécifiques, en s’appuyant sur sa capacité à capturer des pages entières.

Trouver des éléments avec CSS

Pour cibler précisément des éléments, utilisez des sélecteurs CSS tels que les ID, les classes ou leurs combinaisons :

// Target by ID (most reliable)
const submitButton = await page.$('#submit-button');

// Use specific class combinations
const productCard = await page.$('.product-card.featured');

// Locate elements within a container
const menuItem = await page.$('.navigation-menu .dropdown-item.active');

Réaliser des captures d’écran d’éléments

Après avoir identifié un élément, utilisez les outils de capture d’écran de Puppeteer pour le capturer :

const element = await page.$('div.product-data');
await element.screenshot({
    path: 'element-screenshot.png',
    type: 'png'
});

Pour une sélection plus avancée, essayez la méthode page.locator() :

const locator = page.locator('div.product-data');
await locator.screenshot({
    path: 'element-locator.png',
    quality: 90
});

« Les captures d’écran d’éléments sont une question de précision et d’efficacité. Moins de superflu, plus de ciblage. » - Laura et Heidi, SCRNIFY

Cette approche convient parfaitement aux tests automatisés et aux rapports, en complément des captures de pages entières. Assurez-vous simplement que l’élément est entièrement chargé avant de réaliser la capture d’écran.

Gérer le contenu en cours de chargement

Les éléments dynamiques nécessitent souvent des étapes supplémentaires pour garantir qu’ils sont prêts à être utilisés :

// Wait for the element to become visible
const element = await page.waitForSelector('.dynamic-element', {
    visible: true,
    timeout: 5000
});

// Wait for API data to load
await page.waitForResponse(
    response => response.url().includes('/api/data')
);

// Capture the screenshot
await element.screenshot({ path: 'dynamic-element.png' });

Pour les éléments soumis à des conditions spécifiques, créez des fonctions d’attente personnalisées :

await page.waitForFunction(() => {
    const element = document.querySelector('.chart-container');
    return element && element.getBoundingClientRect().height > 0;
});

Voici un exemple concret utilisant les graphiques de cryptomonnaies de TradingView :

await page.goto("https://www.tradingview.com/markets/cryptocurrencies/");
const chartElement = await page.waitForSelector(".tv-lightweight-charts", {
    visible: true
});
await chartElement.screenshot({ path: 'crypto-graph.png' });

« Attendre un élément spécifique est essentiel au processus d’automatisation, car cela évite les interactions prématurées. » - ScrapeOps

Lorsque vous travaillez avec du contenu dynamique, combinez différentes stratégies d’attente afin d’obtenir les meilleurs résultats :

Taille et qualité des images

Améliorer la taille et la qualité des captures d’écran peut optimiser à la fois les performances et l’efficacité du stockage. Voici comment procéder efficacement.

Choisir le bon format d’image

Le format choisi pour vos captures d’écran a un impact sur leur qualité comme sur la taille des fichiers. Voici une comparaison rapide :

Par exemple, vous pouvez utiliser le code suivant pour enregistrer des captures d’écran aux formats WebP ou JPEG :

// WebP format
await page.screenshot({
    path: 'screenshot.webp',
    type: 'webp',
    quality: 80
});

// JPEG format
await page.screenshot({
    path: 'screenshot.jpg',
    type: 'jpeg',
    quality: 75
});

Ajuster les paramètres de qualité

Les paramètres de qualité permettent d’équilibrer la netteté et la taille des fichiers. Utilisez une qualité plus élevée pour les éléments d’interface détaillés et une qualité inférieure pour les captures générales :

// High quality for UI elements
await page.screenshot({
    path: 'ui-element.jpg',
    quality: 90,
    type: 'jpeg'
});

// Medium quality for general captures
await page.screenshot({
    path: 'full-page.jpg',
    quality: 75,
    type: 'jpeg'
});

« WebP offre des tailles de fichiers 25 à 35 % plus petites que JPEG pour le même niveau de qualité. » - Google Developers [6]

Réduire la taille des fichiers

Pour réduire davantage la taille des fichiers sans perdre en netteté, vous pouvez découper les captures d’écran ou les optimiser pour leur diffusion sur le web :

// Clip to specific dimensions
await page.screenshot({
    path: 'clipped.jpg',
    clip: {
        x: 0,
        y: 0,
        width: 1280,
        height: 720
    }
});

// Optimize for web delivery
await page.screenshot({
    path: 'optimized.webp',
    type: 'webp',
    quality: 75,
    omitBackground: true
});

Par exemple, GitLab a signalé une réduction de 80 % de la taille des fichiers PNG grâce à des workflows d’optimisation [8].

« La version JPG est beaucoup plus légère. Du côté de Puppeteer, la différence de vitesse pour générer un JPG plutôt qu’un PNG est négligeable. » - Jon Yongfook, fondateur de Bannerbear [7]

Recommandations selon le contenu

Différents types de contenus nécessitent des formats et des paramètres différents. Voici un guide rapide :

Résumé

Puppeteer simplifie l’automatisation et les tests web grâce à ses fonctionnalités de capture d’écran. Il vous permet de capturer des pages complètes ou des éléments spécifiques tout en vous donnant le contrôle sur la qualité et le format des images. De plus, des options d’encodage plus rapides peuvent vous aider à gagner du temps de traitement [10].

Pour obtenir les meilleurs résultats, définissez les dimensions de votre fenêtre d’affichage selon la résolution nécessaire et utilisez la méthode waitForSelector() pour vous assurer que tout le contenu est entièrement chargé. Si vous utilisez le format JPEG, ajustez les paramètres de qualité afin d’équilibrer la taille du fichier et la netteté.

Premiers pas

Voici comment commencer à utiliser Puppeteer pour les captures d’écran :

• Configurez une intégration directe alimentée par Puppeteer Navigateur headless sur Latenode.
• Choisissez votre type de capture — page entière ou élément spécifique — selon vos besoins.
• Affinez le rendu des images en ajustant les paramètres de format et de qualité.

« Puppeteer est un outil puissant pour le web scraping et l’automatisation des tests, offrant un haut degré de flexibilité et de contrôle sur le processus de capture d’écran » [3].

Pour une intégration encore plus fluide, envisagez d’utiliser des plateformes comme Latenode. Son éditeur visuel de workflows vous permet de configurer une automatisation avancée des captures d’écran sans avoir besoin de compétences approfondies en programmation.