.png)
.svg){kind=icon}
Agents IA prêts à l'emploi sont disponibles sur Latenode 🚀
Marionnettiste est une Node.js bibliothèque 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 :
npm install puppeteer, et il est fourni avec une version compatible de Chrome.import puppeteer from 'puppeteer';
async function runAutomation() {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
}
runAutomation();
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.
Suivez ces étapes pour configurer Puppeteer dans Node.js et tout préparer pour l’automatisation.
Pour commencer, vous aurez besoin de trois composants principaux :
| Composant | Objectif | Vérifier la commande |
|---|---|---|
| Node.js | Environnement d'exécution | node --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é. .
Voici comment créer un nouveau projet Puppeteer :
mkdir puppeteer-project pour créer un dossier de projet.cd puppeteer-project && npm init -y.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. .
Voici un modèle de script Puppeteer simple :
import puppeteer from 'puppeteer';
async function runAutomation() {
const browser = await puppeteer.launch({
headless: true
});
const page = await browser.newPage();
try {
await page.setViewport({ width: 1280, height: 800 });
await page.goto('https://example.com');
// Add your actions here
} finally {
await browser.close();
}
}
runAutomation();
Meilleures pratiques pour la rédaction de scripts de marionnettistes :
page.waitForSelector() pour s'assurer que les éléments sont entièrement chargés avant d'interagir avec eux .try/finally blocs pour gérer les erreurs et garantir que le navigateur se ferme correctement.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 mes export dans vos scripts . Avec cette configuration en place, vous êtes prêt à plonger dans les fonctionnalités avancées de Puppeteer dans les sections suivantes.
Décomposons les principales fonctionnalités de Puppeteer pour une automatisation efficace 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 :
const browser = await puppeteer.launch({
headless: true,
defaultViewport: { width: 1920, height: 1080 },
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
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 :
// Wait for the email input field to load and type an email
const emailInput = await page.waitForSelector('input[type="email"]');
await emailInput.type('[email protected]');
// Wait for the submit button to appear and click it
const submitButton = await page.waitForSelector('button[type="submit"]');
await submitButton.click();
Vous pouvez effectuer diverses actions, telles que :
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 :
try {
await Promise.all([
page.waitForNavigation(),
page.click('#submit-button')
]);
await page.waitForSelector('.success-message', {
visible: true,
timeout: 5000
});
} catch (error) {
console.error('Navigation failed:', 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
Voici quelques stratégies d’attente utiles :
| Fonction d'attente | Objectif | 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 |
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.
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 :
async function scrapeReviews() {
const reviews = [];
// Scroll until no new content loads
async function scrollToBottom() {
let lastHeight = await page.evaluate('document.body.scrollHeight');
while (true) {
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
await page.waitForTimeout(2000);
let newHeight = await page.evaluate('document.body.scrollHeight');
if (newHeight === lastHeight) break;
lastHeight = newHeight;
}
}
// Extract review data
await scrollToBottom();
const reviewElements = await page.$$('.review-box');
for (const element of reviewElements) {
const review = await element.evaluate(el => ({
text: el.querySelector('.review-text').textContent,
rating: el.querySelector('.rating').getAttribute('data-score'),
date: el.querySelector('.review-date').textContent
}));
reviews.push(review);
}
return 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 | puppeteer-extra-plugin-stealth |
Aide à éviter la détection |
| Ajouter des retards | page.waitForTimeout() |
Empêche la limitation du débit |
Passons maintenant à l’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 :
async function handleLogin(username, password) {
try {
// Click cookie accept button if visible
const cookieButton = await page.$('.cookie-accept');
if (cookieButton) await cookieButton.click();
// Fill login form
await page.type('#username', username, { delay: 100 });
await page.type('#password', password, { delay: 100 });
// Submit and wait for navigation
await Promise.all([
page.waitForNavigation(),
page.click('#login-button')
]);
// Check for error messages
const errorElement = await page.$('.error-message-container');
if (errorElement) {
const errorText = await errorElement.evaluate(el => el.textContent);
throw new Error(`Login failed: ${errorText}`);
}
} catch (error) {
console.error('Login automation failed:', error);
}
}
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é :
async function captureWebPage(url) {
// Set viewport for consistent captures
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 2
});
await page.goto(url, { waitUntil: 'networkidle0' });
// Take full-page screenshot
await page.screenshot({
path: 'capture.jpg',
fullPage: true,
quality: 90,
type: 'jpeg'
});
// Generate PDF with custom settings
await page.pdf({
path: 'page.pdf',
format: 'A4',
printBackground: true,
margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
});
}
« 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
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.
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.
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 :
async function robustPageOperation(url) {
try {
await page.goto(url, {
waitUntil: 'domcontentloaded', // Faster than 'networkidle2'
timeout: 30000
});
// Monitor failed requests
page.on('requestfailed', request => {
console.error(`Failed request: ${request.url()}`);
console.error(`Reason: ${request.failure().errorText}`);
});
// Capture a screenshot on error for debugging
page.on('error', async (error) => {
await page.screenshot({
path: `error-${Date.now()}.png`,
fullPage: true
});
console.error('Page error:', error);
});
} catch (error) {
console.error('Navigation failed:', error);
throw 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
Une fois que vous avez configuré la gestion des erreurs, vous pouvez aller plus loin en gérant plusieurs pages simultanément.
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 :
const { Cluster } = require('puppeteer-cluster');
async function runParallelOperations() {
const cluster = await Cluster.launch({
concurrency: Cluster.CONCURRENCY_CONTEXT,
maxConcurrency: 4,
monitor: true,
timeout: 30000
});
await cluster.task(async ({ page, data: url }) => {
await page.goto(url);
// Perform page operations
});
// Queue URLs for processing
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
await cluster.queue(url);
}
await cluster.idle();
await cluster.close();
}
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.
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 :
async function optimizedPageOperation() {
// Intercept and optimize requests
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'image' || request.resourceType() === 'stylesheet') {
request.abort();
} else {
request.continue();
}
});
// Implement caching
const cache = new Map();
page.on('response', async response => {
const url = response.url();
if (response.ok() && !cache.has(url)) {
cache.set(url, await response.text());
}
});
}
Découvrez comment intégrer de manière transparente Puppeteer dans vos projets Node.js avec une structure de code propre et maintenable.
Structurez vos modules d'automatisation pour plus de clarté et de réutilisation. Voici un exemple de configuration :
// automation/browser.js
const puppeteer = require('puppeteer');
class BrowserManager {
async initialize() {
this.browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
return this.browser;
}
async createPage() {
const page = await this.browser.newPage();
await page.setDefaultNavigationTimeout(30000);
return page;
}
async cleanup() {
if (this.browser) {
await this.browser.close();
}
}
}
module.exports = new BrowserManager();
Cette configuration sépare les responsabilités, ce qui rend votre code plus facile à gérer et à faire évoluer.
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 :
const winston = require('winston');
const puppeteerExtra = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
// Set up logging with winston
const logger = winston.createLogger({
level: 'info',
format: winston.format.json(),
transports: [
new winston.transports.File({ filename: 'automation.log' })
]
});
// Configure Puppeteer with stealth mode
puppeteerExtra.use(StealthPlugin());
async function setupAutomation() {
const browser = await puppeteerExtra.launch();
const page = await browser.newPage();
// Log browser console messages
page.on('console', message => {
logger.info(`Browser console: ${message.text()}`);
});
return { 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. »
En intégrant des fonctionnalités de journalisation et de furtivité, vous pouvez mieux surveiller et gérer vos tâches d'automatisation.
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 | Objectif |
|---|---|---|
| Dépendances | Installer les dépendances de Chrome | Assure la fonctionnalité du navigateur |
| Configuration du cache | Mettre en place .cache/puppeteer annuaire |
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 :
const { join } = require('path');
module.exports = {
cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
executablePath: process.env.CHROME_PATH || null,
defaultViewport: {
width: 1920,
height: 1080
}
};
Pour optimiser davantage vos scripts :
« En optimisant votre script Puppeteer, vous pouvez garantir un fonctionnement fluide et efficace avec des résultats précis et cohérents. » - ScrapeOps
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. .
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.
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 :
// Optimize page load performance
await page.setRequestInterception(true);
page.on('request', request => {
if (['image', 'stylesheet', 'font'].indexOf(request.resourceType()) !== -1) {
request.abort();
} else {
request.continue();
}
});
Prévention des erreurs
Utilisez cet extrait pour vous assurer que votre script attend qu'un élément apparaisse avant d'interagir avec lui :
await page.waitForSelector('#target-element', {
timeout: 5000,
visible: true
});
Pour les configurations de production, suivez ces étapes :
« En optimisant votre script Puppeteer, vous pouvez garantir un fonctionnement fluide et efficace avec des résultats précis et cohérents. » - ScrapeOps
Échanger des applications
Application 1
Application 2
Étape 1 : Choisir un déclencheur
Étape 2 : Choisissez une action
Aucune carte de crédit n'est nécessaire
Sans restriction
