Tutorial de Introducción a Puppeteer para Web Scraping

Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar navegadores como Chrome o navegadores basados en Chromium a través del protocolo DevTools. Puppeteer tipicamente se ejecuta en modo headless por defecto, lo que significa que puede abrir un navegador en segundo plano y hacer las mismas operaciones que harias manualmente en tu navegador, como hacer clicks, hacer scrolls de pagina, cambiar de pagina, y demas operaciones.

Puppeteer es muy útil para tareas de web scraping porque puede interactuar con las páginas web al igual que lo hace un usuario humano. Así que en este tutorial te enseñará cómo configurar Puppeteer y usarlo para hacer web scraping.

Requerimientos

• Node.js y npm (Node Package Manager): Puppeteer es una biblioteca de Node.js, por lo tanto necesitas tener Node.js y npm instalados en tu sistema. Puedes descargarlos aquí.
• Un editor de texto: Necesitarás un editor de texto para escribir y guardar tu código. Algunos ejemplos son Visual Studio Code, Sublime Text o Atom.
• Conocimientos básicos de JavaScript: Como Puppeteer es una biblioteca de JavaScript, necesitarás algunos conocimientos básicos de este lenguaje para seguir este tutorial.

Para este tutorial estare usando los Ecmascript Modules (es decir los import y exports de JavaScript)

Instalación de Puppeteer

Primero abre una terminal en tu computadora.

Luego navega a la carpeta donde quieres crear tu proyecto, y ejecuta el siguiente comando para inicializar un nuevo proyecto de Node.js:

npm init -y

Ahora instala Puppeteer con el siguiente comando:

npm install puppeteer

Luego añade esto en tu package.json:

{
  "name": "puppeter-intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^20.5.0"
  }
}

Abriendo una página web

Para empezar, hagamos que Puppeteer abra una página web.

import puppeteer from "puppeteer";

async function openWebPage() {
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 200,
  });
  const page = await browser.newPage();
  await page.goto("https://www.example.com");
  await browser.close();
}

openWebPage();

Captura de Pantalla con Puppeteer

Puppeteer tiene un método incorporado llamado screenshot() para tomar una captura de pantalla de la página web. Aquí te muestro cómo puedes hacerlo:

import puppeteer from "puppeteer";

async function captureScreenshot() {
  const browser = await puppeteer.launch({
    headless: 'new'
  });
  const page = await browser.newPage();
  await page.goto('https://www.example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
}

captureScreenshot();

Navegando a través de una página web

Puppeteer puede hacer clic en los enlaces para navegar a través de una página web. Aquí hay un ejemplo:

import puppeteer from "puppeteer";

async function navigateWebPage() {
  const browser = await puppeteer.launch({
    slowMo: 200,
    headless: false,
  });
  const page = await browser.newPage();
  await page.goto("https://quotes.toscrape.com");
  await page.click('a[href="/login"]');
  await new Promise((resolve) => setTimeout(resolve, 3000));
  await browser.close();
}

navigateWebPage();

Obteniendo datos de una página web

Para hacer web scraping, necesitas obtener datos de la página web. Puedes hacerlo con Puppeteer de la siguiente manera:

import puppeteer from "puppeteer";

async function getDataFromWebPage() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com');
  const data = await page.evaluate(() => {
    let title = document.querySelector('h1').innerText;
    let description = document.querySelector('p').innerText;
    return {
      title,
      description,
    }
  });
  console.log(data);
  await browser.close();
}

getDataFromWebPage();

En este código, la función page.evaluate() se usa para ejecutar código en el contexto del navegador. Dentro de esta función, puedes usar el DOM API para interactuar con la página web.

Manejo de páginas dinámicas

Puppeteer puede interactuar con páginas dinámicas que usan JavaScript para cargar datos. Aquí hay un ejemplo de cómo puedes hacer esto:

import puppeteer from "puppeteer";

async function handleDynamicWebPage() {
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 200,
  });
  const page = await browser.newPage();
  await page.goto("https://quotes.toscrape.com");
  //   await page.waitForSelector('div[data-loaded="true"]'); // Asegúrate de reemplazar esto con el selector de CSS correcto.
  const data = await page.evaluate(() => {
    const quotes = document.querySelectorAll(".quote");
    const data = [...quotes].map((quote) => {
      const quoteText = quote.querySelector(".text").innerText;
      const author = quote.querySelector(".author").innerText;
      const tags = [...quote.querySelectorAll(".tag")].map(
        (tag) => tag.innerText
      );
      return {
        quoteText,
        author,
        tags,
      };
    });
    return data;
  });
  console.log(data);
  await browser.close();
}

handleDynamicWebPage();

Conclusión

Con Puppeteer, tienes una gran cantidad de posibilidades para hacer web scraping. Y aunque este tutorial sirve de iniciacion o para darte una idea, estos no son siquiera todos sus conceptos básicos, ya que hay muchas más operaciones que puedes automatizar usando Puppeteer, como capturar capturas de pantalla, automatizar formularios y más. Espero que este tutorial te haya dado un buen punto de partida. ¡Buena suerte con tu aprendizaje de web scraping con Puppeteer!