jueves 22 agosto 2024

Cómo hacer captura de una web con Puppeteer

¿Qué es Puppeteer?
Instalación de Puppeteer
Cómo hacer una captura de pantalla con Puppeteer
Opciones avanzadas de captura con Puppeteer
Ejemplos prácticos de uso de Puppeteer
Conclusión

Puppeteer es una herramienta poderosa y versátil que permite la automatización de tareas en el navegador utilizando Node.js. Una de las funcionalidades más útiles de Puppeteer es la capacidad de capturar imágenes de páginas web (screenshots). Este artículo te guiará a través del proceso de cómo hacer una captura de pantalla de una web con Puppeteer, desde la instalación hasta la captura de imágenes personalizadas.

¿Qué es Puppeteer?

Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar navegadores como Chrome o Chromium de manera programática. Es ampliamente utilizada para realizar tareas como:

Captura de pantallas.
Raspado de datos web (Web Scraping).
Pruebas automatizadas de interfaces de usuario (UI).
Generación de archivos PDF de páginas web.

Puppeteer es especialmente útil para desarrolladores y testers que necesitan automatizar procesos que normalmente requerirían interacción manual con un navegador.

Instalación de Puppeteer

Antes de empezar a usar Puppeteer, es necesario instalar Node.js y Puppeteer en tu entorno de desarrollo. A continuación se detalla el proceso de instalación.

1. Instalar Node.js

Para usar Puppeteer, primero necesitas instalar Node.js, ya que Puppeteer es una biblioteca basada en Node. Puedes descargar Node.js desde su sitio web oficial.

2. Crear un proyecto de Node.js

Abre tu terminal y crea un nuevo directorio para tu proyecto:

mkdir puppeteer-project
cd puppeteer-project

Luego, inicializa un proyecto de Node.js:

npm init -y

3. Instalar Puppeteer

Con el proyecto inicializado, instala Puppeteer usando npm:

npm install puppeteer

Este comando descargará e instalará Puppeteer y todas sus dependencias, incluyendo una versión compatible de Chromium que Puppeteer controlará.

Cómo hacer una captura de pantalla con Puppeteer

Una vez que tienes Puppeteer instalado, es hora de aprender a capturar una web. Aquí te mostramos cómo hacerlo con un script básico.

1. Crear el script de captura

Dentro de tu proyecto, crea un archivo llamado screenshot.js:

const puppeteer = require('puppeteer');

(async () => {
  // Lanza una nueva instancia de navegador
  const browser = await puppeteer.launch();
  // Abre una nueva página
  const page = await browser.newPage();
  // Navega a la URL deseada
  await page.goto('https://www.example.com');
  // Captura de pantalla y la guarda como screenshot.png
  await page.screenshot({ path: 'screenshot.png' });
  // Cierra el navegador
  await browser.close();
})();

2. Ejecutar el script

Para ejecutar el script y capturar la pantalla, simplemente corre el siguiente comando en tu terminal:

node screenshot.js

Este script básico hará una captura de pantalla de la página https://www.example.com y la guardará como screenshot.png en el directorio de tu proyecto.

Opciones avanzadas de captura con Puppeteer

Puppeteer permite personalizar la captura de pantalla de muchas maneras. A continuación, exploramos algunas de las opciones más útiles.

1. Capturar pantalla completa

Puedes capturar la página completa en lugar de solo el área visible:

await page.screenshot({ path: 'fullpage.png', fullPage: true });

2. Capturar un área específica

Si solo necesitas capturar una parte de la página, Puppeteer permite especificar el área con coordenadas:

await page.screenshot({
  path: 'area.png',
  clip: { x: 0, y: 0, width: 800, height: 600 }
});

3. Captura de pantalla en diferentes formatos

Puppeteer permite guardar la captura en diferentes formatos como PNG o JPEG. Para cambiar el formato a JPEG, puedes especificar la opción type:

await page.screenshot({ path: 'screenshot.jpg', type: 'jpeg' });

También puedes controlar la calidad de la imagen en formato JPEG:

await page.screenshot({ path: 'screenshot.jpg', type: 'jpeg', quality: 80 });

4. Captura con dispositivos simulados

Puppeteer permite simular diferentes dispositivos para capturar cómo se vería la página en un móvil o tableta. Por ejemplo, para capturar una página como si estuvieras en un iPhone X:

const iPhone = puppeteer.devices['iPhone X'];
await page.emulate(iPhone);
await page.screenshot({ path: 'iphone.png' });

5. Captura con retraso

En algunos casos, es posible que necesites capturar la pantalla después de esperar un tiempo específico, para permitir que la página se cargue completamente:

await page.waitForTimeout(5000); // Espera 5 segundos
await page.screenshot({ path: 'delayed.png' });

Ejemplos prácticos de uso de Puppeteer

1. Captura de pantallas periódicas

Puppeteer puede integrarse en scripts que tomen capturas de pantallas periódicas de una página para monitorear cambios:

const cron = require('node-cron');

cron.schedule('0 * * * *', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.example.com');
  await page.screenshot({ path: `screenshot-${Date.now()}.png` });
  await browser.close();
});

2. Captura de múltiples páginas

Puppeteer puede automatizar la captura de varias páginas de manera secuencial:

const urls = ['https://www.example.com', 'https://www.example2.com', 'https://www.example3.com'];

for (const url of urls) {
  await page.goto(url);
  await page.screenshot({ path: `${url.split('//')[1]}.png` });
}

Conclusión

Puppeteer es una herramienta increíblemente flexible que facilita la captura de pantallas web de manera programática. Con esta guía, has aprendido a realizar capturas básicas, así como a aplicar opciones avanzadas para personalizar las capturas según tus necesidades. Ya sea para monitoreo, pruebas o generación de contenido visual, Puppeteer es la opción ideal para automatizar la interacción con navegadores. ¡Empieza a experimentar con Puppeteer y descubre todo lo que puedes hacer con él!

Etiquetas:

puppeteer nodejs javascript

Creado por:

Jorge García

Fullstack developer