Puppeteer est une bibliothèque Node.js qui offre une API permettant de contrôler Chrome ou Chromium de manière automatique. Grâce à Puppeteer, vous pouvez facilement automatiser des tâches telles que la génération de captures d’écran, le scraping de données, ou encore les tests de performance sur des pages web.

Dans cet article, nous allons donc explorer les bases de Puppeteer, découvrir ses principales fonctionnalités, et illustrer cela avec des exemples de code pour mieux comprendre comment cet outil peut simplifier vos projets d’automatisation web.

Qu’est-ce que Puppeteer ?

Avant tout, il est important de comprendre que Puppeteer est une bibliothèque maintenue par l’équipe de Google Chrome. Cette bibliothèque permet de contrôler Chrome ou Chromium via le protocole DevTools, ce qui vous offre la possibilité d’interagir avec le navigateur de manière programmée pour accomplir de nombreuses tâches. Que ce soit pour tester des pages web, prendre des captures d’écran, ou extraire des données, Puppeteer se révèle être un outil incroyablement polyvalent.

L’une des caractéristiques majeures de Puppeteer est qu’il fonctionne en mode headless, c’est-à-dire sans interface utilisateur visible. Cela le rend non seulement plus léger mais aussi plus performant pour l’automatisation. Toutefois, si vous souhaitez visualiser le navigateur pendant que vos scripts s’exécutent, vous avez également la possibilité de le lancer en mode non-headless.

Pourquoi utiliser Puppeteer ?

Il existe de nombreuses raisons d’adopter Puppeteer pour vos projets, et chacune d’entre elles mérite d’être explorée. Voici quelques-uns des cas d’utilisation les plus courants :

  1. Scraping Web : Premièrement, Puppeteer est souvent utilisé pour extraire des informations de pages web de manière fiable. Contrairement à d’autres solutions, il permet de contourner les mécanismes anti-scraping basés sur du contenu généré dynamiquement par JavaScript.

  2. Tests End-to-End : Deuxièmement, vous pouvez automatiser des tests d’interface utilisateur pour vos applications web, en simulant des interactions utilisateurs réelles. Cela garantit que votre site fonctionne correctement et sans erreur, même dans des scénarios complexes.

  3. Génération de PDF et Captures d’écran : De plus, Puppeteer permet de créer des captures d’écran ou de convertir des pages web en PDF, ce qui peut s’avérer très utile pour générer des rapports ou des documents de manière automatisée.

  4. Contrôle Programmé : Enfin, Puppeteer offre la possibilité de simuler diverses interactions utilisateurs, telles que le remplissage de formulaires, la navigation entre les pages, ou encore les clics sur des éléments spécifiques.

Comment Installer Puppeteer ?

L’installation de Puppeteer est assez simple, surtout si vous travaillez déjà avec Node.js. Si vous n’avez pas encore Node.js installé sur votre machine, vous pouvez le télécharger ici. Ensuite, pour installer Puppeteer, vous pouvez utiliser soit npm, soit yarn. Voici comment procéder :

npm install puppeteer

Ou bien avec Yarn :

yarn add puppeteer

Une fois Puppeteer installé, vous pouvez commencer à automatiser vos tâches en toute simplicité.

Prendre une Capture d’écran avec Puppeteer

Commençons par un exemple simple mais très courant : la prise de captures d’écran. Imaginons que vous souhaitiez capturer l’écran de la page d’accueil de Google. Avec Puppeteer, cela devient extrêmement facile :

const puppeteer = require('puppeteer');(async () => {
// Lance Chrome ou Chromium en mode headless
const browser = await puppeteer.launch();
// Ouvre une nouvelle page
const page = await browser.newPage();
// Navigue vers l'URL de Google
await page.goto('https://www.google.com');
// Prend une capture d'écran et l'enregistre dans un fichier
await page.screenshot({ path: 'google.png' });
// Ferme le navigateur
await browser.close();
})();

Dans ce cas, nous avons d’abord lancé un navigateur en mode headless, puis nous avons chargé la page d’accueil de Google, et enfin, pris une capture d’écran sauvegardée sous le nom google.png.

Scraping de Données avec Puppeteer

Parlons maintenant de l’un des usages les plus populaires de Puppeteer : le scraping de données. Grâce à Puppeteer, vous pouvez extraire des informations de n’importe quelle page web. Par exemple, supposons que nous souhaitions obtenir les titres des articles présents sur une page. Voici un exemple de code qui réalise cette tâche :

const puppeteer = require('puppeteer');(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Navigue vers la page d'articles
await page.goto('https://news.ycombinator.com/');
// Scrape les titres des articles
const titles = await page.evaluate(() => {
return Array.from(document.querySelectorAll('.storylink')).map(el => el.textContent);
});
console.log(titles);
await browser.close();
})();

Dans cet exemple, nous avons chargé la page d’accueil de Hacker News. Ensuite, nous utilisons l’API evaluate de Puppeteer pour exécuter du JavaScript dans le contexte de la page afin de récupérer les titres des articles. Les titres sont alors affichés dans la console.

Remplir et Soumettre un Formulaire avec Puppeteer

Continuons avec un autre exemple pratique : le remplissage et la soumission de formulaires. Supposons que vous souhaitiez automatiser la connexion à un site web. Voici comment vous pourriez procéder avec Puppeteer :

const puppeteer = require('puppeteer');(async () => {
const browser = await puppeteer.launch({ headless: false });  // Lancement en mode non-headless
const page = await browser.newPage();
// Navigue vers une page avec un formulaire de connexion
await page.goto('https://example.com/login');
// Remplit le formulaire
await page.type('#username', 'myUsername');
await page.type('#password', 'mySuperSecretPassword');
// Soumet le formulaire
await page.click('#loginButton');
// Attente de la navigation après la soumission
await page.waitForNavigation();
console.log('Connexion réussie !');
await browser.close();
})();

Cet exemple montre comment Puppeteer peut être utilisé pour simuler une connexion sur un site web. Nous remplissons les champs username et password, puis nous cliquons sur le bouton de soumission, tout en attendant la redirection après la connexion.

Générer un PDF d’une Page Web avec Puppeteer

Enfin, Puppeteer est également très souvent utilisé pour générer des fichiers PDF à partir de pages web. Voici comment convertir une page en PDF au format A4 :

const puppeteer = require('puppeteer');(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Charge la page que vous souhaitez transformer en PDF
await page.goto('https://example.com');
// Génère un fichier PDF de la page
await page.pdf({ path: 'example.pdf', format: 'A4' });
await browser.close();
})();

Grâce à cet exemple, vous pouvez convertir une page web en fichier PDF en utilisant Puppeteer. Le fichier généré sera au format A4 par défaut, mais vous pouvez ajuster les paramètres selon vos besoins.

Conclusion

En conclusion, Puppeteer est un outil extrêmement puissant et polyvalent qui simplifie l’automatisation des tâches dans un navigateur. Que vous cherchiez à effectuer du scraping de données, à automatiser des tests d’interface utilisateur ou encore à générer des documents tels que des PDF ou des captures d’écran, Puppeteer vous offre une API robuste et flexible.

Grâce à sa compatibilité avec Node.js et à sa grande souplesse, Puppeteer est devenu un outil incontournable pour les développeurs et les équipes cherchant à automatiser des processus répétitifs dans le navigateur. Alors, n’hésitez plus à l’essayer !

Pour en savoir plus, consultez le site officiel de Puppeteer ici et commencez à l’intégrer dans vos projets dès aujourd’hui !

Newsletter

Newsletter

Restez à jour avec les derniers tutoriels, astuces et offres exclusives sur les langages et outils du web. Recevez un seul email par mois, sans spam, juste du contenu de qualité pour booster vos compétences. Inscrivez-vous maintenant.

 

1 abonnement = 1 formation offerte

 

Confirmez votre inscription via l'email qui vient de vous être envoyé. Vérifiez vos spams.