Intro a Puppeteer

Esta es una introducción práctica a Puppeteer. Ya sea que lo necesites para construir la base de datos de tu nuevo proyecto o para que un agente AI lo use, este tutorial te va a caer de perlas.

Primero, lo primero: ¿qué es Puppeteer?

Es una herramienta para controlar los navegadores Chrome o Firefox a través de el protocolo DevTools. Se le conoce como navegadores headless porque se trabaja vía código, sin UI visible en absoluto (aunque se puede activar como en nuestro siguiente ejemplo). 🤯 También se le conoce como herramienta de “scrapping” o “crawling”. 🕷️

Se instala re-fácil

Claro, vamos a usar npm para instalar.

npm i puppeteer

Esta instalación descargará Chrome también. Podríamos omitir la descarga de Chrome con esta otra instalación:

npm i puppeteer-core

Aunque para nuestro ejemplo usaremos la primera instalación. 🦚

Hagamos el ejemplo más simple

Creamos un archivo .js para colocar nuestro código y luego ejecutarlo con node.

// import puppeteer from 'puppeteer';
const puppeteer = require("puppeteer");
// 1. Importamos (puede usar require)

const main = async () => {
  // 2. Lanzamos el navegador y abrimos una pagina en blanco
  const browser = await puppeteer.launch({
    headless: false, // queremos ver 
  });
  const page = await browser.newPage();

  // 3. Hacemos que la página cargue un sitio determinado
  await page.goto("https://fixtergeek.com/blog");

  // 4. Definimos el tamaño de nuestra pantalla
  await page.setViewport({ width: 425, height: 809 });

  // 5. Seleccionamos y escribimos en el search input y esperamos un poco
  await page.locator("input[type='search']").fill("react router");
  //   await page.waitForFunction("window.innerWidth > 100");
  await delay(4000);

  // 7. Localizamos el título
  const titleNode = await page.locator("div.grid > div > a > h4").waitHandle();
  const title = await titleNode?.evaluate((el) => el.textContent);

  console.log("Este es el titulo del primer resultado:", title);
  await browser.close();
};
main();

function delay(time) {
    return new Promise(function (resolve) {
      setTimeout(resolve, time);
    });
  }

Para este ejemplo simple, he lanzado el navegador como headeless:false, lo que me permite mirar lo que hace el robot. 🤖

También he agregado una función delay para esperar un poco. 🕧

Ya nomás te falta correrlo, ejecuta tu archivo .js usando node:

node main.js

👀 Si no tienes instalado node.js en tu compu, checa este video.

Puppeteer es una herramienta fácil de usar y muy potente, con una gran comunidad 100% open-source

¿Apoco no está re fácil? Dominar esta herramienta te puede abrir puertas a las automatizaciones del futuro cercano que los agentes de AI necesitarán, no dejes de echarle un ojo a sus docs oficiales. 📘

Abrazo. Bliss. 🤓

Enlaces relacionados

Fixtergeek blog

Aprende React Router

Instala NodeJS: Video

Devtools Protocol