Chrome sans tête : comment l'utiliser et le configurer
Découvrez comment configurer et utiliser Headless Chrome pour l'automatisation web, le scraping et les tests, et rationaliser vos flux de travail sans interface graphique.
Vous souhaitez automatiser des tâches, extraire des données ou tester des sites Web efficacement ? Sans tête Chrome peut vous aider à faire exactement cela. Il s'agitun navigateur qui fonctionne sans interface graphique, ce qui le rend plus rapide et moins gourmand en ressources pour des tâches telles que le scraping Web, les tests automatisés et l'analyse SEO.
Principaux avantages:
- Raclage Web: Extraire des données de sites Web utilisant beaucoup de JavaScript.
- Tests automatisés : Exécutez des tests plus rapides et économes en ressources pour les pipelines CI/CD.
- Suivi de la performance: Simulez les interactions des utilisateurs pour déboguer les problèmes.
- Analyse SEO : Collectez et analysez rapidement les données du site Web.
Installation rapide:
- Installer Node.js et Marionnettiste.
- Configurez les paramètres de base tels que la taille de la fenêtreaffichage et le blocage des ressources.
- Utilisez des scripts pour automatiser des tâches, capturer des capturesécran ou générer des PDF.
Des plates-formes comme Laténode Simplifiez encore davantage ce processus avec des outils low-code pour l'automatisation. Que vous soyez développeur ou débutant, Headless Chrome est un outil puissant pour rationaliser les tâches Web. Voyons comment le configurer et l'utiliser efficacement.
Qu'est-ce qu'un navigateur headless ? Comment exécuter Headless Chrome?
Guideinstallation
Assurez-vous que votre système répond aux spécifications requises et suivez les étapesinstallation pour votre plateforme.
Exigences techniques
Vérifiez la compatibilité de votre système :
| Systèmeexploitation | Configuration requise |
|---|---|
| Windows | • Windows 10 ou Windows Server 2016+ • Processeur Intel Pentium 4 (compatible SSE3) ou plus récent |
| macOS | • macOS Big Sur 11 ou version ultérieure |
| Linux | • Ubuntu 18.04+ ou Debian 10+ (64 bits) • openSUSE 15.5+ ou Fedora 39+ • Processeur Intel Pentium 4 (compatible SSE3) ou plus récent |
Vous devrez également installer Node.js (dernière version LTS) pour utiliser Puppeteer.
Procédureinstallation
Suivez ces étapes en fonction de votre plateforme :
Windows Téléchargez Chrome depuis son site officiel, installez Node.js, puis exécutez :
npm install puppeteermacOS Utilisez le Homebrew pour installer Chrome et Puppeteer :
brew install --cask google-chrome npm install puppeteerLinux Mettez à jour votre système et installez Chrome avec Puppeteer :
sudo apt update sudo apt install google-chrome-stable npm install puppeteer
Après l'installation, vérifiez votre configuration pour vous assurer que tout fonctionne.
Tester votre installation
Exécutez ces commandes pour confirmer que Chrome est correctement installé :
google-chrome-stable --version
google-chrome-stable --headless --disable-gpu --dump-dom https://www.google.com/
Si vous voyez la version de Chrome et la sortie HTML de Google, Chrome est prêt à fonctionner. Pour tester Puppeteer, utilisez le script ci-dessous :
<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-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://www.google.com'</span>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();
Enregistrez ce code sous test.js et exécutez-le en utilisant node test.jsSi tout s'exécute sans erreur, votre configuration est terminée et vous êtes prêt à vous lancer dans les tâchesautomatisation.
Réglages de base
Paramètres de base
Configurez les configurations essentielles pour garantir une automatisation fluide, une gestion efficace des ressources et une gestion fiable des demandes.
<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">1920</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span> },
<span class="hljs-attr">args</span>: [
<span class="hljs-string">'--no-sandbox'</span>,
<span class="hljs-string">'--disable-setuid-sandbox'</span>,
<span class="hljs-string">'--disable-dev-shm-usage'</span>,
<span class="hljs-string">'--disable-accelerated-2d-canvas'</span>,
<span class="hljs-string">'--disable-gpu'</span>
]
});
Cette configuration fonctionne bien pour la plupart des tâchesautomatisation, en utilisant des dimensionsécran de bureau standard et des arguments axés sur la stabilité. Vous pouvez modifier ces paramètres en fonction de vos besoins spécifiques.
Configuration spécifique à la tâche
Ajustez la configuration pour des tâches individuelles. Par exemple, si vous travaillez sur le scraping Web, vous pouvez réduire l'utilisation des ressources et éviter la détection :
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Block unnecessary resources</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function">(<span class="hljs-params">request</span>) =></span> {
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">includes</span>(request.<span class="hljs-title function_">resourceType</span>())) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
<span class="hljs-comment">// Set custom headers</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
<span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
<span class="hljs-string">'User-Agent'</span>: <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'</span>
});
<span class="hljs-comment">// Enable JavaScript if required</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setJavaScriptEnabled</span>(<span class="hljs-literal">true</span>);
Pour les tests automatisés, privilégiez la stabilité et la cohérence :
<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_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
Vous pouvez encore améliorer les performances en modifiant les paramètres de vitesse et d’allocation des ressources.
Paramètres de vitesse et de ressources
Améliorez les performances de Chrome sans tête en gérant efficacement les ressources. Vous trouverez ci-dessous quelques configurations utiles :
| Type de réglage | Configuration | Interet |
|---|---|---|
| Mémoire | --max-old-space-size=4096 | Alloue jusqu'à 4 Go de mémoire pour Node.js |
| Processus | --un processus unique | Exécute Chrome en tant que processus unique |
| Affichage | --désactiver-gpu | Désactive l’accélération matérielle du GPU (comme indiqué précédemment) |
Pour les tâches à plus grande échelle, vous pouvez exécuter plusieurs sessions de navigateur simultanément tout en gérant les ressources :
<span class="hljs-keyword">const</span> cluster = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Cluster</span>.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">concurrency</span>: <span class="hljs-title class_">Cluster</span>.<span class="hljs-property">CONCURRENCY_CONTEXT</span>,
<span class="hljs-attr">maxConcurrency</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">monitor</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">puppeteerOptions</span>: {
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>]
}
});
De plus, ajustez les paramètres de délaiattente en fonction des conditions de votre réseau :
page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">60000</span>); <span class="hljs-comment">// 60 seconds for navigation</span>
page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>); <span class="hljs-comment">// 30 seconds for other tasks</span>
Ces configurations vous aideront à trouver un équilibre entre vitesse, stabilité et efficacité des ressources.
sbb-itb-23997f1
Opérations JavaScript
Headless Chrome peut exécuter JavaScript et gérer efficacement les interactions Web avec Puppeteer.
Exécution de scripts simples
Puppeteer simplifie l'automatisation du navigateur :
<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-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Navigate to a page and wait for the network to be idle</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Get the page title using JavaScript</span>
<span class="hljs-keyword">const</span> pageTitle = <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-variable language_">document</span>.<span class="hljs-property">title</span>;
});
<span class="hljs-comment">// Extract specific data from the page</span>
<span class="hljs-keyword">const</span> results = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> data = [];
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-item'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
data.<span class="hljs-title function_">push</span>({
<span class="hljs-attr">name</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.title'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">price</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>
});
});
<span class="hljs-keyword">return</span> data;
});
Méthodesinteraction des pages
Vous pouvez simuler les actions des utilisateurs, comme les clics et la saisie, pour rendre les interactions plus naturelles :
<span class="hljs-comment">// Wait for an element to appear and click it</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-comment">// Type text into an input field with random delays</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, <span class="hljs-string">'[email protected]'</span>, {
<span class="hljs-attr">delay</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">100</span>) + <span class="hljs-number">50</span>
});
<span class="hljs-comment">// Handle form submission and wait for navigation</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#submit-button'</span>)
]);
« Un navigateur sans interface utilisateur est un excellent outil pour les tests automatisés et les environnements de serveur où vous n'avez pas besoinune interface utilisateur visible. » - Eric Bidelman [2]
Gestion des éléments dynamiques
Le contenu dynamique nécessite une gestion spécifique pour assurer une interaction appropriée :
<span class="hljs-comment">// Wait for dynamic content to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
<span class="hljs-string">'document.querySelector(".dynamic-content").childNodes.length > 0'</span>,
{ <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> }
);
<span class="hljs-comment">// Handle infinite scrolling</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrollToBottom</span>(<span class="hljs-params"></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">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">let</span> totalHeight = <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> distance = <span class="hljs-number">100</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>, distance);
totalHeight += distance;
<span class="hljs-keyword">if</span> (totalHeight >= <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</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>);
});
});
}
Voici quelques scénarios et solutions courants pour travailler avec des éléments dynamiques :
| Scénario | Solution | Case Study |
|---|---|---|
| États de chargement | Utilisez waitForSelector avec vérification de visibilité | Demandesune seule page |
| Mises à jour AJAX | Utilisez waitForFunction pour vérifier le contenu | Flux de données en temps réel |
| DOM de l'ombre | Utilisez evaluateHandle avec des sélecteurs personnalisés | Composants Web |
Conseilsoptimisation:
- Utilisez des attentes explicites pour éviter les retards inutiles.
- Implémenter la gestion des erreurs pour gérer les échecs de script.
- Gardez un œil sur l’utilisation du processeur et de la mémoire pendant l’exécution.
- Désactivez les ressources non essentielles telles que les images ou les publicités pour améliorer les performances.
Fonctionnalités avancées
S'appuyant sur des paramètres de base et des opérations JavaScript, ces fonctionnalités avancées font passer Headless Chrome au niveau supérieur. Elles permettentobtenir des résultats plus précis et une meilleure gestion des erreurs, ce qui rend vos tâchesautomatisation encore plus efficaces.
Création de captureécran
Prendre des capturesécran avec Puppeteer est simple. Voici comment vous pouvez capturer une captureécranune page entière :
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</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-comment">// Set a consistent viewport size</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});
<span class="hljs-comment">// Wait for the page to load and capture a full-page screenshot</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</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">fullPage</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
Vous devez capturer un élément spécifique ? Concentrez-vous sur une section particulière de la page :
<span class="hljs-comment">// Screenshot of a specific element</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.hero-section'</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">'hero.png'</span>,
<span class="hljs-attr">omitBackground</span>: <span class="hljs-literal">true</span>
});
| Option de captureécran | Meilleur casutilisation | Impact sur les performances |
|---|---|---|
| Format JPEG | Capturesécran de grande taille, traitement plus rapide | Qualité inférieure, taille de fichier plus petite |
| Format PNG | Niveau de détail ou de transparence élevé requis | Des fichiers plus volumineux, un traitement plus lent |
| Élément spécifique | Composants de l'interface utilisateur, capture sélective | Utilisation minimale des ressources |
Création de PDF
Vous pouvez également générer des PDF avec un formatage personnalisé :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'document.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">margin</span>: {
<span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">right</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">left</span>: <span class="hljs-string">'1in'</span>
},
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">displayHeaderFooter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">headerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Generated on {{date}}</div>'</span>,
<span class="hljs-attr">footerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'</span>
});
« Chrome sans tête est un moyenexécuter le navigateur Chrome dans un environnement sans tête. En gros, il s'agitexécuter Chrome sans Chrome ! Il apporte toutes les fonctionnalités de la plateforme Web moderne fournies par Chromium et le moteur de rendu Blink à la ligne de commande. » - Eric Bidelman, Chrome pour les développeurs [2]
Une fois vos sorties prêtes, vous pouvez utiliser des outils intégrés pour déboguer et affiner les performances.
Outils de dépannage
Le débogage des problèmes dans Headless Chrome est plus facile avec le protocole Chrome DevTools :
<span class="hljs-comment">// Enable debugging</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">devtools</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--remote-debugging-port=9222'</span>]
});
<span class="hljs-comment">// Add error logging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Browser console:'</span>, msg.<span class="hljs-title function_">text</span>()));
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'pageerror'</span>, <span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page error:'</span>, err));
Pour les problèmes plus complexes, vous pouvez automatiser la capture des erreurs :
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">`error-<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>.png`</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
}
Par exemple, Chrome DevTools a été utilisé pour résoudre les problèmesidentification des éléments dans les services IDP de Google. [3].
| Méthode de débogage | Interet | Quand utiliser |
|---|---|---|
| Outils de développement à distance | Inspection en direct | Problèmes de rendu complexes |
| Journalisation de la console | Suivre l'exécution du script | Problèmes de flux de script |
| Capturesécranerreur | Débogage visuel | Pannes liées à l'interface utilisateur |
Utilisation de Chrome sans tête avec Laténode
Cette section explique comment utiliser une plateforme low-code comme Latenode pour l'automatisation Headless Chrome. Latenode intègre Headless Chrome dans son système, ce qui simplifie l'automatisation Web pour les développeurs et les utilisateurs non techniques.
Nous connaitre Laténode
Latenode intègre la fonctionnalité Headless Chrome via son système de nœuds « Navigateur sans tête ». Cela permet aux équipesautomatiser les flux de travail sans avoir à gérer directement Puppeteer.
| Caractéristique | Description | Bénéfice |
|---|---|---|
| Visual Builder | Création de workflow par glisser-déposer | Simplifie les tâchesautomatisation de base |
| Copilote de code IA | Génération de code automatisée | Accélère la configuration de scénarios complexes |
| Stockage de données intégré | Gestion des données intégrée | Facilite la gestion des données extraites |
| Intégration NPM | Accès à plusun million de forfaits | Ajoute des fonctionnalités supplémentaires |
Étapes de configuration de Latenode
Voici un exemple de script pour commencer :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">run</span>(<span class="hljs-params">{execution_id, input, data, page}</span>) {
<span class="hljs-comment">// Set user agent for better compatibility</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) Chrome/98.0.4758.102'</span>);
<span class="hljs-comment">// Configure viewport for reliable element detection</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">status</span>: <span class="hljs-string">'success'</span>
}
}
Pour les tâches Web plus avancées, le nœud de navigateur Headless de Latenode permetaccéder aux fonctions de manipulation de page. Il gère également automatiquement les instances de navigateur, vous n'avez donc pas besoin de configurer Puppeteer manuellement.
Faits saillants de la plateforme
Latenode rationalise l'automatisation de Chrome Headless en s'attaquant aux problèmes courants liés au codage traditionnel. Les principales fonctionnalités incluent :
- Gestion automatisée des erreurs et options de nouvelle tentative
- Gestion des proxys intégrée
- Outils de débogage visuel pour les flux de travail
- Suivi de l'historiqueexécution jusqu'à 60 jours (disponible dans le forfait Prime)
La tarification est basée sur l'utilisation de l'exécution, avec des options allantun niveau gratuit (300 crédits) à des plans de niveau entreprise qui prennent en charge jusqu'à 1.5 millionexécutions de scénarios par mois. Cela en fait un choix flexible et économique pour faire évoluer les effortsautomatisation.
Pour les équipes qui jonglent avec plusieurs flux de travail, le générateur visuel accélère le développement tout en prenant en charge des fonctionnalités avancées telles que la captureécran et la génération de PDF. En simplifiant le déploiement et la gestion, Latenode améliore ce que propose déjà Headless Chrome, rendant l'automatisation plus accessible.
Conclusion
Résumé
Chrome sans tête rend l'automatisation Web plus rapide et plus efficace en éliminant le besoinune interface de navigateur complète. Il réduit la consommation de ressources et accélère les processus, ce qui le rend idéal pour des tâches telles que le scraping Web, les tests, l'analyse SEO et le suivi des performances [1]. Des plateformes comme Latenode facilitent le déploiement de Headless Chrome avec des outils visuels et des fonctionnalités automatisées, nécessitant moins de savoir-faire technique.
Démarrer
Suivez ces étapes pour commencer à utiliser Headless Chrome :
Notions de base de la configuration :
Installez Node.js et Puppeteer. Ces outils fournissent des API qui simplifient les tâchesautomatisation.Configurer les paramètres :
Commencez par parcourir les pages et prendre des capturesécran. Ajustez les performances en modifiant ces paramètres :Paramètres Interet Bénéfice Désactiver les images Économisez de la bande passante Chargement plus rapide des pages Fenêtreaffichage personnalisée Assurer un rendu cohérent Meilleure détection des éléments Blocage des ressources Évitez les téléchargements inutiles Exécution plus rapide Fonctionnalités avancées:
Utilisez lewaitForSelectorpour gérer le contenu dynamique et configurer la gestion des erreurs pour des opérations plus fluides. Pour la mise à l'échelle, Latenode propose des plans flexibles, commençant par un niveau gratuit (300 crédits) et allant jusqu'aux solutionsentreprise qui prennent en charge jusqu'à 1.5 millionexécutions par mois.
articles similaires
