Automatización del navegador con Puppeteer y JavaScript: Implementación práctica en Node.js

Tabla de contenidos.

Automatización del navegador con Puppeteer y JavaScript: Implementación práctica en Node.js

Titiritero es un Node.js bibliotecas que automatiza tareas del navegador como el web scraping, las pruebas de IU y los flujos de trabajo repetitivos. Funciona en ambos... sin cabeza (sin interfaz) y modos de navegador completo y se comunica con los navegadores a través de Protocolo DevToolsPor eso es la mejor opción para desarrolladores:

Manejo dinámico de contenido:Perfecto para aplicaciones web modernas y para eludir sistemas de detección.
Usos comunes:Web scraping, generación de PDF, captura de capturas de pantalla y automatización de formularios.
Configuración simple:Instalar Puppeteer con npm install puppeteery viene con una versión compatible de Chrome.

Ejemplo rápido:

import puppeteer from 'puppeteer';

async function runAutomation() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
}

runAutomation();

Por qué se destaca:

Modos: Sin cabeza (tareas CI/CD) o interfaz de usuario completa (depuración).
Interacciones de página:Automatiza clics, escritura y navegación mediante selectores CSS.
Consejos de rendimiento:Deshabilite imágenes, use el modo sigiloso y administre operaciones asincrónicas de manera eficiente.

Desde principiantes hasta usuarios avanzados, Puppeteer simplifica la automatización del navegador, lo que lo convierte en una herramienta imprescindible para los desarrolladores de Node.js.

Pruebas web modernas y automatización con Titiritero (Google ...

Titiritero

Configuración y configuración inicial

Siga estos pasos para configurar Puppeteer en Node.js y preparar todo para la automatización.

Configuración Node.js Medio Ambiente

Node.js

Para comenzar, necesitarás tres componentes principales:

Componente	Propósito	Verificar comando
Node.js	Entorno de ejecución	`node --version`
npm	Gerente de empaquetación	`npm --version`
Google Chrome	Motor del navegador	Comprobar instalación

Dado que npm viene incluido con Node.js, instalar Node.js le ofrece ambas herramientas. Descargue la última versión de soporte a largo plazo (LTS) desde el sitio web oficial de Node.js para una mayor estabilidad y compatibilidad. ^{[ 2 ]}.

Configuración del proyecto con Puppeteer

A continuación se explica cómo crear un nuevo proyecto de Puppeteer:

Paso 1: Correr mkdir puppeteer-project para crear una carpeta de proyecto.
Paso 2: Navegue hasta la carpeta e inicialícela con cd puppeteer-project && npm init -y.
Paso 3:Instalar Puppeteer usando npm install puppeteer.

Cuando instalas Puppeteer, se descarga automáticamente una versión de Chrome para pruebas que coincida con la biblioteca. Esto garantiza que sus scripts se comporten de forma coherente en diferentes configuraciones. ^{[ 3 ]}.

Estructura básica del script

A continuación se muestra una plantilla de guión de Puppeteer sencilla:

import puppeteer from 'puppeteer';

async function runAutomation() {
  const browser = await puppeteer.launch({
    headless: true
  });
  const page = await browser.newPage();

  try {
    await page.setViewport({ width: 1280, height: 800 });
    await page.goto('https://example.com');
    // Add your actions here
  } finally {
    await browser.close();
  }
}

runAutomation();

Mejores prácticas para escribir guiones de Puppeteer:

Use page.waitForSelector() para garantizar que los elementos estén completamente cargados antes de interactuar con ellos ^{[ 4 ]}.
Establezca las dimensiones de la ventana gráfica para lograr una representación de página consistente.
Envuelva su código en try/finally bloques para manejar errores y garantizar que el navegador se cierre correctamente.
Cierre siempre la instancia del navegador para evitar problemas de memoria ^{[ 2 ]}.

Para una experiencia de desarrollo más fluida, agregue "type": "module" para usted package.json archivo. Esto le permite usar la sintaxis moderna del módulo ES como import y export en tus guiones ^{[ 4 ]}Con esta configuración, estará listo para explorar las funciones avanzadas de Puppeteer en las siguientes secciones.

Características principales del titiritero

Analicemos las características clave de Puppeteer para una automatización efectiva del navegador.

Conceptos básicos del control del navegador

Puppeteer te permite ejecutar navegadores en dos modos:

Moda	Descripción	Mejor caso de uso
Sin cabeza	Ejecuta el navegador de forma invisible	Automatización en pipelines de CI/CD, tareas de producción
Full	Muestra la interfaz de usuario del navegador.	Depuración, pruebas de desarrollo

A continuación se muestra un ejemplo rápido de cómo iniciar un navegador con configuraciones personalizadas:

const browser = await puppeteer.launch({
  headless: true,
  defaultViewport: { width: 1920, height: 1080 },
  args: ['--no-sandbox', '--disable-setuid-sandbox']
});

Métodos de interacción de la página

Puppeteer facilita la interacción con páginas web mediante selectores CSS y funciones de espera integradas para garantizar que los elementos estén listos. Por ejemplo:

// Wait for the email input field to load and type an email
const emailInput = await page.waitForSelector('input[type="email"]');
await emailInput.type('[email protected]');

// Wait for the submit button to appear and click it
const submitButton = await page.waitForSelector('button[type="submit"]');
await submitButton.click();

Puede realizar una variedad de acciones, como:

Eventos del ratón:Haga clic, pase el cursor por encima o arrastre y suelte.
Entrada de teclado:Escribe texto o utiliza combinaciones de teclas.
Manejo de formularios:Trabaja con menús desplegables, casillas de verificación y cargas de archivos.
Navegación por marcos:Interactúe con iframes o cambie entre múltiples ventanas.

Gestión de operaciones asincrónicas

Dado que Puppeteer se basa en operaciones asincrónicas, la correcta gestión de estas tareas es crucial. El framework incluye mecanismos de espera para garantizar una automatización fluida. A continuación, un ejemplo:

try {
  await Promise.all([
    page.waitForNavigation(),
    page.click('#submit-button')
  ]);

  await page.waitForSelector('.success-message', {
    visible: true,
    timeout: 5000
  });
} catch (error) {
  console.error('Navigation failed:', error);
}

Async/await es una forma de escribir código asincrónico que se asemeja más al código síncrono tradicional, y que suele ser más fácil de leer y comprender. - WebScraping.AI ^{[ 5 ]}

Algunas estrategias de espera útiles incluyen:

Función de espera	Propósito	Ejemplo de uso
esperarAlSelector	Espera a que aparezca un elemento	Útil para formularios o contenido dinámico.
esperarNavegación	Espera a que se cargue una página	Ideal para envíos de formularios
esperarFunción	Espera condiciones personalizadas	Ideal para comprobar cambios de estado complejos
esperar por tiempo de espera	Introduce un retraso fijo	Útil para límites de velocidad o animaciones.

sbb-itb-23997f1

Ejemplos de implementación

Esta sección proporciona ejemplos prácticos que muestran cómo se puede utilizar Puppeteer para tareas como extraer datos, automatizar formularios y capturar páginas web de manera efectiva.

Métodos de extracción de datos

Puppeteer simplifica la gestión de contenido dinámico y la extracción de datos estructurados. A continuación, se muestra un ejemplo de extracción de datos de reseñas de una página con desplazamiento infinito:

async function scrapeReviews() {
  const reviews = [];

  // Scroll until no new content loads
  async function scrollToBottom() {
    let lastHeight = await page.evaluate('document.body.scrollHeight');
    while (true) {
      await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
      await page.waitForTimeout(2000);
      let newHeight = await page.evaluate('document.body.scrollHeight');
      if (newHeight === lastHeight) break;
      lastHeight = newHeight;
    }
  }

  // Extract review data
  await scrollToBottom();
  const reviewElements = await page.$$('.review-box');
  for (const element of reviewElements) {
    const review = await element.evaluate(el => ({
      text: el.querySelector('.review-text').textContent,
      rating: el.querySelector('.rating').getAttribute('data-score'),
      date: el.querySelector('.review-date').textContent
    }));
    reviews.push(review);
  }

  return reviews;
}

Para mejorar el rendimiento durante el raspado, tenga en cuenta estos consejos:

Optimización	Implementación	Beneficio
Desactivar imágenes	`page.setRequestInterception(true)`	Ahorra ancho de banda
Usa el modo sigiloso	`puppeteer-extra-plugin-stealth`	Ayuda a evitar la detección
Agregar retrasos	`page.waitForTimeout()`	Previene la limitación de velocidad

Ahora pasemos a la automatización de formularios.

Pasos para la automatización de formularios

Automatizar formularios implica completar campos de entrada, gestionar botones y gestionar posibles errores. A continuación, le mostramos cómo automatizar un formulario de inicio de sesión con gestión de errores:

async function handleLogin(username, password) {
  try {
    // Click cookie accept button if visible
    const cookieButton = await page.$('.cookie-accept');
    if (cookieButton) await cookieButton.click();

    // Fill login form
    await page.type('#username', username, { delay: 100 });
    await page.type('#password', password, { delay: 100 });

    // Submit and wait for navigation
    await Promise.all([
      page.waitForNavigation(),
      page.click('#login-button')
    ]);

    // Check for error messages
    const errorElement = await page.$('.error-message-container');
    if (errorElement) {
      const errorText = await errorElement.evaluate(el => el.textContent);
      throw new Error(`Login failed: ${errorText}`);
    }

  } catch (error) {
    console.error('Login automation failed:', error);
  }
}

Herramientas de captura de páginas

Para capturar páginas web, Puppeteer permite configurar ajustes para capturas de pantalla y archivos PDF. Aquí tienes un ejemplo para crear capturas de alta calidad:

async function captureWebPage(url) {
  // Set viewport for consistent captures
  await page.setViewport({
    width: 1920,
    height: 1080,
    deviceScaleFactor: 2
  });

  await page.goto(url, { waitUntil: 'networkidle0' });

  // Take full-page screenshot
  await page.screenshot({
    path: 'capture.jpg',
    fullPage: true,
    quality: 90,
    type: 'jpeg'
  });

  // Generate PDF with custom settings
  await page.pdf({
    path: 'page.pdf',
    format: 'A4',
    printBackground: true,
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
  });
}

Hacer capturas de pantalla de sitios web con Puppeteer puede ser complicado. Nos esperan muchos obstáculos. - Dmytro Krasun, autor en ScreenshotOne ^{[ 6 ]}

Para obtener mejores resultados, adapte la configuración de captura según la tarea:

Tipo de captura	Mejores Prácticas	Caso de uso ideal
Imágenes	Utilice JPEG para un procesamiento más rápido	Capturas web generales
(PDF)	Aplicar CSS a medios impresos	Creación de documentos
Captura de elementos	Selectores específicos de destino	Prueba de componentes individuales

Estos ejemplos demuestran cómo Puppeteer puede simplificar una variedad de tareas de automatización.

Funciones avanzadas y rendimiento

Puppeteer ofrece una gama de técnicas avanzadas que pueden optimizar tus proyectos Node.js. Veamos cómo puedes mejorar las pruebas, administrar varias páginas y optimizar el rendimiento.

Pruebas y gestión de errores

Una gestión de errores eficaz en Puppeteer simplifica considerablemente la depuración. Al supervisar los procesos del navegador y registrar las solicitudes fallidas, puede detectar y resolver problemas rápidamente. A continuación, se muestra un ejemplo de una configuración eficaz de gestión de errores:

async function robustPageOperation(url) {
  try {
    await page.goto(url, { 
      waitUntil: 'domcontentloaded',  // Faster than 'networkidle2'
      timeout: 30000 
    });

    // Monitor failed requests
    page.on('requestfailed', request => {
      console.error(`Failed request: ${request.url()}`);
      console.error(`Reason: ${request.failure().errorText}`);
    });

    // Capture a screenshot on error for debugging
    page.on('error', async (error) => {
      await page.screenshot({
        path: `error-${Date.now()}.png`,
        fullPage: true
      });
      console.error('Page error:', error);
    });

  } catch (error) {
    console.error('Navigation failed:', error);
    throw error;
  }
}

No resolverá todos tus problemas, pero te dará suficiente conocimiento de la situación para que sea mucho más fácil diagnosticarlos y solucionarlos. — Joel Griffith, fundador y director ejecutivo de browserless.io ^{[ 8 ]}

Una vez que haya configurado el manejo de errores, puede llevar las cosas más allá y administrar varias páginas simultáneamente.

Operaciones de varias páginas

Puppeteer permite gestionar varias tareas simultáneamente, lo que ahorra tiempo y mejora la eficiencia. A continuación, se muestra un ejemplo de gestión de tareas simultáneas con Puppeteer Cluster:

const { Cluster } = require('puppeteer-cluster');

async function runParallelOperations() {
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 4,
    monitor: true,
    timeout: 30000
  });

  await cluster.task(async ({ page, data: url }) => {
    await page.goto(url);
    // Perform page operations
  });

  // Queue URLs for processing
  const urls = ['url1', 'url2', 'url3'];
  for (const url of urls) {
    await cluster.queue(url);
  }

  await cluster.idle();
  await cluster.close();
}

El manejo eficiente de varias páginas es un gran avance, pero optimizar el uso de recursos puede hacer que sus operaciones sean aún más fluidas.

Gestión de velocidad y recursos

Para obtener el máximo rendimiento de Puppeteer, concéntrese en reducir los tiempos de carga y administrar los recursos eficazmente. A continuación, se presentan algunas estrategias:

Enfoque de optimización	Implementación	Beneficio
Velocidad de carga de página	Deshabilitar imágenes y CSS	Tiempos de carga más rápidos
Uso de la memoria	Deseche las páginas rápidamente	Previene fugas de memoria
Gestión de solicitudes	Respuestas en caché	Reduce la carga de la red
Procesamiento en paralelo	Concurrencia controlada	Uso equilibrado de los recursos

A continuación se muestra un ejemplo de cómo puedes optimizar las operaciones de la página:

async function optimizedPageOperation() {
  // Intercept and optimize requests
  await page.setRequestInterception(true);
  page.on('request', request => {
    if (request.resourceType() === 'image' || request.resourceType() === 'stylesheet') {
      request.abort();
    } else {
      request.continue();
    }
  });

  // Implement caching
  const cache = new Map();
  page.on('response', async response => {
    const url = response.url();
    if (response.ok() && !cache.has(url)) {
      cache.set(url, await response.text());
    }
  });
}

Guía de integración de Node.js

Aprenda a integrar sin problemas Puppeteer en sus proyectos Node.js con una estructura de código limpia y fácil de mantener.

Organización del código

Mantenga sus módulos de automatización estructurados para mayor claridad y reutilización. A continuación, se muestra un ejemplo de configuración:

// automation/browser.js
const puppeteer = require('puppeteer');

class BrowserManager {
  async initialize() {
    this.browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    return this.browser;
  }

  async createPage() {
    const page = await this.browser.newPage();
    await page.setDefaultNavigationTimeout(30000);
    return page;
  }

  async cleanup() {
    if (this.browser) {
      await this.browser.close();
    }
  }
}

module.exports = new BrowserManager();

Esta configuración separa responsabilidades, lo que hace que su código sea más fácil de administrar y escalar.

Integración de bibliotecas

Puppeteer puede funcionar junto con otras bibliotecas de Node.js para optimizar tus flujos de trabajo de automatización. Aquí tienes un ejemplo. winston para el registro y puppeteer-extra para capacidades de sigilo:

const winston = require('winston');
const puppeteerExtra = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');

// Set up logging with winston
const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'automation.log' })
  ]
});

// Configure Puppeteer with stealth mode
puppeteerExtra.use(StealthPlugin());

async function setupAutomation() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();

  // Log browser console messages
  page.on('console', message => {
    logger.info(`Browser console: ${message.text()}`);
  });

  return { browser, page };
}

Puppeteer es una biblioteca Node.js que proporciona una API de alto nivel para controlar Chrome o Chromium a través del protocolo DevTools. ^{[ 2 ]}

Al integrar funciones de registro y sigilo, puede supervisar y administrar mejor sus tareas de automatización.

Pasos de implementación de producción

Para implementar scripts de Puppeteer, asegúrese de que su entorno esté optimizado para garantizar la estabilidad y el rendimiento. A continuación, se detallan los pasos clave:

Paso de implementación	Detalles de implementacion	Propósito
Dependencias	Instalar dependencias de Chrome	Garantiza la funcionalidad del navegador
Configuración de caché	Preparar `.cache/puppeteer` directorio	Administra instancias del navegador
Límites de recursos	Configurar las restricciones de memoria y CPU	Previene la sobrecarga del sistema
Error de recuperación	Implementar mecanismos de reinicio automático	Mantiene el tiempo de actividad del servicio

Utilice la siguiente configuración para estandarizar su implementación:

const { join } = require('path');

module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
  executablePath: process.env.CHROME_PATH || null,
  defaultViewport: {
    width: 1920,
    height: 1080
  }
};

Para optimizar aún más sus scripts:

Cierre las páginas y las instancias del navegador no utilizadas lo antes posible.
Utilice bloques try/catch para manejar errores y registrarlos de manera efectiva.
Supervise el uso de la memoria y los tiempos de respuesta para evitar cuellos de botella.
Configure encabezados de seguridad y controles de acceso para proteger su entorno.

"Al optimizar su script de Puppeteer, puede garantizar un funcionamiento fluido y eficiente con resultados precisos y consistentes". - ScrapeOps ^{[ 7 ]}

Resumen

Resumen de funciones

Puppeteer es una herramienta de automatización de navegadores que se destaca en tareas como el control de navegadores sin cabeza, la automatización de formularios, las pruebas de UI, la captura de capturas de pantalla, la generación de PDF y las funcionalidades de raspado web.^{[ 1 ]}.

He aquí un vistazo rápido a sus características principales:

Feature	Capacidad	Ventajas
Soporte del navegador	Chrome/Chromium, Firefox	Funciona en múltiples entornos
Modo de ejecución	Sin cabeza/con cabeza	Adecuado para diversos escenarios.
Rendimiento	Operación liviana	Utiliza menos recursos del sistema
Acceso a la API	Protocolo DevTools	Ofrece un control detallado del navegador.

Puede aprovechar al máximo estas capacidades siguiendo estrategias específicas adaptadas a sus necesidades.

Guía de implementación

Para maximizar el potencial de Puppeteer, considere estas estrategias para mejorar el rendimiento y la confiabilidad:

Gestión de Recursos

El siguiente script deshabilita recursos innecesarios como imágenes, hojas de estilo y fuentes para mejorar la velocidad de carga de la página:

// Optimize page load performance
await page.setRequestInterception(true);
page.on('request', request => {
  if (['image', 'stylesheet', 'font'].indexOf(request.resourceType()) !== -1) {
    request.abort();
  } else {
    request.continue();
  }
});

Prevención de errores

Utilice este fragmento para garantizar que su script espere a que aparezca un elemento antes de interactuar con él:

await page.waitForSelector('#target-element', {
  timeout: 5000,
  visible: true
});

Para configuraciones de producción, siga estos pasos:

Configuración de infraestructura:Instale las dependencias necesarias de Chrome y configure correctamente los directorios de caché.
Ajustes de rendimiento:Minimice el uso de recursos deshabilitando activos innecesarios y habilitando la intercepción de solicitudes.
Mejoras de seguridad: Añade el titiritero-extra-plugin-stealth complemento para reducir los riesgos de detección^{[ 7 ]}.
Descamación: Utiliza grupo de titiriteros Para el procesamiento paralelo para manejar cargas de trabajo más grandes de manera eficiente^{[ 7 ]}.

"Al optimizar su script de Puppeteer, puede garantizar un funcionamiento fluido y eficiente con resultados precisos y consistentes". - ScrapeOps ^{[ 7 ]}