Captures d'écran avec Puppeteer : captures pleine page, éléments et optimisation de la taille

Table des matières

Captures d'écran avec Puppeteer : captures pleine page, éléments et optimisation de la taille

Marionnettiste est une Node.js Bibliothèque qui simplifie l'automatisation du navigateur, rendant des tâches comme la capture d'écran rapides et efficaces. Que vous ayez besoin de captures d'écran complètes, d'instantanés d'éléments spécifiques ou d'images optimisées, Marionnettiste offre des options flexibles avec un minimum de code. Voici ce que vous pouvez faire avec Marionnettiste:

Captures d'écran pleine page: Capturez des pages Web entières, y compris le contenu défilant.
Captures spécifiques aux éléments:Concentrez-vous sur des composants précis à l'aide de sélecteurs CSS.
Optimisation de la taille: Contrôlez le format de l'image, la qualité et la taille du fichier (par exemple, PNG, JPEG, WebP).

Exemple rapide :

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

Pourquoi utiliser Marionnettiste?

Marionnettiste

Automatisez les tests visuels et les rapports de bogues.
Gagnez du temps grâce à des interactions efficaces avec le navigateur.
Personnalisez les captures d'écran pour plus de performances et de clarté.

Que vous soyez un développeur testant des sites Web ou documentant des erreurs, Puppeteer rationalise le processus avec des outils puissants et des commandes simples.

Capturez des captures d'écran de pages Web avec le navigateur sans tête basé sur Puppeteer sur Latenode !

Latenode offre une intégration directe avec la bibliothèque Puppeteer sans aucune installation sur votre système. Choisissez simplement un nœud dans la bibliothèque d'intégration, ajoutez-le à votre scénario d'automatisation, ajoutez un script de capture d'écran et liez-le à d'autres nœuds. Voici quelques exemples. Découvrez-les et choisissez celui qui correspond à vos besoins !

Vitrine n° 1 : Analyse de site Web basée sur des captures d'écran

Cet outil d'automatisation est conçu pour analyser et synthétiser le contenu web en capturant et en traitant des captures d'écran de sites web spécifiques. Grâce à un navigateur headless et à l'intégration de l'IA, il vous permet d'extraire des informations clés des pages web. Idéal pour suivre l'évolution des sites web, analyser la concurrence ou collecter des données visuelles pour vos rapports.

Clonez ce modèle, personnalisez-le selon vos besoins et automatisez la surveillance du site Web !

Présentation n° 2 : Collecte de données sur le commerce électronique (Ebay Scraper)

Ce scénario automatisé est conçu pour collecter et traiter les résultats de recherche sur le Web. Utilisez un navigateur headless et du code JavaScript assisté par IA pour collecter des informations auprès des moteurs de recherche, réaliser des captures d'écran 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 une collecte automatisée de données sur le Web.

Clonez ce modèle prêt à l'emploi pour extraire toutes les données de produit d'Ebay !

Vitrine #3 : Outil d'étude de marché

Cet outil analyse les avis en ligne d'une entreprise spécifique et fournit des informations exploitables grâce à une analyse basée sur l'IA. Un navigateur headless permet de naviguer, de réaliser des captures d'écran et de collecter les avis, tandis que l'IA DeepSeek permet une analyse détaillée. Idéal pour surveiller la réputation d'une marque, améliorer le service client et prendre des décisions basé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 optimales pour vos captures d'écran, qu'il s'agisse de captures d'écran pleine page, d'éléments spécifiques ou de captures optimisées.

Démarrer le navigateur et la page

Une fois que vous avez ajouté le nœud Navigateur sans tête, 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, vous permettant de capturer des captures d'écran avec précision.

Définir les paramètres de la page

Pour peaufiner vos captures d'écran, ajustez les paramètres de la fenêtre d'affichage. Voici une liste des paramètres clés :

Paramètre	Valeur par défaut	Paramètre recommandé	Objectif
Largeur	800px	1280px	Correspond à la résolution de bureau courante
Taille	600px	720px	Fournit un rapport hauteur/largeur standard de 16:9
Facteur d'échelle	1	1	Conserve la taille d'origine
Modalité mobile	non	non	Assure le rendu du bureau

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 scraping Web, le test d'applications Web sur différents appareils et la génération de captures d'écran ou de PDF de pages Web. - Webshare

Pour le contenu dynamique, définissez un délai d'expiration pour tenir compte des délais de chargement :

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

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

Captures d'écran pleine page

Apprenez à prendre des captures d'écran pleine page avec Puppeteer en utilisant des paramètres spécifiques, des méthodes de défilement et des techniques de dépannage.

Activer le mode pleine page

Pour capturer une page Web entière, y compris le contenu en dehors de la zone visible, utilisez Puppeteer pleine page option:

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 contenu dynamique a terminé son rendu :

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

Si du contenu dynamique manque toujours dans la capture d’écran, envisagez d’utiliser des techniques de défilement comme expliqué ci-dessous.

Gérer les pages défilantes

Pour les pages qui nécessitent un défilement pour 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 });
}

« Prendre des captures d'écran par sections est la meilleure solution que nous puissions avoir aujourd'hui pour prendre des captures d'écran de pages complètes. »

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 quelques problèmes courants auxquels vous pourriez être confronté et leurs solutions :

Question	Solution	Mise en œuvre
Unités de fenêtre	Définir une hauteur de fenêtre fixe	`await page.setViewport({ height: 900 });`
Chargement Lazy	Utiliser le défilement progressif	Utilisez l'option `captureFullPage` fonction
Dispositions complexes	Capture en sections	Prenez plusieurs captures d'écran et fusionnez-les

Pour les pages avec un défilement infini ou un contenu dynamique important, ajoutez une limite de défilement pour éviter les boucles 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 sans tête... Cependant, Puppeteer ne fonctionne pas parfaitement lorsqu'il s'agit de prendre des captures d'écran. »

Pour les mises en page particulièrement délicates où le pleine page l'option 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 des captures d'écran pleine page. Prochainement : capture d'éléments spécifiques et ajustement des paramètres de taille et de qualité.

Captures d'écran des éléments

Puppeteer permet de se concentrer facilement sur des éléments spécifiques, en s'appuyant sur sa capacité à capturer des captures d'écran pleine page.

Rechercher des éléments avec CSS

Pour cibler les éléments avec précision, utilisez des sélecteurs CSS tels que des ID, des classes ou des 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');

Prendre 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 le page.locator() méthode:

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

Les captures d'écran d'éléments sont précises et efficaces. Moins de superflu, plus de précision. - Laura et Heidi, SCRNIFY

Cette approche est idéale pour les tests et les rapports automatisés, en complément des captures d'écran pleine page. Assurez-vous simplement que l'élément est entièrement chargé avant de prendre la capture d'écran.

Gérer le chargement du contenu

Les éléments dynamiques nécessitent souvent des étapes supplémentaires pour garantir qu'ils sont prêts à interagir :

// 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 avec 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 crypto-monnaie 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 pour obtenir les meilleurs résultats :

Scénario	Stratégie d'attente	Mise en œuvre
Éléments statiques	Sélecteur de base	`page.$()`
Dépendant de l'API	Attendre la réponse	`waitForResponse()`
Graphiques rendus	Fonction personnalisée	`waitForFunction()`
Interface utilisateur visible	Contrôle de visibilité	`waitForSelector()` avec `visible: true`

Taille et qualité de l'image

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

Choisissez le bon format d'image

Le format choisi pour vos captures d'écran influence à la fois la qualité et la taille du fichier. Voici une comparaison rapide :

Format	Meilleur cas d'utilisation	Avantages	Désavantages
WebP	Applications Web modernes	Fichiers plus petits (25 à 34 % plus petits), prend en charge la transparence	Prise en charge limitée dans les anciens navigateurs
JPEG	Photos, captures d'écran détaillées	Petites tailles de fichiers, largement prises en charge	Pas de transparence
PNG	Éléments d'interface utilisateur, logos	Qualité sans perte, prend en charge la transparence	Tailles de fichiers plus grandes

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

// 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 clarté et taille du fichier. Privilégiez une qualité supérieure pour les éléments détaillés de l'interface utilisateur 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 fichier 25 à 35 % plus petites que JPEG pour un même niveau de qualité. » - Google Developers

Réduire la taille du fichier

Pour réduire davantage la taille du fichier sans perdre en clarté, vous pouvez découper des captures d'écran ou les optimiser pour la 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 ce signalé un Réduction de 80 % de la taille des fichiers PNG grâce à des flux de travail d'optimisation .

La version JPG est beaucoup plus petite. Du côté de Puppeteer, la différence de vitesse de génération d'un JPG par rapport à un PNG est négligeable. - Jon Yongfook, fondateur de Bannerbear

Recommandations basées sur le contenu

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

Type de capture d'écran	Meilleur format	Réglage de la qualité	Réduction de la taille du fichier
Page entière	WebP	75 to 80 %	25 à 34 % plus petit que JPEG
Éléments de l'interface utilisateur	PNG	Lossless	Priorité à la qualité
Contenu riche en photos	JPEG	70 to 80 %	70 à 90 % plus petit que le format non compressé

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 entières ou des éléments spécifiques tout en contrôlant la qualité et le format de l'image. De plus, des options d'encodage plus rapides permettent de gagner du temps de traitement. .

Pour obtenir les meilleurs résultats, définissez les dimensions de votre fenêtre d'affichage en fonction de la résolution dont vous avez besoin et utilisez le waitForSelector() Méthode permettant de garantir le chargement complet du contenu. Si vous utilisez le format JPEG, ajustez les paramètres de qualité pour équilibrer la taille et la clarté du fichier.

Pour commencer

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

Mettre en place un marionnettiste direct Intégration du navigateur sans tête sur Latenode.
Choisissez votre type de capture - qu'il s'agisse d'une page entière ou d'un élément spécifique - en fonction de vos besoins.
Affiner la sortie d'image en ajustant les paramètres de format et de qualité.

Puppeteer est un outil puissant pour le scraping Web et l'automatisation des tests, offrant un haut degré de flexibilité et de contrôle sur le processus de capture d'écran. .

Pour une intégration encore plus fluide, pensez à utiliser des plateformes comme Latenode. Son outil de création de workflow visuel vous permet de configurer une automatisation avancée des captures d'écran sans avoir besoin de compétences approfondies en codage.