Web Scraping à l'aide de Node.js et Puppeteer

Un court didacticiel d'introduction au Web Scraping

Web Scraping consiste à télécharger une page Web et à en extraire des informations.

J'ai récemment fait un petit projet avec une carte Arduino avec un écran LCD attaché. En utilisant Johnny-Five, qui nous permet de programmer l'Arduino à l'aide de Node.js, je voulais récupérer la température mesurée au sommet d'une montagne, et l'afficher sur la carte Arduino.

j'ai utiliséMarionnettistepour faire la tâche de grattage. Puppeteer est un excellent outil conçu par Google. C'est une bibliothèque de nœuds que nous pouvons utiliser pour contrôler une instance Chrome sans tête.

Cela signifie que nous utilisons essentiellement Chrome, mais par programmation.

Il existe de nombreuses utilisations pratiques de Puppeteer, notamment l'automatisation des tests, la création de captures d'écran, la création de versions rendues côté serveur d'applications à une seule page, etc.

Commencez par l'installer en utilisant

npm install puppeteer

Dans un fichier Node.js, exigez-le:

const puppeteer = require('puppeteer');

alors nous pouvons utiliser lelaunch()méthode pour créer une instance de navigateur:

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

Nous utilisonsawait, et nous devons donc envelopper cet appel de méthode dans unfonction asynchrone, que nousinvoquer immédiatement.

Ensuite, nous pouvons utiliser lenewPage()méthode sur lebrowserobjet pour obtenir lepageobjet:

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

Ensuite, nous appelons legoto()méthode sur lepageobjet pour charger cette page:

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://website.com')
})()

Enfin, nous pouvons obtenir la pageteneurappeler leevaluate()méthode depage. Cette méthode prend une fonction de rappel où nous pouvons ajouter le code nécessaire pour récupérer les éléments de la page dont nous avons besoin. La fonction est exécutée dans le contexte d'une page, nous avons donc accès àdocumentet toutes les API du navigateur. Nous retournons un nouvel objet, et ce sera le résultat de notreevaluate()appel de méthode.

Nous pouvons utiliser leAPI des sélecteurset récupérez les données de la page.

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://website.com')
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">result</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">page</span>.<span style="color:#a6e22e">evaluate</span>(() =&gt; {
<span style="color:#75715e">//...

}) })()

Passons au problème particulier que j'ai. Voici la page qui héberge la station météo, située au sommet d'une montagne à 3315m:http://www.meteocentrale.ch/it/europa/svizzera/meteo-corvatsch/details/S067910/

Je veux avoir ça-9°Ctexte. En utilisant l'inspecteur de navigateur, je peux voir qu'il a uncolumn-4classe attachée. Ce n'est pas un nom de classe idéal, car il n'a pas de sens et pourrait changer s'ils décident d'ajouter une nouvelle colonne, mais voici ce que nous avons obtenu:

Voici le code complet jusqu'à présent:

const puppeteer = require('puppeteer');

(async () => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto(http://www.meteocentrale.ch/it/europa/svizzera/meteo-corvatsch/details/S067910/)

<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">result</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">page</span>.<span style="color:#a6e22e">evaluate</span>(() =&gt; {
  <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">temperature</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">'.column-4'</span>).<span style="color:#a6e22e">innerText</span>
<span style="color:#66d9ef">return</span> {
    <span style="color:#a6e22e">temperature</span>
  }

})

console.log(result)

browser.close() })()

Si nous exécutons ce code,resultaura cette valeur:

{
  temperature: '-9°C'
}

ou quelle que soit la température actuelle.