.png)
.svg){kind=icon}
14 mars 2025
•
9
min lire
Captures d'écran avec Puppeteer : captures pleine page, éléments et optimisation de la taille
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
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:
await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
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.
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 !
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 !
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 !
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.
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.
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.
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.
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.
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.
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.
Voici quelques problèmes courants auxquels vous pourriez être confronté et leurs solutions :
| Question | Solution | Implantation |
|---|---|---|
| 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é.
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.
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');
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.
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 | Implantation |
|---|---|---|
| É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 |
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.
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
});
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
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 workflows 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
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 à 80 % | 25 à 34 % plus petit que JPEG |
| Éléments de l'interface utilisateur | PNG | Lossless | Priorité à la qualité |
| Contenu riche en photos | JPEG | 70 à 80 % | 70 à 90 % plus petit que le format non compressé |
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.
Voici comment commencer à utiliser Puppeteer pour les captures d'écran :
« 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 prise 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.
