Guía completa del titiritero parte 1

Titiritero: la poderosa herramienta para la automatización web

En el acelerado panorama actual del desarrollo web, la automatización es clave, y ahí es donde entra en juego Puppeteer. Desarrollado por Google, Puppeteer es una potente biblioteca Node.js que permite a los desarrolladores controlar los navegadores Chrome mediante JavaScript. Ya sea que esté navegando por la web en modo sin cabeza para mayor eficiencia o en un navegador completo para obtener información visual, Puppeteer hace que sea más fácil que nunca automatizar tareas como web scraping, pruebas y más. Con Puppeteer, lo que antes requería esfuerzo manual ahora está a solo un guión de distancia.

¿Por qué hacer web scraping?

En un proyecto reciente, trabajé con un cliente que necesitaba una página de destino para su comunidad de comercio de divisas. Quería algo similar a los tickers de acciones que se ven en MarketWatch o Yahoo Finance, pero en lugar de acciones, quería tasas de conversión de moneda en tiempo real por $1 USD que se mostraran en todo el sitio.

Si bien hay API disponibles que podrían proporcionar los datos (con límites de uso y tarifas mensuales), vi una oportunidad de crear una solución personalizada con Puppeteer. Al invertir algo de tiempo por adelantado, pude extraer y mostrar los datos de forma gratuita, lo que en última instancia ahorró a mi cliente costos recurrentes.

Sitio web del cliente: Majesticpips.com

Configurar el titiritero de forma sencilla

Antes de que podamos comenzar a explorar la web en todo su esplendor, debemos instalar titiritero en nuestra aplicación.

Tal como se describe en los documentos

Paso 1

Instale la biblioteca usando su elección de npm, hilo o pnpm.

• npm yo titiritero

• lana agregar titiritero

• pnpm agregar titiritero

Esto descargará la versión compatible de Chrome durante la instalación, lo que es más fácil para los principiantes poner todo en funcionamiento rápidamente.

Si eres un desarrollador más experimentado y tienes una versión específica de Chrome/Chrome con la que te gustaría trabajar; luego instalando estos paquetes

• npm en titiritero-core

• hilo agregar núcleo de titiritero

• pnpm agregar titiritero-core

sería mejor para usted, el paquete será liviano ya que solo instala el titiritero y deja que usted decida la versión de Chrome.

Instalar 'puppeteer' es la mejor opción para quienes realizan pruebas por primera vez. Simplifica la configuración y garantiza que tengas una versión funcional de Chromium, lo que te permitirá concentrarte en escribir tus scripts.

Paso 2

ahora en su archivo JS, querrá importar el titiritero para aplicaciones que utilizan sistemas de módulos ES (estándares ES6) con versiones de nodo 12 y superiores.

importar titiritero desde 'titiritero'; (recomendado)
o
importar titiritero desde 'puppeteer-core';

o puede usar la sintaxis requerida para el sistema de módulos commonJs para Node.js que también es compatible con versiones anteriores de Node.js.

const titiritero = require('titiritero');
o
const titiritero = require('titiritero-núcleo');

Paso 3

Después de importar Puppeteer, podemos comenzar a escribir los comandos para realizar el web scraping. El siguiente código muestra lo que necesitarás usar.

Iniciamos el navegador utilizando estos métodos proporcionados por la biblioteca.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = Este método lanza una nueva instancia del navegador.

browser.newPage() = Este método crea una nueva página (o pestaña) dentro de la instancia del navegador.

browser.close() = Este método cierra la instancia del navegador.

En puppeteer.launch(), podemos pasar argumentos para personalizar el inicio del navegador según nuestras preferencias. Cubriremos esto con más detalle en la parte 2. Sin embargo, de forma predeterminada, puppeteer.launch() tiene valores preestablecidos, como el modo sin cabeza configurado en verdadero.

Paso 4

Se ha iniciado el navegador y ahora tenemos una página lista para navegar por la web. Naveguemos hasta el sitio web donde extraeremos algunos datos.

Para este ejemplo, extraeremos datos de un sitio web de citas.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

Agregué await page.screenshot({ ruta: 'screenshot.png' }) a la mezcla. Esta es una gran herramienta para garantizar que todo vaya según lo planeado. Cuando se ejecute este código, tendrás un archivo de imagen en el directorio de tu proyecto que capturará el estado actual del sitio web que estás raspando. También puedes ajustar el nombre del archivo a tu gusto.

Si todo está bien, continúa con el paso 5.

Paso 5

Ahora que nuestro script está tomando forma, profundicemos en la parte clave donde extraemos datos de la página web. Así es como se ve nuestro script hasta ahora:

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();

})();

Para verificar que los datos se extrajeron correctamente, podemos ejecutar el nodo "server-file-name" en la CLI y los datos se mostrarán en la consola usando 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(() => { ... }): Aquí es donde ocurre la magia. El método de evaluación nos permite ejecutar código JavaScript dentro del contexto de la página que estamos raspando. Es como si estuvieras abriendo la consola de desarrollador del navegador y ejecutando el código directamente en la página.

const quotes = document.querySelectorAll(".quote");: Aquí, seleccionamos todos los elementos de la página que coinciden con la clase .quote. Esto nos da una NodeList de elementos de cotización.

const quotesArray = [];: Inicializamos un array vacío para almacenar las comillas que extraemos.

for (comilla constante de comillas) {...}: este bucle itera sobre cada elemento de cotización. De cada uno extraemos el texto de la cita y el autor.

quotesArray.push({ quote: texts, Author });: Para cada cita, creamos un objeto que contiene el texto de la cita y el autor, luego insertamos este objeto en quotesArray.

return quotesArray;: Finalmente, devolvemos el conjunto de comillas, que luego se almacena en quotesScraper en nuestro entorno Node.js.

Este método de extracción de datos es poderoso porque le permite interactuar con la página tal como lo haría un usuario, pero de forma automatizada y programática.

Cerrar el navegador

await browser.close();: después de extraer los datos, es importante cerrar el navegador para liberar recursos. Esta línea garantiza que la instancia del navegador que iniciamos se cierre correctamente.

Mirando hacia el futuro, la parte 2

Con este script, has extraído exitosamente datos de un sitio web usando Puppeteer. Pero sólo estamos arañando la superficie de lo que es posible. En la Parte 2, exploraremos técnicas más avanzadas, como el manejo de contenido dinámico y usaremos Express.JS para crear una funcionalidad API de datos desechados. ¡Estén atentos mientras profundizamos en el mundo de Puppeteer!