Guide complet du Marionnettiste pt.1

Puppeteer : l'outil puissant pour l'automatisation du Web

Dans le paysage actuel du développement Web, en évolution rapide, l'automatisation est essentielle, et c'est là qu'intervient Puppeteer. Développée par Google, Puppeteer est une puissante bibliothèque Node.js qui permet aux développeurs de contrôler les navigateurs Chrome à l'aide de JavaScript. Que vous naviguiez sur le Web en mode sans tête pour plus d'efficacité ou dans un navigateur complet pour un retour visuel, Puppeteer facilite plus que jamais l'automatisation de tâches telles que le web scraping, les tests, etc. Avec Puppeteer, ce qui nécessitait autrefois un effort manuel n'est désormais plus qu'un script.

Pourquoi le web scraping ?

Dans un projet récent, j'ai travaillé avec un client qui avait besoin d'une page de destination pour sa communauté de trading forex. Il voulait quelque chose de similaire aux symboles boursiers que vous voyez sur MarketWatch ou Yahoo Finance, mais au lieu d'actions, il voulait des taux de conversion de devises en temps réel pour 1 USD affichés sur le site.

Bien qu'il existe des API disponibles qui pourraient fournir les données (avec des limites d'utilisation et des frais mensuels), j'ai vu une opportunité de créer une solution personnalisée à l'aide de Puppeteer. En investissant du temps au départ, j'ai pu récupérer et afficher les données gratuitement, évitant ainsi à mon client des coûts récurrents.

Site Internet clients : Majesticpips.com

La configuration du marionnettiste simplifiée

Avant de pouvoir commencer à exploiter le Web dans toute sa splendeur, nous devons installer Puppeteer sur notre application.

Comme décrit dans la documentation

Étape 1

Installez la bibliothèque en utilisant votre choix de npm, Yarn ou Pnpm.

• npm je marionnettiste

• fil ajouter un marionnettiste

• pnpm ajouter un marionnettiste

Cela téléchargera la version compatible de Chrome lors de l'installation, ce qui permettra aux débutants de démarrer plus facilement et plus rapidement.

Si vous êtes un développeur plus expérimenté et que vous disposez d'une version Chrome/Chrome spécifique avec laquelle vous aimeriez travailler ; puis installer ces packages

• npm i marionnettiste-core

• fil ajouter un noyau de marionnettiste

• pnpm ajouter un noyau de marionnettiste

serait le meilleur pour vous, le package sera léger car il installe uniquement le marionnettiste et vous laisse décider de la version Chrome.

L'installation de 'puppeteer' est la meilleure option pour un premier testeur. Il simplifie la configuration et garantit que vous disposez d'une version fonctionnelle de Chromium, vous permettant de vous concentrer sur l'écriture de vos scripts.

Étape 2

maintenant sur votre fichier JS, vous souhaitez importer le marionnettiste pour les applications utilisant les systèmes de modules ES (normes ES6) avec les versions de nœud 12 et supérieures.

importer le marionnettiste à partir de « marionnettiste » ; (recommandé)
ou
importer le marionnettiste depuis 'puppeteer-core' ;

ou vous pouvez utiliser la syntaxe require pour le système de modules commonJs pour Node.js qui est également compatible avec les anciennes versions de Node.js.

const marionnettiste = require('marionnettiste');
ou
const marionnettiste = require('puppeteer-core');

Étape 3

Après avoir importé Puppeteer, nous pouvons commencer à écrire les commandes pour effectuer du web scraping. Le code ci-dessous montre ce que vous devrez utiliser.

Nous lançons le navigateur en utilisant ces méthodes fournies par la bibliothèque.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = Cette méthode lance une nouvelle instance de navigateur.

browser.newPage() = Cette méthode crée une nouvelle page (ou onglet) dans l'instance du navigateur.

browser.close() = Cette méthode ferme l'instance du navigateur.

Dans puppeteer.launch(), nous pouvons passer des arguments pour personnaliser le lancement du navigateur selon nos préférences. Nous aborderons cela plus en détail dans la partie 2. Cependant, par défaut, puppeteer.launch() a des valeurs prédéfinies, telles que le mode sans tête étant défini sur true.

Étape 4

Le navigateur a été lancé et nous avons maintenant une page prête à surfer sur le Web. Naviguons vers le site Web où nous récupérerons certaines données.

Pour cet exemple, nous allons récupérer les données d'un site Web de cotations.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

J'ai ajouté wait page.screenshot({ path: 'screenshot.png' }) au mix. Il s’agit d’un excellent outil pour garantir que tout se passe comme prévu. Lorsque ce code s'exécutera, vous disposerez d'un fichier image dans le répertoire de votre projet capturant l'état actuel du site Web que vous grattez. Vous pouvez également ajuster le nom du fichier à votre guise.

Si tout se passe bien, passez à l'étape 5.

Étape 5

Maintenant que notre script prend forme, passons à la partie clé où nous extrayons les données de la page Web. Voici à quoi ressemble notre script jusqu'à présent :

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

Pour vérifier que les données ont été récupérées avec succès, nous pouvons exécuter le nœud "server-file-name" dans la CLI, et les données seront affichées dans la console à l'aide de console.log(quotesScraper);.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }) : C'est là que la magie opère. La méthode d'évaluation nous permet d'exécuter du code JavaScript dans le contexte de la page que nous récupérons. C'est comme si vous ouvriez la console de développement du navigateur et exécutiez le code directement sur la page.

const quotes = document.querySelectorAll(".quote"); : Ici, nous sélectionnons tous les éléments de la page qui correspondent à la classe .quote. Cela nous donne une NodeList d'éléments de citation.

const quotesArray = []; : Nous initialisons un tableau vide pour stocker les guillemets que nous extrayons.

for (const quote of quotes) { ... } : Cette boucle parcourt chaque élément de citation. Pour chacun, nous extrayons le texte de la citation et l'auteur.

quotesArray.push({ quote: texts, author }); : Pour chaque citation, nous créons un objet contenant le texte de la citation et l'auteur, puis poussons cet objet dans le quotesArray.

return quotesArray; : Enfin, nous renvoyons le tableau de citations, qui est ensuite stocké dans quotesScraper dans notre environnement Node.js.

Cette méthode d'extraction de données est puissante car elle vous permet d'interagir avec la page comme le ferait un utilisateur, mais de manière automatisée et programmatique.

Fermeture du navigateur

await browser.close(); : Après avoir récupéré les données, il est important de fermer le navigateur pour libérer des ressources. Cette ligne garantit que l'instance de navigateur que nous avons lancée est correctement arrêtée.

En prévision de la partie 2

Avec ce script, vous avez réussi à récupérer les données d'un site Web à l'aide de Puppeteer. Mais nous ne faisons qu’effleurer la surface de ce qui est possible. Dans la deuxième partie, nous explorerons des techniques plus avancées telles que la gestion du contenu dynamique et utiliserons Express.JS pour créer une fonctionnalité API à partir des données supprimées. Restez à l'écoute alors que nous approfondissons le monde de Puppeteer !