Capturesécran avec Puppeteer : captures pleine page, éléments et optimisation de la taille
Découvrez comment capturer efficacement des capturesécran de pages entières etéléments spécifiques à l'aide de Puppeteer, avec des conseils sur l'optimisation et l'automatisation.
Marionnettiste est une Node.js Bibliothèque qui simplifie l'automatisation du navigateur, rendant des tâches comme la captureécran rapides et efficaces. Que vous ayez besoin de capturesécran complètes,instantanéséléments spécifiques ouimages optimisées, Marionnettiste offre des options flexibles avec un minimum de code. Voici ce que vous pouvez faire avec Marionnettiste:
- Capturesé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 :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">path</span>: <span class="hljs-string">'screenshot.jpg'</span>, <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span> });
Pourquoi utiliser Marionnettiste?
- Automatisez les tests visuels et les rapports de bogues.
- Gagnez du temps grâce à des interactions efficaces avec le navigateur.
- Personnalisez les capturesé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.
sbb-itb-23997f1
Capturez des capturesé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èqueintégration, ajoutez-le à votre scénarioautomatisation, ajoutez un script de captureécran et liez-le à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écran
Cet outilautomatisation est conçu pour analyser et synthétiser le contenu web en capturant et en traitant des capturesécran de sites web spécifiques. Grâce à un navigateur headless et à l'intégration de l'IA, il vous permetextraire 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é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 produitEbay !
Vitrine #3 : Outilétude de marché
Cet outil analyse les avis en ligneune 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écran et de collecter les avis, tandis que l'IA DeepSeek permet une analyse détaillée. Idéal pour surveiller la réputationune marque, améliorer le service client et prendre des décisions basées sur les données.
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écran, qu'il s'agisse de capturesécran pleine page,é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 :
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">defaultViewport</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">720</span> }
});
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
})();
Cela configure votre environnement, vous permettant de capturer des capturesécran avec précision.
Définir les paramètres de la page
Pour peaufiner vos capturesécran, ajustez les paramètres de la fenêtreaffichage. Voici une liste des paramètres clés :
| Paramètre | Valeur par défaut | Paramètre recommandé | Interet |
|---|---|---|---|
| Largeur | 800px | 1280px | Correspond à la résolution de bureau courante |
| Hauteur | 600px | 720px | Fournit un rapport hauteur/largeur standard de 16:9 |
| Facteuréchelle | 1 | 1 | Conserve la tailleorigine |
| Modalité mobile | non | non | Assure le rendu du bureau |
Utilisez le code suivant pour configurer ces paramètres :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">720</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">isMobile</span>: <span class="hljs-literal">false</span>
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36'</span>);
Dans Puppeteer, la manipulation de la fenêtreaffichage est particulièrement importante pour des tâches telles que le scraping Web, le testapplications Web sur différents appareils et la génération de capturesécran ou de PDF de pages Web. - Webshare [2]
Pour le contenu dynamique, définissez un délaiexpiration pour tenir compte des délais de chargement :
page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>); <span class="hljs-comment">// 30 seconds timeout</span>
Avec ces configurations, vous êtes prêt à capturer des capturesécran de haute qualité adaptées à vos besoins.
Capturesécran pleine page
Apprenez à prendre des capturesé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:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'complete-page.png'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});
Avant la capture, assurez-vous que la page est entièrement chargée et que le contenu dynamique a terminé son rendu :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForNetworkIdle</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">2000</span>);
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 :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">captureFullPage</span>(<span class="hljs-params">page</span>) {
<span class="hljs-comment">// Scroll through the page and wait for content to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollBy</span>(<span class="hljs-number">0</span>, <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">document</span>.<span class="hljs-property">scrollingElement</span>.<span class="hljs-property">scrollTop</span> + <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span> >= <span class="hljs-variable language_">document</span>.<span class="hljs-property">scrollingElement</span>.<span class="hljs-property">scrollHeight</span>) {
<span class="hljs-built_in">clearInterval</span>(timer);
<span class="hljs-title function_">resolve</span>();
}
}, <span class="hljs-number">100</span>);
});
});
<span class="hljs-comment">// Scroll back to the top, then take the screenshot</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollTo</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>));
<span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span> });
}
« Prendre des capturesécran par sections est la meilleure solution que nous puissions avoir aujourd'hui pour prendre des capturesécran de pages complètes. » [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 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({ hauteur: 900 }); |
| Chargement Lazy | Utiliser le défilement progressif | Utilisez la fonction captureFullPage |
| Dispositions complexes | Capture en sections | Prenez plusieurs capturesé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 :
<span class="hljs-keyword">const</span> maxScrolls = <span class="hljs-number">10</span>;
<span class="hljs-keyword">let</span> scrollCount = <span class="hljs-number">0</span>;
<span class="hljs-keyword">while</span> (scrollCount < maxScrolls) {
<span class="hljs-keyword">const</span> previousHeight = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'document.body.scrollHeight'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'window.scrollTo(0, document.body.scrollHeight)'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">1000</span>);
<span class="hljs-keyword">const</span> newHeight = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'document.body.scrollHeight'</span>);
<span class="hljs-keyword">if</span> (newHeight === previousHeight) <span class="hljs-keyword">break</span>;
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écran. » [5]
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 :
<span class="hljs-keyword">const</span> dimensions = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">width</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">clientWidth</span>,
<span class="hljs-attr">height</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">scrollHeight</span>
};
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'precise-capture.png'</span>,
<span class="hljs-attr">clip</span>: {
<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">width</span>: dimensions.<span class="hljs-property">width</span>,
<span class="hljs-attr">height</span>: dimensions.<span class="hljs-property">height</span>
}
});
Grâce à ces techniques, vous pourrez gérer efficacement des capturesécran pleine page. Prochainement : captureéléments spécifiques et ajustement des paramètres de taille et de qualité.
Capturesé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é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 :
<span class="hljs-comment">// Target by ID (most reliable)</span>
<span class="hljs-keyword">const</span> submitButton = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'#submit-button'</span>);
<span class="hljs-comment">// Use specific class combinations</span>
<span class="hljs-keyword">const</span> productCard = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.product-card.featured'</span>);
<span class="hljs-comment">// Locate elements within a container</span>
<span class="hljs-keyword">const</span> menuItem = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.navigation-menu .dropdown-item.active'</span>);
Prendre des capturesécranéléments
Après avoir identifié un élément, utilisez les outils de captureécran de Puppeteer pour le capturer :
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'div.product-data'</span>);
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'element-screenshot.png'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'png'</span>
});
Pour une sélection plus avancée, essayez le page.locator() méthode:
<span class="hljs-keyword">const</span> locator = page.<span class="hljs-title function_">locator</span>(<span class="hljs-string">'div.product-data'</span>);
<span class="hljs-keyword">await</span> locator.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'element-locator.png'</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">90</span>
});
Les capturesécrané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écran pleine page. Assurez-vous simplement que l'élément est entièrement chargé avant de prendre la captureé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 :
<span class="hljs-comment">// Wait for the element to become visible</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.dynamic-element'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
<span class="hljs-comment">// Wait for API data to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForResponse</span>(
<span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data'</span>)
);
<span class="hljs-comment">// Capture the screenshot</span>
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">path</span>: <span class="hljs-string">'dynamic-element.png'</span> });
Pour les éléments avec des conditions spécifiques, créez des fonctionsattente personnalisées :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.chart-container'</span>);
<span class="hljs-keyword">return</span> element && element.<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span> > <span class="hljs-number">0</span>;
});
Voici un exemple concret utilisant les graphiques de crypto-monnaie de TradingView :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">"https://www.tradingview.com/markets/cryptocurrencies/"</span>);
<span class="hljs-keyword">const</span> chartElement = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">".tv-lightweight-charts"</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-keyword">await</span> chartElement.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">path</span>: <span class="hljs-string">'crypto-graph.png'</span> });
« Attendre un élément spécifique est essentiel au processusautomatisation, car cela évite les interactions prématurées. » - ScrapeOps
Lorsque vous travaillez avec du contenu dynamique, combinez différentes stratégiesattente pour obtenir les meilleurs résultats :
| Scénario | Stratégieattente | Mise en œuvre |
|---|---|---|
| Éléments statiques | Sélecteur de base | page.$() |
| Dépendant de l'API | Attendre la réponse | attendreRéponse() |
| Graphiques rendus | Fonction personnalisée | attendreFonction() |
| 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écran peut améliorer les performances et l'efficacité du stockage. Voici comment procéder efficacement.
Choisissez le bon formatimage
Le format choisi pour vos capturesécran influence à la fois la qualité et la taille du fichier. Voici une comparaison rapide :
| Format | Meilleur casutilisation | 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écran détaillées | Petites tailles de fichiers, largement prises en charge | Pas de transparence |
| PNG | Élémentsinterface 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:
<span class="hljs-comment">// WebP format</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'screenshot.webp'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'webp'</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">80</span>
});
<span class="hljs-comment">// JPEG format</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'screenshot.jpg'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">75</span>
});
Ajuster les paramètres de qualité
Les paramètres de qualité permettenté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 :
<span class="hljs-comment">// High quality for UI elements</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'ui-element.jpg'</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">90</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
<span class="hljs-comment">// Medium quality for general captures</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'full-page.jpg'</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">75</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
« WebP offre des tailles de fichier 25 à 35 % plus petites que JPEG pour un même niveau de qualité. » - Google Developers [6]
Réduire la taille du fichier
Pour réduire davantage la taille du fichier sans perdre en clarté, vous pouvez découper des capturesécran ou les optimiser pour la diffusion sur le Web :
<span class="hljs-comment">// Clip to specific dimensions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'clipped.jpg'</span>,
<span class="hljs-attr">clip</span>: {
<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">720</span>
}
});
<span class="hljs-comment">// Optimize for web delivery</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'optimized.webp'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'webp'</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">75</span>,
<span class="hljs-attr">omitBackground</span>: <span class="hljs-literal">true</span>
});
, par exemple en : gitlab ce signalé un Réduction de 80 % de la taille des fichiers PNG grâce à des flux de travailoptimisation [8].
La version JPG est beaucoup plus petite. Du côté de Puppeteer, la différence de vitesse de générationun JPG par rapport à un PNG est négligeable. - Jon Yongfook, fondateur de Bannerbear [7]
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é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é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 optionsencodage plus rapides permettent de gagner du temps de traitement. [10].
Pour obtenir les meilleurs résultats, définissez les dimensions de votre fenêtreaffichage 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.
Démarrer
Voici comment commencer à utiliser Puppeteer pour les capturesécran :
- Mettre en place un marionnettiste direct Intégration du navigateur sans tête sur Latenode.
- Choisissez votre type de capture - qu'il s'agisseune page entière ouun élément spécifique - en fonction de vos besoins.
- Affiner la sortieimage 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écran. [3].
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écran sans avoir besoin de compétences approfondies en codage.
articles similaires
- Navigateur sans tête Node.js : aperçu des meilleures solutions
- Chrome sans tête : comment l'utiliser et le configurer
- Qu'est-ce que Puppeteer et comment a-t-il changé l'automatisation du navigateur : un aperçu complet
- Installation et configuration de Puppeteer : résolution des problèmes courants de dépendance et de Chromium
