Web Scraping con Node.js y Puppeteer

Un breve tutorial introductorio a Web Scraping

Web Scraping es la tarea de descargar una página web y extraer algún tipo de información de ella.

Recientemente hice un pequeño proyecto con una placa Arduino con una pantalla LCD adjunta. Usando Johnny-Five, que nos permite programar el Arduino usando Node.js, quería obtener la temperatura medida en la cima de una montaña y mostrarla en la placa Arduino.

solíaTitiriteropara hacer la tarea de raspar. Puppeteer es una gran herramienta creada por Google. Es una biblioteca de Node que podemos usar para controlar una instancia de Chrome sin cabeza.

Esto significa que básicamente usamos Chrome, pero de manera programática.

Hay muchos usos prácticos para Puppeteer, incluida la automatización de pruebas, realizar capturas de pantalla, crear versiones renderizadas del lado del servidor de aplicaciones de una sola página, y más.

Empiece por instalarlo usando

npm install puppeteer

En un archivo Node.js, solicítelo:

const puppeteer = require('puppeteer');

entonces podemos usar ellaunch()método para crear una instancia de navegador:

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

Usamosawait, por lo que debemos envolver esta llamada al método en unfunción asíncrona, el cual nosotrosinvocar inmediatamente.

A continuación, podemos usar elnewPage()método en elbrowserobjeto para conseguir elpageobjeto:

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

A continuación, llamamos algoto()método en elpageobjeto para cargar esa página:

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

Finalmente, podemos obtener la página.contenidollamando alevaluate()método depage. Este método toma una función de devolución de llamada donde podemos agregar el código necesario para recuperar los elementos de la página que necesitamos. La función se ejecuta en el contexto de una página, por lo que tenemos acceso adocumenty todas las API del navegador. Devolvemos un nuevo objeto, y este será el resultado de nuestraevaluate()llamada al método.

Podemos usar elAPI de selectoresy recuperar datos de la página.

(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">//...

}) })()

Vayamos al problema particular que tengo. Esta es la página que alberga la estación meteo, ubicada en la cima de una montaña a 3315m:http://www.meteocentrale.ch/it/europa/svizzera/meteo-corvatsch/details/S067910/

Quiero conseguir eso-9°Ctexto. Usando el inspector del navegador puedo ver que tiene uncolumn-4clase adjunta. No es un nombre de clase ideal, ya que no es significativo y podría cambiar si deciden agregar una nueva columna, pero esto es lo que obtuvimos:

Este es el código completo hasta ahora:

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 ejecutamos este código,resulttendrá este valor:

{
  temperature: '-9°C'
}

o cualquiera que sea la temperatura en este momento.