Automatisation du navigateur avec Puppeteer et JavaScript : mise en œuvre pratique dans Node.js
Découvrez comment automatiser les tâches du navigateur avec Puppeteer dans Node.js, du web scraping à l'automatisation des formulaires, grâce à des exemples pratiques et des bonnes pratiques.
Marionnettiste est une Node.js bibliothèque math qui automatise les tâches du navigateur comme le web scraping, les tests d'interface utilisateur et les flux de travail répétitifs. Il fonctionne dans les deux cas. sans tête (pas d'interface) et modes de navigation complets et communique avec les navigateurs via le Protocole DevToolsVoici pourquoi c'est un choix de premier ordre pour les développeurs :
- Gestion du contenu dynamique:Parfait pour les applications Web modernes et pour contourner les systèmes de détection.
- utilisations courantes: Web scraping, génération de PDF, capture d'écran et automatisation de formulaires.
- Configuration simple:Installer Puppeteer avec
npm install puppeteer, et il est fourni avec une version compatible de Chrome.
Exemple rapide :
<span class="hljs-keyword">import</span> puppeteer <span class="hljs-keyword">from</span> <span class="hljs-string">'puppeteer'</span>;
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runAutomation</span>(<span class="hljs-params"></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-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>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}
<span class="hljs-title function_">runAutomation</span>();
Pourquoi ça se démarque :
- Modes: Headless (tâches CI/CD) ou interface utilisateur complète (débogage).
- Interactions de page:Automatisez les clics, la saisie et la navigation à l'aide de sélecteurs CSS.
- Conseils de performance: Désactivez les images, utilisez le mode furtif et gérez efficacement les opérations asynchrones.
Des débutants aux utilisateurs avancés, Puppeteer simplifie l'automatisation du navigateur, ce qui en fait un outil incontournable pour les développeurs Node.js.
Tests Web modernes et automatisation avec Marionnettiste (Google ...
Installation initiale et configuration
Suivez ces étapes pour configurer Puppeteer dans Node.js et tout préparer pour l’automatisation.
Pour commencer Node.js Environnement
Pour commencer, vous aurez besoin de trois composants principaux :
| Composant | Interet | Vérifier la commande |
|---|---|---|
| Node.js | Environnement d'exécution | noeud --version |
| NPM | Directeur chargé d'emballage | npm --version |
| Google Chrome | Moteur de navigateur | Vérifier l'installation |
Puisque npm est fourni avec Node.js, l'installation de Node.js vous permet d'accéder aux deux outils. Téléchargez la dernière version LTS (Long Term Support) sur le site officiel de Node.js pour une meilleure stabilité et compatibilité. [2].
Configuration du projet avec Puppeteer
Voici comment créer un nouveau projet Puppeteer :
- Étape 1: Courir
mkdir puppeteer-projectpour créer un dossier de projet. - Étape 2: Accédez au dossier et initialisez-le avec
cd puppeteer-project && npm init -y. - Étape 3: Installez Puppeteer en utilisant
npm install puppeteer.
Lorsque vous installez Puppeteer, il télécharge automatiquement une version de Chrome pour les tests correspondant à la bibliothèque. Cela garantit la cohérence de vos scripts dans différentes configurations. [3].
Structure de base du script
Voici un modèle de script Puppeteer simple :
<span class="hljs-keyword">import</span> puppeteer <span class="hljs-keyword">from</span> <span class="hljs-string">'puppeteer'</span>;
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runAutomation</span>(<span class="hljs-params"></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-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">try</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">1280</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">800</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-comment">// Add your actions here</span>
} <span class="hljs-keyword">finally</span> {
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}
}
<span class="hljs-title function_">runAutomation</span>();
Meilleures pratiques pour la rédaction de scripts de marionnettistes :
- Utilisez le
page.waitForSelector()pour s'assurer que les éléments sont entièrement chargés avant d'interagir avec eux [4]. - Définissez les dimensions de la fenêtre d'affichage pour un rendu de page cohérent.
- Enveloppez votre code dans
try/finallyblocs pour gérer les erreurs et garantir que le navigateur se ferme correctement. - Fermez toujours l'instance du navigateur pour éviter les problèmes de mémoire [2].
Pour une expérience de développement plus fluide, ajoutez "type": "module" à ta package.json fichier. Cela vous permet d'utiliser la syntaxe moderne des modules ES comme import et export dans vos scripts [4]. Avec cette configuration en place, vous êtes prêt à plonger dans les fonctionnalités avancées de Puppeteer dans les sections suivantes.
Principales caractéristiques du marionnettiste
Décomposons les principales fonctionnalités de Puppeteer pour une automatisation efficace du navigateur.
Notions de base sur le contrôle du navigateur
Puppeteer vous permet d'exécuter des navigateurs dans deux modes :
| Mode | Description | Meilleur cas d'utilisation |
|---|---|---|
| Sans tête | Exécute le navigateur de manière invisible | Automatisation dans les pipelines CI/CD, tâches de production |
| Full | Affiche l'interface utilisateur du navigateur | Débogage, tests de développement |
Voici un exemple rapide de lancement d’un navigateur avec des paramètres personnalisés :
<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>]
});
Méthodes d'interaction des pages
Puppeteer facilite l'interaction avec les pages web grâce à des sélecteurs CSS et des fonctions d'attente intégrées pour garantir la disponibilité des éléments. Par exemple :
<span class="hljs-comment">// Wait for the email input field to load and type an email</span>
<span class="hljs-keyword">const</span> emailInput = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'input[type="email"]'</span>);
<span class="hljs-keyword">await</span> emailInput.<span class="hljs-title function_">type</span>(<span class="hljs-string">'[email protected]'</span>);
<span class="hljs-comment">// Wait for the submit button to appear and click it</span>
<span class="hljs-keyword">const</span> submitButton = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'button[type="submit"]'</span>);
<span class="hljs-keyword">await</span> submitButton.<span class="hljs-title function_">click</span>();
Vous pouvez effectuer diverses actions, telles que :
- Événements de souris:Cliquez, survolez ou faites glisser-déposer.
- La saisie au clavier: Tapez du texte ou utilisez des combinaisons de touches.
- Gestion des formulaires: Travaillez avec des listes déroulantes, des cases à cocher et des téléchargements de fichiers.
- Navigation dans le cadre: Interagissez avec les iframes ou basculez entre plusieurs fenêtres.
Gestion des opérations asynchrones
Puppeteer étant basé sur des opérations asynchrones, la bonne gestion de ces tâches est cruciale. Le framework inclut des mécanismes d'attente pour garantir une automatisation fluide. Voici un exemple :
<span class="hljs-keyword">try</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>)
]);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.success-message'</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-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
}
« Async/await est un moyen d'écrire du code asynchrone qui ressemble davantage à du code synchrone traditionnel, souvent plus facile à lire et à comprendre. » - WebScraping.AI [5]
Voici quelques stratégies d’attente utiles :
| Fonction d'attente | Interet | Exemple d'utilisation |
|---|---|---|
| attendre le sélecteur | Attend qu'un élément apparaisse | Utile pour les formulaires ou le contenu dynamique |
| attendre la navigation | Attend qu'une page se charge | Idéal pour les soumissions de formulaires |
| waitForFunction | Attend les conditions personnalisées | Idéal pour vérifier les changements d'état complexes |
| waitForTimeout | Introduit un délai fixe | Utile pour les limites de débit ou les animations |
sbb-itb-23997f1
Exemples de mise en œuvre
Cette section fournit des exemples pratiques illustrant comment Puppeteer peut être utilisé pour des tâches telles que l'extraction de données, l'automatisation de formulaires et la capture efficace de pages Web.
Méthodes d'extraction de données
Puppeteer simplifie la gestion du contenu dynamique et l'extraction de données structurées. Voici un exemple d'extraction de données d'avis à partir d'une page à défilement infini :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrapeReviews</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> reviews = [];
<span class="hljs-comment">// Scroll until no new content loads</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">let</span> lastHeight = <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">while</span> (<span class="hljs-literal">true</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">2000</span>);
<span class="hljs-keyword">let</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 === lastHeight) <span class="hljs-keyword">break</span>;
lastHeight = newHeight;
}
}
<span class="hljs-comment">// Extract review data</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">scrollToBottom</span>();
<span class="hljs-keyword">const</span> reviewElements = <span class="hljs-keyword">await</span> page.$$(<span class="hljs-string">'.review-box'</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> element <span class="hljs-keyword">of</span> reviewElements) {
<span class="hljs-keyword">const</span> review = <span class="hljs-keyword">await</span> element.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> ({
<span class="hljs-attr">text</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.review-text'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">rating</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.rating'</span>).<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">'data-score'</span>),
<span class="hljs-attr">date</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.review-date'</span>).<span class="hljs-property">textContent</span>
}));
reviews.<span class="hljs-title function_">push</span>(review);
}
<span class="hljs-keyword">return</span> reviews;
}
Pour améliorer les performances lors du scraping, tenez compte de ces conseils :
| Optimisation | Mise en œuvre | Bénéfice |
|---|---|---|
| Désactiver les images | page.setRequestInterception(true) | Économise de la bande passante |
| Utiliser le mode furtif | marionnettiste-extra-plugin-furtif | Aide à éviter la détection |
| Ajouter des retards | page.waitForTimeout() | Empêche la limitation du débit |
Passons maintenant à l’automatisation des formulaires.
Étapes d'automatisation des formulaires
L'automatisation des formulaires implique de remplir les champs de saisie, de gérer les boutons et de gérer les erreurs potentielles. Voici comment automatiser un formulaire de connexion avec gestion des erreurs :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleLogin</span>(<span class="hljs-params">username, password</span>) {
<span class="hljs-keyword">try</span> {
<span class="hljs-comment">// Click cookie accept button if visible</span>
<span class="hljs-keyword">const</span> cookieButton = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.cookie-accept'</span>);
<span class="hljs-keyword">if</span> (cookieButton) <span class="hljs-keyword">await</span> cookieButton.<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Fill login form</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, username, { <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> });
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#password'</span>, password, { <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> });
<span class="hljs-comment">// Submit 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">'#login-button'</span>)
]);
<span class="hljs-comment">// Check for error messages</span>
<span class="hljs-keyword">const</span> errorElement = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.error-message-container'</span>);
<span class="hljs-keyword">if</span> (errorElement) {
<span class="hljs-keyword">const</span> errorText = <span class="hljs-keyword">await</span> errorElement.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> el.<span class="hljs-property">textContent</span>);
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`Login failed: <span class="hljs-subst">${errorText}</span>`</span>);
}
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Login automation failed:'</span>, error);
}
}
Outils de capture de page
Pour capturer des pages web, Puppeteer vous permet de configurer les paramètres des captures d'écran et des PDF. Voici un exemple de capture de haute qualité :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">captureWebPage</span>(<span class="hljs-params">url</span>) {
<span class="hljs-comment">// Set viewport for consistent captures</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-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> });
<span class="hljs-comment">// Take full-page screenshot</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">'capture.jpg'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</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">// Generate PDF with custom settings</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'page.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">margin</span>: { <span class="hljs-attr">top</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">right</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">left</span>: <span class="hljs-string">'20px'</span> }
});
}
« Réaliser des captures d'écran de sites web avec Puppeteer peut s'avérer complexe. De nombreux pièges nous attendent. » - Dmytro Krasun, auteur chez ScreenshotOne [6]
Pour de meilleurs résultats, adaptez vos paramètres de capture en fonction de la tâche :
| Type de capture | Best Practice | Cas d'utilisation idéal |
|---|---|---|
| Captures d'écran | Utilisez JPEG pour un traitement plus rapide | Captures Web générales |
| Appliquer le CSS aux médias imprimés | création de documents | |
| Capture d'élément | Sélecteurs spécifiques à la cible | Tester des composants individuels |
Ces exemples montrent comment Puppeteer peut simplifier une variété de tâches d’automatisation.
Fonctionnalités et performances avancées
Puppeteer propose une gamme de techniques avancées pour améliorer vos projets Node.js. Découvrons comment améliorer les tests, gérer plusieurs pages et optimiser les performances.
Tests et gestion des erreurs
Une gestion efficace des erreurs dans Puppeteer simplifie grandement le débogage. En surveillant les processus du navigateur et en enregistrant les requêtes ayant échoué, vous pouvez rapidement identifier et résoudre les problèmes. Voici un exemple de configuration efficace de gestion des erreurs :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">robustPageOperation</span>(<span class="hljs-params">url</span>) {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'domcontentloaded'</span>, <span class="hljs-comment">// Faster than 'networkidle2'</span>
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Monitor failed requests</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'requestfailed'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Failed request: <span class="hljs-subst">${request.url()}</span>`</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Reason: <span class="hljs-subst">${request.failure().errorText}</span>`</span>);
});
<span class="hljs-comment">// Capture a screenshot on error for debugging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'error'</span>, <span class="hljs-title function_">async</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">'Page error:'</span>, error);
});
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
<span class="hljs-keyword">throw</span> error;
}
}
Cela ne résoudra pas tous vos problèmes, mais cela vous permettra d'avoir une vision claire de la situation pour faciliter le diagnostic et la résolution des problèmes. - Joel Griffith, fondateur et PDG de browserless.io [8]
Une fois que vous avez configuré la gestion des erreurs, vous pouvez aller plus loin en gérant plusieurs pages simultanément.
Opérations multipages
Puppeteer vous permet de gérer plusieurs tâches simultanément, ce qui vous fait gagner du temps et améliore votre efficacité. Voici un exemple de gestion de tâches simultanées avec Puppeteer Cluster :
<span class="hljs-keyword">const</span> { <span class="hljs-title class_">Cluster</span> } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-cluster'</span>);
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runParallelOperations</span>(<span class="hljs-params"></span>) {
<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">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">task</span>(<span class="hljs-title function_">async</span> ({ page, <span class="hljs-attr">data</span>: url }) => {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url);
<span class="hljs-comment">// Perform page operations</span>
});
<span class="hljs-comment">// Queue URLs for processing</span>
<span class="hljs-keyword">const</span> urls = [<span class="hljs-string">'url1'</span>, <span class="hljs-string">'url2'</span>, <span class="hljs-string">'url3'</span>];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> url <span class="hljs-keyword">of</span> urls) {
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">queue</span>(url);
}
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">idle</span>();
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">close</span>();
}
La gestion efficace de plusieurs pages est un grand pas en avant, mais l’optimisation de l’utilisation des ressources peut rendre vos opérations encore plus fluides.
Vitesse et gestion des ressources
Pour optimiser les performances de Puppeteer, concentrez-vous sur la réduction des temps de chargement et la gestion efficace des ressources. Voici quelques stratégies :
| Approche d'optimisation | Mise en œuvre | Bénéfice |
|---|---|---|
| Vitesse de chargement de la page | Désactiver les images et le CSS | Temps de chargement plus rapides |
| Utilisation de la mémoire | Jetez les pages rapidement | Empêche les fuites de mémoire |
| Gestion des demandes | Réponses en cache | Réduit la charge du réseau |
| Traitement parallèle | Concurrence contrôlée | Utilisation équilibrée des ressources |
Voici un exemple de la manière dont vous pouvez optimiser les opérations de page :
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">optimizedPageOperation</span>(<span class="hljs-params"></span>) {
<span class="hljs-comment">// Intercept and optimize requests</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> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'stylesheet'</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">// Implement caching</span>
<span class="hljs-keyword">const</span> cache = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>();
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
<span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">ok</span>() && !cache.<span class="hljs-title function_">has</span>(url)) {
cache.<span class="hljs-title function_">set</span>(url, <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">text</span>());
}
});
}
Guide d'intégration Node.js
Découvrez comment intégrer de manière transparente Puppeteer dans vos projets Node.js avec une structure de code propre et maintenable.
Organisation des codes
Structurez vos modules d'automatisation pour plus de clarté et de réutilisation. Voici un exemple de configuration :
<span class="hljs-comment">// automation/browser.js</span>
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">class</span> <span class="hljs-title class_">BrowserManager</span> {
<span class="hljs-keyword">async</span> <span class="hljs-title function_">initialize</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span> = <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">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>;
}
<span class="hljs-keyword">async</span> <span class="hljs-title function_">createPage</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>.<span class="hljs-title function_">newPage</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">return</span> page;
}
<span class="hljs-keyword">async</span> <span class="hljs-title function_">cleanup</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>) {
<span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>.<span class="hljs-title function_">close</span>();
}
}
}
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BrowserManager</span>();
Cette configuration sépare les responsabilités, ce qui rend votre code plus facile à gérer et à faire évoluer.
Intégration de la bibliothèque
Puppeteer peut fonctionner avec d'autres bibliothèques Node.js pour améliorer vos workflows d'automatisation. Voici un exemple d'utilisation. winston pour la journalisation et puppeteer-extra pour les capacités furtives :
<span class="hljs-keyword">const</span> winston = <span class="hljs-built_in">require</span>(<span class="hljs-string">'winston'</span>);
<span class="hljs-keyword">const</span> puppeteerExtra = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
<span class="hljs-comment">// Set up logging with winston</span>
<span class="hljs-keyword">const</span> logger = winston.<span class="hljs-title function_">createLogger</span>({
<span class="hljs-attr">level</span>: <span class="hljs-string">'info'</span>,
<span class="hljs-attr">format</span>: winston.<span class="hljs-property">format</span>.<span class="hljs-title function_">json</span>(),
<span class="hljs-attr">transports</span>: [
<span class="hljs-keyword">new</span> winston.<span class="hljs-property">transports</span>.<span class="hljs-title class_">File</span>({ <span class="hljs-attr">filename</span>: <span class="hljs-string">'automation.log'</span> })
]
});
<span class="hljs-comment">// Configure Puppeteer with stealth mode</span>
puppeteerExtra.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</span>());
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">setupAutomation</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteerExtra.<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">// Log browser console messages</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">message</span> =></span> {
logger.<span class="hljs-title function_">info</span>(<span class="hljs-string">`Browser console: <span class="hljs-subst">${message.text()}</span>`</span>);
});
<span class="hljs-keyword">return</span> { browser, page };
}
« Puppeteer est une bibliothèque Node.js qui fournit une API de haut niveau pour contrôler Chrome ou Chromium via le protocole DevTools. » [2]
En intégrant des fonctionnalités de journalisation et de furtivité, vous pouvez mieux surveiller et gérer vos tâches d'automatisation.
Étapes de déploiement de la production
Pour déployer des scripts Puppeteer, assurez-vous que votre environnement est optimisé pour la stabilité et les performances. Voici les étapes clés :
| Étape de déploiement | Détails d'implémentation | Interet |
|---|---|---|
| Dépendances | Installer les dépendances de Chrome | Assure la fonctionnalité du navigateur |
| Configuration du cache | Configurer le répertoire .cache/puppeteer | Gère les instances du navigateur |
| Limites de ressources | Configurer les contraintes de mémoire et de CPU | Empêche la surcharge du système |
| Erreur de récupération | Mettre en œuvre des mécanismes de redémarrage automatique | Maintient la disponibilité du service |
Utilisez la configuration suivante pour standardiser votre déploiement :
<span class="hljs-keyword">const</span> { join } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
<span class="hljs-attr">cacheDirectory</span>: <span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">'.cache'</span>, <span class="hljs-string">'puppeteer'</span>),
<span class="hljs-attr">executablePath</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">CHROME_PATH</span> || <span class="hljs-literal">null</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>
}
};
Pour optimiser davantage vos scripts :
- Fermez les pages et les instances de navigateur inutilisées dès que possible.
- Utilisez les blocs try/catch pour gérer les erreurs et les enregistrer efficacement.
- Surveillez l’utilisation de la mémoire et les temps de réponse pour éviter les goulots d’étranglement.
- Configurez des en-têtes de sécurité et des contrôles d’accès pour protéger votre environnement.
« En optimisant votre script Puppeteer, vous pouvez garantir un fonctionnement fluide et efficace avec des résultats précis et cohérents. » - ScrapeOps [7]
Résumé
Vue d'ensemble des fonctionnalités
Puppeteer est un outil d'automatisation de navigateur qui excelle dans des tâches telles que le contrôle du navigateur sans tête, l'automatisation des formulaires, les tests d'interface utilisateur, la capture de captures d'écran, la génération de PDF et les fonctionnalités de scraping Web.[1].
Voici un aperçu rapide de ses principales fonctionnalités :
| Fonctionnalité | Capability | Avantages |
|---|---|---|
| Support du navigateur | Chrome/Chromium, Firefox | Fonctionne dans plusieurs environnements |
| Mode d'exécution | Sans tête/Avec tête | Adapté à divers scénarios |
| Performances | Fonctionnement léger | Utilise moins de ressources système |
| Accès API | Protocole DevTools | Offre un contrôle détaillé du navigateur |
Vous pouvez tirer le meilleur parti de ces capacités en suivant des stratégies spécifiques adaptées à vos besoins.
Guide d'implémentation
Pour maximiser le potentiel de Puppeteer, envisagez ces stratégies pour améliorer les performances et la fiabilité :
Gestion des ressources
Le script suivant désactive les ressources inutiles telles que les images, les feuilles de style et les polices pour améliorer la vitesse de chargement des pages :
<span class="hljs-comment">// Optimize page load performance</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_">indexOf</span>(request.<span class="hljs-title function_">resourceType</span>()) !== -<span class="hljs-number">1</span>) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
Prévention des erreurs
Utilisez cet extrait pour vous assurer que votre script attend qu'un élément apparaisse avant d'interagir avec lui :
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#target-element'</span>, {
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>
});
Pour les configurations de production, suivez ces étapes :
- Configuration de l'infrastructure: Installez les dépendances Chrome nécessaires et configurez correctement les répertoires de cache.
- Tweaks performance:Minimisez l’utilisation des ressources en désactivant les ressources inutiles et en activant l’interception des demandes.
- Améliorations de la sécurité: Ajouter le marionnettiste-extra-plugin-furtif plugin pour réduire les risques de détection[7].
- écaillage: Utilisation groupe de marionnettistes pour le traitement parallèle afin de gérer efficacement des charges de travail plus importantes[7].
« En optimisant votre script Puppeteer, vous pouvez garantir un fonctionnement fluide et efficace avec des résultats précis et cohérents. » - ScrapeOps [7]
articles similaires
- Navigateur sans tête Node.js : aperçu des meilleures solutions
- Navigateur sans tête en C# : configuration et exemples de code
- Installation et configuration de Puppeteer : résolution des problèmes courants de dépendance et de Chromium
- Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur
