Grattez la toile avec le marionnettiste !

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à que Puppeteer entre en jeu. 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 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 à gratter le Web dans toute sa splendeur, nous devons installer Puppeteer sur notre application.

Comme décrit sur la documentation

Étape 1

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

• npm je marionnettiste

• fil ajouter 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

ce serait mieux 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 les premiers testeurs. 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 depuis '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 citations.

 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 aurez 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(() => { ... }): This is where the magic happens. The evaluate method allows us to run JavaScript code within the context of the page we're scraping. It's as if you're opening the browser's developer console and running the code directly on the page.

const quotes = document.querySelectorAll(".quote");: Here, we're selecting all elements on the page that match the .quote class. This gives us a NodeList of quote elements.

const quotesArray = [];: We initialize an empty array to store the quotes we extract.

for (const quote of quotes) { ... }: This loop iterates over each quote element. For each one, we extract the text of the quote and the author.

quotesArray.push({ quote: texts, author });: For each quote, we create an object containing the quote text and the author, then push this object into the quotesArray.

return quotesArray;: Finally, we return the array of quotes, which is then stored in quotesScraper in our Node.js environment.

This method of extracting data is powerful because it allows you to interact with the page just like a user would, but in an automated and programmatic way.

Closing the Browser

await browser.close();: After scraping the data, it's important to close the browser to free up resources. This line ensures that the browser instance we launched is properly shut down.

Looking Ahead to Part 2

With this script, you've successfully scraped data from a website using Puppeteer. But we're just scratching the surface of what's possible. In Part 2, we’ll explore more advanced techniques like handling dynamic content and use Express.JS to create API functionality of scrapped data. Stay tuned as we delve deeper into the world of Puppeteer!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!