Scraping de sites web pour débutants - Node.js + Puppeteer

10 décembre 2019

Introduction

Comme vous avez peut-être vérifié mon profil, je ne suis pas responsable des aspects techniques de Koopol. Donc, ce poste est un peu sorti de nulle part.

Pourquoi ?

En une phrase, Koopol aide les marques et les revendeurs à automatiser la surveillance des prix en ligne. Par définition, Koopol est une solution SaaS innovante et technique.

Passionné par les innovations et les questions techniques de toute façon, j'ai toujours été un peu frustré de n'être nulle part dans le développement, je veux dire le développement actuel ;-).

C'est pourquoi j'ai décidé de rouvrir mon chapitre sur la programmation et d'améliorer mes compétences techniques, en plus de mes activités principales.

En tant que maître d'ouvrage, je suis convaincu qu'être conscient, comprendre et imaginer les défis techniques auxquels l'équipe technique est confrontée est crucial pour le bon développement de Koopol.

Dans cet article, j'aimerais expliquer comment il peut être facile de commencer à gratter le web. N'ayez pas peur. Même si vous n'êtes pas un développeur, je suis sûr que beaucoup d'entre vous s'intéressent à ce sujet important.

Le grattage du Web est utile dans de nombreux domaines. Dès que vous devez copier/coller des données provenant de plusieurs sources en tant que développeur commercial, vendeur ou même recruteur. Le défi est toujours le même : rassembler les données pertinentes.

Encore une fois, gardez à l'esprit que cet article est consacré à des personnes qui ne sont pas des techniciens, comme moi.

Cela dit, les lignes qui suivent passent en revue la façon dont j'ai appris par moi-même comment commencer à gratter la toile.

Voici un aperçu de ce dont nous allons discuter :

  • Éditeur de code : Code Visual Studio
  • Langage de programmation : JavaScript (Node.js)
  • Web Scraping library : le célèbre marionnettiste

Prêts ? Commençons.

Éditeur de codes : Code Visual Studio

Dans ce tutoriel, j'utiliserai Visual Code Editor. Vous pouvez télécharger la dernière version en cliquant ici : https://code.visualstudio.com/

Voici quelques avantages de l'IDE :

  • Terminal: Visual Studio Code est propriétaire de son terminal. Cela vous évitera de passer constamment de l'IDE au Terminal pour l'exécution du code. C'est efficace.
  • Git intégré: Le code de Visual Studio inclut Git pour suivre chaque changement que vous pourriez effectuer dans votre code. En d'autres termes (pour les débutants), il vous permettra de revenir dans l'historique du code si vous avez fait une erreur et que vous souhaitez revenir en arrière.
  • Sauvegarde automatique: Visual Studio Code enregistre automatiquement votre code. Ainsi, si des erreurs se sont produites lors de la programmation, assurez-vous de récupérer votre code. Ainsi, vous pouvez vous concentrer sur l'essentiel.
  • Extensions: Visual Studio Code vous permet d'ajouter de nombreuses extensions possibles grâce à son importante communauté de développeurs. Par exemple, vous pouvez ajouter des extensions mettant en évidence le code pour vous aider à retrouver votre chemin, etc.

Cet article de blog ne vise pas à promouvoir cette solution. Si vous vous sentez mieux avec une autre solution, utilisez la vôtre !

Partie I - Installer l'environnement

A. Comment installer Node.js sur un Mac ?

Pour utiliser Puppeteer, nous devons préalablement mettre en place notre environnement de développement. Pour utiliser la bibliothèque Puppeteer (JavaScript Library), nous devons mettre en place un environnement Node.js. Ne vous inquiétez pas, cela ne prend que quelques minutes...

Étape 1

Ouvrir le terminal

Étape 2.a : Si vous avez installé Node.js

Entrez le code suivant pour vérifier la version Node.js déjà installée.

nœud -v

Pour mettre à jour votre version de Node.JS : Je vous recommande d'exécuter la ligne de commande suivante :

npm i -g npm -v

Si vous recevez beaucoup d'avertissements de CheckPermissions, vous devrez peut-être exécuter la commande en tant que super-utilisateur en lançant :

sudo npm i -g npm

Le terminal vous demandera probablement de taper votre mot de passe, dans ce cas.

Étape 2.b : Si vous n'avez pas de Node.js déjà installé

  1. Allez sur nodejs.org, et téléchargez la dernière version pour macOS.
  2. Lorsque le téléchargement du fichier est terminé, double-cliquez sur le fichier .pkg pour l'installer. Je vous recommande de télécharger la version LTS dédiée à la plupart des utilisateurs.
Image pour la poste

https://nodejs.org/en/

Image pour la poste

3. Passer en revue l'ensemble du processus d'installation

Image pour la poste

4. Lorsque l'installation est terminée, ouvrez le terminal et entrez le code ci-dessous, pour vérifier que Node.JS est installé correctement et pour vérifier la version.

nœud -v

Si une version est affichée, vous êtes prêt pour la partie suivante.

B. Comment installer la bibliothèque des marionnettistes ?

Puppeteer est une bibliothèque Node qui permet de contrôler et d'automatiser un navigateur Chrome, mais de manière anonyme. Ok, c'est un peu confus, prenons un moment pour détailler un peu cette partie.

Chrome sans tête est expédié en Chrome 59. C'est un moyen de faire fonctionner le navigateur Chrome dans un environnement sans tête. Essentiellement, faire fonctionner Chrome sans chrome ! Il apporte toutes les caractéristiques d'une plate-forme web moderne fourni par Chromium et le moteur de rendu Blink à la ligne de commande.

Pourquoi est-ce utile ?

Un navigateur sans tête est un excellent outil pour les tests automatisés et les environnements de serveur où vous n'avez pas besoin d'un shell visible de l'interface utilisateur. Par exemple, vous pouvez effectuer des tests sur une page web réelle, en créer un PDF ou simplement vérifier comment le navigateur affiche une URL.

Source : https://developers.google.com/web/updates/2017/04/headless-chrome

Maintenant, vous comprenez le but de la bibliothèque Puppeteer.

Donc, comment l'installer au bon endroit. Ouvrez le terminal, choisissez l'endroit que vous souhaitez (par exemple sur votre bureau), et créez un répertoire dédié à notre projet de grattage de sites web :

projet mkdir1

Maintenant, installez le marionnettiste dans ce répertoire project1 en exécutant les commandes suivantes

npm installent un marionnettiste

npm est un gestionnaire de paquets qui est livré automatiquement avec Node.js préalablement installé. En d'autres termes, il gère le processus d'installation du Marionnettiste pour vous, à l'endroit où vous vous trouvez. Ainsi, en exécutant le code mentionné ci-dessus, il téléchargera et regroupera la dernière version de Chromium.

C'est tout.

Maintenant, nous pouvons commencer à gratter la toile.

Partie II - Le grattage du Web

Maintenant, la meilleure partie. Commençons à gratter la toile. Oh, ok, commençons par la première page...

Voici nos objectifs de grattage :

  1. Démarrer le marionnettiste et aller à une page de produit spécifique
  2. Titre, description et prix du produit

Étape 1 - Démarrage

Permis de grattage

Commençons par un exemple très simple : https://www.theslanket.com. Avant de gratter, assurez-vous que le site web ne l'interdit pas dans son fichier robots.txt. Dans ce cas, vérifions : https://www.theslanket.com/robots.txt

# Bonjour les robots et les chenilles !  
# Nous sommes heureux que vous soyez là, mais nous préférerions que vous ne créiez pas des centaines et des centaines de chariots.
User-agent : 
*Autoriser : /cgi-bin/UCEditor
Rejeter : /cgi-bin/UCSearch
Rejeter : /cgi-bin/UCReviewHelpful
Rejeter : /cgi-bin/UCMyAccount
Rejeter : /merchant/signup/signup2Save.do
Refuser : /merchant/signup/signupSave.do
Retarder le départ : 5
# Fichiers Sitemap
Plan du site : https://www.theslanket.com/sitemapsdotorg_index.xml

Ce n'est pas interdit, alors allons-y.

Objectifs

Considérons un produit aléatoire, comme https://www.theslanket.com/shop/the-stroller-slanket/TBS-RUBY-WINE.html

Image pour la poste

J'ai mis en évidence les 5 éléments que nous allons gratter en rouge :

  1. ProductTitle
  2. Prix normal
  3. Prix réduit
  4. ShortDescription
  5. SKU

Etape 2 - Raclage

Créerun fichier Node.js
Créer un nouveau fichier, appelons-le SlanketScraping.js. Enregistrez ce fichier dans le répertoire que vous avez spécifié. Dans notre cas, il sera dans le projet1.

Créer une instance de navigateur

(async () => { 
	const browser = await puppeteer.launch()
})()

(Facultatif) Passez les options via l'objet à puppeteer.launch(). Dans ce cas, passons 2 options au marionnettiste.

Sans tête: cette option consiste à afficher Chromium pendant que le Marionnettiste navigue. Comme défini précédemment, Puppeteer est un navigateur Chrome sans tête. Mais, en tant que débutant, je vous recommande de commencer par afficher (fonctionnant en mode sans tête : faux) pour voir ce qui se passe et déboguer. Vous pouvez toujours le basculer en True, et rien n'apparaîtra alors.

SlowMo: l'option de ralenti permet de ralentir le marionnettiste. Elle peut être utilisée dans de nombreuses situations, mais ici, disons qu'elle sera utilisée pour voir ce que fait le navigateur et pour éviter de perturber le serveur... Nous la réglerons à 250 ms (millisecondes). Par défaut, slowMo sera réglé à 0 ms, donc à pleine vitesse.

(async () => {
	const browser = await puppeteer.launch({headless: false, slowMo: 250})
 })()

Ensuite, nous utiliserons la méthode newPage() pour obtenir l'objet de la page. Si vous travaillez en headless : false, vous verrez apparaître un nouvel onglet.

(async () => {
  const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250,  
})
const page = await browser.newPage()})()
Image pour la poste
Ce que vous devriez voir

Ensuite, nous allons passer l'URL que nous voulons gratter. Pour ce faire, appelons la méthode goto() de l'objet page pour charger la page.

const puppeteer = require('puppeteer');
(async () => {const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250,
  })
  const page = await browser.newPage()
  await page.goto('https://www.theslanket.com/shop/the-stroller-slanket/TBS-RUBY-WINE.html')   
  browser.close()})()
 

Ici, nous avons lancé le marionnettiste, et nous sommes allés au produit spécifique que nous voulons gratter, puis nous avons fermé le navigateur. À ce stade, nous n'avons rien gratté mais seulement navigué.

Retirons les 5 éléments que nous avons décrits précédemment.

Obtenir le contenu de la page

Lorsqu'une page est chargée avec une URL, nous utiliserons la méthode evaluate() pour obtenir le contenu de la page.

const puppeteer = require('puppeteer');
(async () => {const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, 
  })   
  const page = await browser.newPage()   
  await page.goto('https://www.theslanket.com/shop/the-stroller-slanket/TBS-RUBY-WINE.html')
  const results = await page.evaluate(() =>{
    //... elements to scrape
  })browser.close()
})()

Dans la méthode evaluate(), nous ciblerons l'élément que nous voulons gratter, en utilisant des sélecteurs spécifiques.

Il est parfois difficile de trouver les bons sélecteurs. Si vous avez besoin de plus d'informations sur les sélecteurs, je vous recommande de lire la documentation suivante à ce sujet. Faites-moi confiance, vous en aurez besoin.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Retour à notre sélecteur. La meilleure pratique, que je recommande, est d'utiliser la console Google Chrome pour définir et tester vos sélecteurs. Pour ouvrir la console :

  • ouvrir l'URLciblée dans Chrome
  • ctrl+clic sur un élément spécifique que vous souhaitez supprimer, commençons par le titre du produit, et
  • Sélectionner l'inspection

Un panneau noir appelé Éléments s'ouvre sur le côté droit de votre page, à la bonne position de l'élément sur lequel vous cliquez.

Image pour la poste

Google Chrome > Inspecter l'élément en cliquant sur le titre

Image pour la poste

Ici, notre élément est inclus dans

Image pour la poste

Le titre que nous recherchons est : "Lapoussette - Vin de rubis", inclus dans le

.

Essayons donc de le sélectionner directement dans la console Google Chrome. À côté du panneau Éléments, cliquez sur l'onglet Console.

document.querySelector('.text').innerText

La réponse est vide : "“”.

Image pour la poste

Damné, nous avons échoué.

Essayons la div parentale, comme suit

document.querySelector('.widget.widget-itemtitle ').innerText

Image pour la poste

Ce sélecteur travaille donc à nous fournir le ProductTitle du produit.

Ajoutons le sélecteur dans notre code pour voir si Puppeteer peut le gratter.

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
      headless: false,
      slowMo: 250,
   })
   const page = await browser.newPage()
   await page.goto('https://www.theslanket.com/shop/the-stroller-slanket/TBS-RUBY-WINE.html')
const results = await page.evaluate(() =>{
//our new selector
   return document.querySelector('.widget.widget-itemtitle ').innerText;
})
//log results at the screen
console.log(results)
browser.close()
})()

Dans le code de Visual Studio, dans le répertoire de votre projet1, lancez :

node SlanketScraping.js

node SlanketScraping.js

Visual Studio Code devrait enregistrer

La poussette - Le vin de rubis

Ajoutons les autres éléments en suivant la même méthodologie que celle utilisée pour gratter le titre. Comme nous raclons plusieurs éléments, nous définirons un objet contenant les cinq éléments.

Voici les 5 éléments du sélecteur :

ProductTitle : document.querySelector('.widget.widget-itemtitle ').innerText,
Prix normal : document.querySelector('.price').innerText,
Prix réduit : document.querySelector('.price.sale').innerText,
ShortDescription : document.querySelector('.widget-itemdescription-excerpt').innerText,
Référence : document.querySelector('.widget.widget-itemsku ').innerText

Code complet

Voici le code complet de notre exemple.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
      headless: false,
      slowMo: 250,
   })
  const page = await browser.newPage()
  await page.goto('https://www.theslanket.com/shop/the-stroller-slanket/TBS-RUBY-WINE.html')
  const results = await page.evaluate(() =>{  
   return ({
     ProductTitle: document.querySelector('.widget.widget-itemtitle ').innerText,
     NormalPrice: document.querySelector('.price').innerText,
     DiscountedPrice: document.querySelector('.price.sale').innerText,
     ShortDescription: document.querySelector('.widget-itemdescription-excerpt').innerText,
     SKU: document.querySelector('.widget.widget-itemsku ').innerText,
   })
  })
  //log results at the screen
  console.log(results)
  browser.close()
})()

À propos de Koopol

Cet article avait pour but de vous présenter un tout premier et simple exercice de grattage avec Puppeteer.

À l'avenir, je publierai des missions de grattage de sites web plus "complexes".

J'espère que vous avez appris quelques trucs, et que cela vous aidera à développer et à améliorer vos compétences en matière de grattage de sites web.

Au fait...

À Koopol, nous voulons que tout le monde puisse gratter. Comme nous l'avons déjà dit, il peut être utile dans divers projets. Donc, si cela vous intéresse, quel que soit votre emploi actuel, n'hésitez jamais à nous envoyer un e-mail (info@koopol.com). Nous serons heureux de vous rencontrer et, qui sait, peut-être de travailler ensemble ?

Grattez en toute sécurité.