Tutorial de Puppeteer para línea de comandos

¡Claro! Te preparo un tutorial sobre Puppeteer enfocado en su uso desde la línea de comandos. Veremos qué es, cómo configurarlo y las diferentes maneras de ejecutarlo en tu terminal.

🤔 ¿Qué es Puppeteer?

Puppeteer es una biblioteca de Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium a través del protocolo DevTools [citation:2]. Por defecto, Puppeteer ejecuta el navegador en modo headless (sin interfaz gráfica), lo que lo hace ideal para automatizar tareas en servidores o desde la terminal [citation:2][citation:7].

Con Puppeteer, puedes automatizar casi cualquier acción que harías manualmente en un navegador, como [citation:2][citation:7]:

• Generar capturas de pantalla y PDFs de páginas web.
• Automatizar el envío de formularios y pruebas de interfaz de usuario.
• Realizar web scraping de sitios con contenido dinámico (JavaScript) [citation:5].
• Capturar trazas de rendimiento (timeline traces) de tus sitios.
• Probar extensiones de Chrome.

🛠️ Instalación y Configuración

Antes de empezar, necesitas tener Node.js instalado en tu sistema, ya que Puppeteer es una librería para este entorno [citation:4][citation:7]. Puedes verificarlo con:

node -v
npm -v

Instalación Local (Recomendada para proyectos)

La forma más común es instalarlo en tu proyecto. Esto creará una carpeta node_modules con Puppeteer y una versión específica de Chromium que garantiza su funcionamiento [citation:2].

1. Crea una carpeta para tu proyecto y accede a ella:

   mkdir mi-proyecto-puppeteer
   cd mi-proyecto-puppeteer
   

2. Inicializa un proyecto de Node.js (esto crea el archivo package.json):

   npm init -y
   

3. Instala Puppeteer:

   npm install puppeteer
   

Instalación Global

Si lo que buscas es usar Puppeteer como una herramienta de línea de comandos para tareas rápidas desde cualquier lugar, puedes instalarlo de forma global. Sin embargo, el uso principal es a través de scripts de Node.js.

npm install -g puppeteer

⌨️ Uso en la Línea de Comandos (La Forma Estándar)

La forma más directa de "usar Puppeteer en la línea de comandos" es crear pequeños scripts de JavaScript y ejecutarlos con el comando node [citation:2][citation:4].

Concepto: Escribes un archivo .js con las instrucciones de automatización y lo ejecutas con node nombre-del-archivo.js.

Ejemplo 1: Tomar una Captura de Pantalla

Crea un archivo llamado screenshot.js y pega el siguiente código [citation:2][citation:7]:

const puppeteer = require('puppeteer');

(async () => {
  // Lanza el navegador (por defecto en modo headless)
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Establece el tamaño de la ventana
  await page.setViewport({ width: 1920, height: 1080 });

  // Navega a la URL deseada
  await page.goto('https://ejemplo.com');

  // Toma la captura
  await page.screenshot({ path: 'ejemplo.png', fullPage: true });

  console.log('✅ Captura guardada como ejemplo.png');

  // Cierra el navegador
  await browser.close();
})();

Ahora, desde tu terminal, ejecuta:

node screenshot.js

¡Listo! Tendrás una captura de pantalla completa de ejemplo.com en tu carpeta [citation:7].

Ejemplo 2: Generar un PDF

Crea pdf.js:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://ejemplo.com', { waitUntil: 'networkidle2' }); // Espera a que la red esté idle
  
  // Genera el PDF
  await page.pdf({ path: 'ejemplo.pdf', format: 'A4' });

  console.log('✅ PDF guardado como ejemplo.pdf');
  await browser.close();
})();

Ejecuta:

node pdf.js

Ejemplo 3: Automatizar un Login

Crea login.js [citation:1]:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); // Modo no headless para verlo
  const page = await browser.newPage();
  await page.goto('https://the-internet.herokuapp.com/login');

  // Espera a que los campos estén presentes y escribe
  await page.waitForSelector('#username');
  await page.type('#username', 'tomsmith', { delay: 100 }); // Retraso para simular escritura

  await page.waitForSelector('#password');
  await page.type('#password', 'SuperSecretPassword!', { delay: 100 });

  // Envía el formulario presionando Enter
  await page.keyboard.press('Enter');

  // Espera a que la navegación termine
  await page.waitForNavigation();

  console.log('✅ Proceso de login intentado.');
  // Aquí podrías verificar si el login fue exitoso

  // Cerramos el navegador después de 5 segundos para ver el resultado
  await new Promise(resolve => setTimeout(resolve, 5000));
  await browser.close();
})();

Ejecuta:

node login.js

🚀 Herramientas CLI Externas para Puppeteer

Además de ejecutar scripts personalizados con node, existen wrappers que convierten a Puppeteer en una herramienta de línea de comandos más directa. La más destacada es puppeteer-cli [citation:3].

Instalación y Uso de puppeteer-cli

Este paquete te permite usar comandos como puppeteer print o puppeteer screenshot directamente en tu terminal.

1. Instálalo de forma global:

   npm install -g puppeteer-cli
   

2. Comandos útiles:

   Comando	Descripción	Ejemplo
   print	Genera un PDF a partir de una URL o archivo HTML local [citation:3].	puppeteer print https://github.com mi-repo.pdf
   screenshot	Toma una captura de pantalla de una URL o archivo local [citation:3].	puppeteer screenshot https://ejemplo.com captura.png --viewport 1280x720
   snapshot	Captura el HTML renderizado (después de la ejecución de JS) de una página [citation:3].	puppeteer snapshot https://ejemplo.com pagina-final.html

   Ejemplo rápido con puppeteer-cli:

   # Crear un PDF de la página de Puppeteer
   puppeteer print https://pptr.dev puppeteer-api.pdf
   
   # Tomar una captura de pantalla completa de GitHub
   puppeteer screenshot https://github.com github-home.png --full-page
   

💡 Consejos para Depuración

Cuando estés creando tus scripts, estos tips te serán de gran ayuda [citation:2]:

• Modo no headless: Para ver qué está haciendo tu script en tiempo real, lanza el navegador con { headless: false }.

  const browser = await puppeteer.launch({ headless: false });
  

• Ralentizar las acciones: Usa la opción slowMo para ralentizar cada operación y poder seguir visualmente el proceso.

  const browser = await puppeteer.launch({ headless: false, slowMo: 250 }); // 250ms de retraso
  

• Ver logs de la consola del navegador: Captura los mensajes de console.log que se ejecutan dentro de la página web.

  page.on('console', msg => console.log('LOG DEL NAVEGADOR:', msg.text()));
  

📝 Resumen y Conclusión

1. Puppeteer no es un comando de terminal en sí mismo, sino una librería de Node.js.
2. La forma principal de usarlo es creando archivos .js que contengan la lógica de automatización y ejecutándolos con node tu-archivo.js [citation:2].
3. Para tareas rápidas y estándar (como generar PDFs o capturas), existen herramientas como puppeteer-cli que ofrecen comandos directos desde la terminal [citation:3].
4. Recuerda que, por su naturaleza, Puppeteer es excelente para manejar sitios web modernos que cargan contenido de forma dinámica con JavaScript [citation:5][citation:8].

Con este tutorial, ya tienes la base para empezar a automatizar el navegador desde tu línea de comandos. ¿Hay alguna tarea específica que te gustaría automatizar? ¡Podemos profundizar en ella