Web Scraping con JavaScript y Node.Js

Robert Sfichi el 16 Ene 2023

Seamos sinceros. A partir de ahora, el volumen de datos de Internet no hará más que crecer. Realmente no hay nada que podamos hacer al respecto. Aquí es donde entran en escena los Web Scrapers.

En el siguiente artículo, le mostraremos cómo construir su propio Web Scraper utilizando JavaScript como lenguaje de programación principal.

Comprender el Web Scraping con JavaScript

Un raspador web es una pieza de software que le ayuda a automatizar el tedioso proceso de recopilar datos útiles de sitios web de terceros. Normalmente, este procedimiento implica hacer una petición a una página web específica, leer el código HTML y descomponer ese código para recopilar algunos datos.

¿Por qué hay que raspar datos?

Supongamos que quieres crear una plataforma de comparación de precios. Necesita los precios de varios artículos de un par de tiendas en línea. Una herramienta de web scraping puede ayudarte a gestionar esto en un par de minutos.

Tal vez esté intentando conseguir nuevos clientes potenciales para su empresa o incluso obtener los precios de vuelo u hotel más favorables. Mientras rastreábamos la web, investigando para este artículo, nos topamos con Brisk Voyage.

Brisk Voyage es una aplicación web que ayuda a sus usuarios a encontrar viajes baratos de última hora para el fin de semana. Utilizando algún tipo de tecnología de raspado web, consiguen comprobar constantemente los precios de vuelos y hoteles. Cuando el raspador de la web encuentra un viaje a bajo precio, el usuario recibe un correo electrónico con las instrucciones de reserva.

¿Para qué sirven los raspadores web?

Los desarrolladores utilizan los raspadores web para todo tipo de obtención de datos, pero los casos más utilizados son los siguientes:

• Análisis del mercado
• Comparación de precios
• Generación de clientes potenciales
• Investigación académica
• Recopilación de conjuntos de datos de entrenamiento y prueba para aprendizaje automático

¿Cuáles son los retos del Web Scraping con JavaScript y Node.Js?

¿Conoces esas pequeñas casillas que te hacen admitir que no eres un robot? Bueno, no siempre consiguen mantener alejados a los robots.

Pero la mayoría de las veces sí lo hacen, y cuando los motores de búsqueda descubren que estás intentando scrapear su sitio web sin permiso, te restringen el acceso.

Otro obstáculo al que se enfrentan los raspadores web son los cambios en la estructura de un sitio web. Un pequeño cambio en la estructura del sitio web puede hacernos perder mucho tiempo. Las herramientas de raspado web requieren actualizaciones frecuentes para adaptarse y realizar el trabajo.

Otro reto al que se enfrentan los raspadores web es el llamado geobloqueo. En función de tu ubicación física, un sitio web puede prohibirte completamente el acceso si las solicitudes proceden de regiones poco fiables.

Para combatir estos desafíos y ayudarle a centrarse en la construcción de su producto hemos creado WebScrapingAPI. Se trata de una API escalable de nivel empresarial y fácil de usar que le ayuda a recopilar y gestionar datos HTML. Estamos obsesionados con la velocidad, utilizamos una red global de proxy rotatorio y ya tenemos más de 10.000 clientes que utilizan nuestros servicios. Si cree que no tiene tiempo para crear un raspador web desde cero, puede probar WebScrapingAPI utilizando la versión gratuita.

APIs: El camino fácil para el web scraping

La mayoría de las aplicaciones web ofrecen una API que permite a los usuarios acceder a sus datos de una forma predeterminada y organizada. El usuario realiza una solicitud a un punto final específico y la aplicación responde con todos los datos que el usuario solicitó específicamente. En la mayoría de los casos, los datos ya estarán formateados como un objeto JSON.

Cuando se utiliza una interfaz de programación de aplicaciones, normalmente no hay que preocuparse por los obstáculos presentados anteriormente. Sea como fuere, las API también pueden recibir actualizaciones. En esta situación, el usuario tiene que estar siempre pendiente de la API que está utilizando y actualizar el código en consecuencia para no perder su funcionalidad.

Además, la documentación de una API es muy importante. Si la funcionalidad de una API no está claramente documentada, el usuario pierde mucho tiempo.

Entender la Web

Una buena comprensión de Internet requiere muchos conocimientos. Veamos una breve introducción a todos los términos que necesitas para entender mejor el web scraping.

HTTP o Protocolo de Transferencia de Hipertexto es la base de cualquier intercambio de datos en la web. Como su nombre indica, HTTP es una convención cliente-servidor. Un cliente HTTP, como un navegador web, abre una conexión con un servidor HTTP y envía un mensaje, como: "Hola, ¿qué tal? ¿Te importaría pasarme esas imágenes?". El servidor suele ofrecer una respuesta, como el código HTML, y cierra la conexión.

Supongamos que necesitas visitar Google. Si escribe la dirección en el navegador y pulsa Intro, el cliente HTTP (el navegador) enviará el siguiente mensaje al servidor:

GET / HTTP/1.1
Host: google.com
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/web\p,*/*;q=0.8
Accept-Encoding: gzip, deflate, sdch, br
Connection: keep-aliveUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit\/537.36 (KHTML, como Gecko) Chrome/56.0.2924.87 Safari/537.36

La primera línea del mensaje contiene el método de petición (GET), la ruta a la que hicimos la petición (en nuestro caso es sólo '/' porque sólo accedimos a www.google.com), la versión del protocolo HTTP, y varias cabeceras, como Connection o User-Agent.

Hablemos de los campos de cabecera más importantes para el proceso:

• Host: El nombre de dominio del servidor al que has accedido después de escribir la dirección en el navegador web y pulsar intro.
• User-Agent: Aquí podemos ver detalles sobre el cliente que hizo la petición. Utilizo un MacBook, como se puede ver en la parte __(Macintosh; Intel Mac OS X 10_11_6)__, y Chrome como navegador web __(Chrome/56.0.2924.87)__.
• Aceptar: Usando esta cabecera, el cliente obliga al servidor a que sólo le envíe cierto tipo de respuestas, como application/JSON o text/plain.
• Referrer: Este campo de cabecera contiene la dirección de la página que realiza la solicitud. Los sitios web utilizan esta cabecera para modificar su contenido en función de la procedencia del usuario.

Una respuesta del servidor puede tener este aspecto:

HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu) Content-Type: text/html; charset=utf-8 
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>The content of the document</body>
</html>

Como puede ver, en la primera línea aparece el código de respuesta HTTP: **200OK. Esto significa que la acción de scraping se ha realizado correctamente.

Ahora bien, si hubiéramos enviado la petición utilizando un navegador web, éste habría analizado el código HTML, obtenido todos los demás activos como CSS, archivos JavaScript, imágenes, y renderizado la versión final de la página web. En los pasos siguientes, vamos a tratar de automatizar este proceso.

Entendiendo el Web Scraping con Node.Js

JavaScript se creó inicialmente para ayudar a sus usuarios a añadir contenido dinámico a los sitios web. Al principio, no podía interactuar directamente con un ordenador o sus datos. Al acceder a un sitio web, el navegador lee el JavaScript y lo convierte en un par de líneas de código que el ordenador puede procesar.

Presentamos Node.Js, la herramienta que ayuda a ejecutar Javascript no sólo del lado del cliente, sino también del lado del servidor. Node.Js puede definirse como un Javascript gratuito y de código abierto para la programación del lado del servidor. Ayuda a sus usuarios a crear y ejecutar rápidamente aplicaciones en red.

const http = require('http');
const port = 8000;
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello world!');
});
server.listen(port, () => {
  console.log(`Server running on port 8000.`);
});

Si no tienes Node.Js instalado, revisa el siguiente paso para seguir las instrucciones. Si no, crea un nuevo archivo index.js y ejecútalo escribiendo en un terminal node index.js, abre un navegador y navega a localhost:8000. Deberías ver la siguiente cadena "¡Hola mundo!".

Herramientas necesarias

Chrome - Por favor, siga la guía de instalación aquí.

• VSCode - Puedes descargarlo desde esta página y seguir las instrucciones para instalarlo en tu dispositivo.
• Node.Js - Antes de empezar a usar Axios, Cheerio, o Puppeteer, necesitamos instalar Node.Js y el Node Package Manager. La forma más fácil de instalar Node.Js y NPM es obtener uno de los instaladores de la fuente oficial de Node.Js y ejecutarlo.

Una vez realizada la instalación, puedes comprobar si Node.Js está instalado ejecutando node -v y npm -v en una ventana de terminal. La versión debe ser superior a v14.15.5. Si tienes problemas con este proceso, hay una forma alternativa de instalar Node.Js.

Ahora, vamos a crear un nuevo proyecto NPM. Crea una nueva carpeta para el proyecto y ejecuta npm init -y. Ahora vamos a instalar las dependencias.

• Axios - una librería JavaScript utilizada para realizar peticiones HTTP desde Node.Js. Ejecute npm install axios en la carpeta recién creada.
• Cheerio - an open-source library that helps us to extract useful information by parsing markup and providing an API for manipulating the resulting data. To use Cheerio you can select tags of an HTML document by making use of selectors. A selector looks like this:  $("div"). This specific selector helps us pick all <div> elements on a page.

Para instalar Cheerio, ejecute npm install cheerio en la carpeta del proyecto.

• Puppeteer - una librería Node.Js que se utiliza para obtener el control de Chrome o Chromium proporcionando una API de alto nivel.

Para usar Puppeteer tienes que instalarlo usando un comando similar: npm install puppeteer. Ten en cuenta que cuando instales este paquete, también instalará una versión reciente de Chromium que está garantizada para ser compatible con tu versión de Puppeteer.

Inspección de fuentes de datos

En primer lugar, tienes que acceder al sitio web que deseas raspar utilizando Chrome o cualquier otro navegador web. Para extraer con éxito los datos que necesitas, tienes que entender la estructura del sitio web.

Inspección selectiva de sitios web

Una vez que hayas conseguido acceder al sitio web, utilízalo como lo haría un usuario normal. Si has accedido al subreddit /r/dundermifflin, puedes echar un vistazo a las publicaciones en la página principal haciendo clic en ellas, echando un vistazo a los comentarios y los upvotes, e incluso ordenar las publicaciones por el número de votos durante un periodo de tiempo específico.

Como puedes ver, el sitio web contiene una lista de entradas, y cada entrada tiene algunos upvotes y algunos comentarios.

Se pueden entender muchos de los datos de un sitio web con sólo mirar su URL. En este caso, https://www.old.reddit.com/r/DunderMifflin representa la URL base, la ruta que nos lleva a la comunidad Reddit de "The Office". Al empezar a ordenar los posts por el número de votos, puedes ver que la URL base está cambiando a https://www.old.reddit.com/r/DunderMifflin/top/?t=year.

Los parámetros de consulta son extensiones de la URL que se utilizan para ayudar a definir el contenido específico o acciones basadas en los datos que se pasan. En nuestro caso, "?t=year" representa el periodo de tiempo seleccionado para el que queremos ver las entradas más votadas.

Mientras sigas en este subreddit específico, la URL base seguirá siendo la misma. Lo único que cambiará son los parámetros de consulta. Podemos verlos como los filtros aplicados a la base de datos para recuperar los datos que queremos. Puedes cambiar el marco temporal para ver sólo las publicaciones más votadas en el último mes o semana simplemente cambiando la URL.

Inspección mediante herramientas de desarrollo

En los siguientes pasos, vas a aprender más sobre cómo se organiza la información en la página. Necesitarás hacer esto para tener una mejor comprensión de lo que realmente podemos raspar de nuestra fuente.

Las herramientas para desarrolladores te ayudan a explorar de forma interactiva el Modelo de Objetos del Documento (DOM) del sitio web. Vamos a utilizar las herramientas para desarrolladores en Chrome, pero puedes utilizar cualquier navegador web con el que te sientas cómodo. En Chrome, puedes abrirlas haciendo clic con el botón derecho del ratón en cualquier parte de la página y seleccionando la opción "Inspeccionar".

En el nuevo menú que aparece en pantalla, seleccione la pestaña "Elementos". Esto presentará la estructura HTML interactiva del sitio web.

Puede interactuar con el sitio web editando su estructura, expandiendo y colapsando elementos, o incluso borrándolos. Tenga en cuenta que estos cambios sólo serán visibles para usted.

Expresiones regulares y su función

Las expresiones regulares, también conocidas como RegEx, te ayudan a crear reglas que te permiten encontrar y manejar diferentes cadenas. Si alguna vez necesitas analizar grandes cantidades de información, dominar el mundo de las expresiones regulares puede ahorrarte mucho tiempo.

When you first start using regex, it seems to be a little too complicated, but the truth is they're pretty easy to use. Let's take the following example: \d. By using this expression, you can easily grab any digit from 0 to 9. Of course, there are a lot more complex ones, like: ^(\(\d{3}\)|^\d{3}[.-]?)?\d{3}[.-]?\d{4}$. This matches a phone number, with or without parentheses around the area code, or with or without dots to separate the numbers.

Como puedes ver, las expresiones regulares son bastante fáciles de usar y pueden ser muy potentes si dedicas el tiempo suficiente a dominarlas.

Comprender Cheerio.js

Después de haber instalado con éxito todas las dependencias presentadas anteriormente e inspeccionado el DOM utilizando las herramientas para desarrolladores, puede pasar al scraping propiamente dicho.

Una cosa que debe tener en cuenta es que si la página que está tratando de scrapear es una SPA (Single Page Application), Cheerio podría no ser la mejor solución. La razón es que Cheerio no puede realmente pensar como un navegador web. Es por eso que en los siguientes pasos vamos a utilizar Puppeteer. Pero hasta entonces, descubramos cuán poderoso es Cheerio.

Para probar la funcionalidad de Cheerio, vamos a intentar recopilar todos los títulos de post en el subreddit presentado anteriormente: /r/dundermifflin.

Vamos a crear un nuevo archivo llamado index.js y escribir o simplemente copiar las siguientes líneas:

const axios = require("axios");
const cheerio = require("cheerio");
const fetchTitles = async () => {
	try {
		const response = await axios.get('https://old.reddit.com/r/DunderMifflin/');
                const html = response.data;
		const $ = cheerio.load(html);
		const titles = [];
		$('div > p.title > a').each((_idx, el) => {
			const title = $(el).text()
			titles.push(title)
		});
		return titles;
	} catch (error) {
		throw error;
	}};
fetchTitles().then((titles) => console.log(titles));

Para entender mejor el código escrito arriba, vamos a explicar lo que hace la función asíncrona fetchTitles() :

Primero, hacemos una solicitud GET al antiguo sitio web de Reddit usando la biblioteca Axios. El resultado de esa petición es cargado por Cheerio en la línea 10. Usando las herramientas para desarrolladores, descubrimos que los elementos que contienen la información deseada son un par de etiquetas de anclaje. Para asegurarnos de que sólo seleccionamos las etiquetas ancla que contienen el título del post, vamos a seleccionar también sus padres usando el siguiente selector: $('div > p.title > a')

Para obtener cada título individualmente y no sólo un montón de letras que no tienen sentido, tenemos que recorrer cada entrada usando la función each(). Por último, si llamamos a text() en cada entrada, obtendremos el título de esa entrada en concreto.

Para ejecutarlo, escribe node index.js en el terminal y pulsa enter. Deberías ver un array que contiene todos los títulos de los posts.

DOM para NodeJS

Como el DOM de una página web no está disponible directamente para Node.Js, podemos utilizar JSDOM. Según su documentación, JSDOM es una implementación puramente JavaScript de muchos estándares web, especialmente los estándares DOM y HTML de WHATWG, para su uso con Node.Js.

En otras palabras, utilizando JSDOM, podemos crear un DOM y manipularlo utilizando los mismos métodos que utilizaríamos para manipular el del navegador web.

JSDOM le permite interactuar con un sitio web que necesita rastrear. Si estás familiarizado con la manipulación del DOM del navegador web, entender la funcionalidad de JSDOM no te supondrá mucho esfuerzo.

Para entender mejor cómo funciona JSDOM, vamos a instalarlo, crear un nuevo archivo index.js, y escribir o copiar el siguiente código:

const { JSDOM } = require('jsdom')
const { document } = new JSDOM(
  '<h1 class="string">Dunder mifflin, the people person\'s paper people!</h2>'
).window
const string = document.querySelector('.string')
console.log(string.innerHTML)
string.textContent = 'Hello world'
console.log(string.innerHTML)

Como puedes ver, JSDOM crea un nuevo Modelo de Objetos del Documento que puede ser manipulado usando el mismo método que usamos para manipular el DOM del navegador. En la línea 3 se crea un nuevo elemento h1 en el DOM. Usando la clase atribuida al encabezado seleccionamos el elemento en la línea 7 y cambiamos su contenido en la línea 10. Puedes ver la diferencia imprimiendo el elemento DOM antes y después del cambio.

Para ejecutarlo, abre un nuevo terminal, escribe node index.js y pulsa intro.

Por supuesto, puedes realizar acciones mucho más complejas utilizando JSDOM, como abrir una página web e interactuar con ella, rellenar formularios y pulsar botones.

Por si sirve de algo JSDOM es una buena opción pero Puppeteer ha ganado mucha tracción en los últimos años.

Entender Puppeteer: cómo desentrañar páginas JavaScript

Con Puppeteer, puede hacer la mayoría de las cosas que puede hacer manualmente en un navegador web, como rellenar un formulario, generar capturas de pantalla de páginas o automatizar pruebas de interfaz de usuario.

Intentemos comprender mejor su funcionalidad tomando una captura de pantalla de la comunidad /r/dundermifflin Reddit. Si ha instalado previamente la dependencia, continúe con el siguiente paso. Si no, ejecuta npm i puppeteer en la carpeta projects. Ahora, crea un nuevo archivo index.js y escribe o copia el siguiente código:

const puppeteer = require('puppeteer')
async function takeScreenshot() {
	try {
		const URL = 'https://www.old.reddit.com/r/dundermifflin/'
		const browser = await puppeteer.launch()
		const page = await browser.newPage()
		await page.goto(URL)
		await page.pdf({ path: 'page.pdf' })
		await page.screenshot({ path: 'screenshot.png' })
		await browser.close()
	} catch (error) {
		console.error(error)
	}
}
takeScreenshot()

Creamos la función asíncrona takeScreenshot().

Como puedes ver, primero se inicia una instancia del navegador utilizando el comando puppeteer.launch(). A continuación creamos una nueva página y llamando a la función goto( ) utilizando la URL como parámetro la página creada anteriormente será llevada a esa URL específica. Los métodos pdf() y screenshot() nos ayudan a crear un nuevo archivo PDF y una imagen que contiene la página web como componente visual.

Por último, la instancia del navegador se cierra en la línea 13. Para ejecutarlo, escribe node index.js en el terminal y pulsa intro. Deberías ver dos nuevos archivos en la carpeta de proyectos llamados page.pdf y screenshot.png.

Alternativa a Titiritero

Si no te sientes cómodo usando Puppeteer, siempre puedes usar una alternativa como NightwatchJS, NightmareJS, o CasperJS.

Tomemos Nightmare como ejemplo. Debido a que utiliza Electrons en lugar de Chromium, el tamaño del paquete es un poco más pequeño. Nightmare puede ser instalado ejecutando el comando npm I nightmare. Intentaremos replicar el proceso anteriormente exitoso de tomar una captura de pantalla de la página usando Nightmare en lugar de Puppeteer.

Creemos un nuevo archivo index.js y escribamos o copiemos el siguiente código:

const Nightmare = require('nightmare')
const nightmare = new Nightmare()
return nightmare.goto('https://www.old.reddit.com/r/dundermifflin')
	.screenshot('./nightmare-screenshot.png')
 	.end()
	.then(() => {
		console.log('Done!')
	})
	.catch((err) => {
		console.error(err)
	})

Como puedes ver en la línea 2 creamos una nueva instancia de Nightmare, apuntamos el navegador a la página web que queremos capturar, tomamos y guardamos la captura de pantalla en la línea 5 y terminamos la sesión de Nightmare en la línea 6.

Para ejecutarlo, escribe node index.js en el terminal y pulsa intro. Deberías ver dos nuevos archivos nightmare-screenshot.png en la carpeta projects.

Principales conclusiones

Si todavía estás aquí, ¡enhorabuena! Tienes toda la información que necesitas para construir tu propio raspador web. Vamos a tomarnos un minuto para resumir lo que has aprendido hasta ahora:

• Un raspador web es un programa que le ayuda a automatizar el tedioso proceso de recopilar datos útiles de sitios web de terceros.
• La gente utiliza los raspadores web para todo tipo de obtención de datos: análisis de mercado, comparación de precios o generación de contactos.
• Los clientes HTTP, como los navegadores web, le ayudan a realizar peticiones a un servidor y aceptar una respuesta.
• JavaScript se creó inicialmente para ayudar a sus usuarios a añadir contenido dinámico a los sitios web. Node.Js es una herramienta que ayuda a Javascript a ejecutarse no solo del lado del cliente, sino también del lado del servidor.
• Cheerio es una biblioteca de código abierto que nos ayuda a extraer información útil analizando HTML y proporcionando una API para manipular los datos resultantes.
• Puppeteer es una librería Node.Js que se utiliza para obtener el control de Chrome o Chromium proporcionando una API de alto nivel. Gracias a ella, puedes hacer la mayoría de las cosas que puedes hacer manualmente en un navegador web, como completar un formulario, generar capturas de pantalla de páginas o automatizar.
• Se puede entender gran parte de los datos de un sitio web con sólo mirar su URL.
• Las herramientas para desarrolladores le ayudan a explorar de forma interactiva el Modelo de Objetos del Documento del sitio web.
• Las expresiones regulares le ayudan a crear reglas que le permiten encontrar y gestionar diferentes cadenas.
• JSDOM es una herramienta que crea un nuevo Modelo de Objetos de Documento que puede ser manipulado utilizando el mismo método que se utiliza para manipular el DOM del navegador.

Esperamos que las instrucciones hayan sido claras y que hayas conseguido toda la información necesaria para tu próximo proyecto. Si todavía sientes que no quieres hacerlo tú mismo, siempre puedes darle una oportunidad a WebScrapingAPI.

Gracias por aguantar hasta el final.