.png)
.svg){kind=icon}
Marzo 21, 2025
•
11
min leer
Automatización del navegador con Puppeteer y JavaScript: Implementación práctica en Node.js
George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
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:
npm install puppeteery viene con una versión compatible de Chrome.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();
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.
Siga estos pasos para configurar Puppeteer en Node.js y preparar todo para la automatización.
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 te ofrece ambas herramientas. Descarga la última versión de soporte a largo plazo (LTS) desde el sitio web oficial de Node.js para una mayor estabilidad y compatibilidad.
A continuación se explica cómo crear un nuevo proyecto de Puppeteer:
mkdir puppeteer-project para crear una carpeta de proyecto.cd puppeteer-project && npm init -y.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 consistente en diferentes configuraciones.
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:
page.waitForSelector() para garantizar que los elementos estén completamente cargados antes de interactuar con ellos.try/finally bloques para manejar errores y garantizar que el navegador se cierre correctamente.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 scripts. Con esta configuración, estás listo para explorar las funciones avanzadas de Puppeteer en las siguientes secciones.
Analicemos las características clave de Puppeteer para una automatización efectiva del navegador.
Puppeteer te permite ejecutar navegadores en dos modos:
| Moda | Descripción original | 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']
});
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:
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
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. |
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.
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.
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);
}
}
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
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.
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.
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
Una vez que haya configurado el manejo de errores, puede llevar las cosas más allá y administrar varias páginas simultáneamente.
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.
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());
}
});
}
Aprenda a integrar sin problemas Puppeteer en sus proyectos Node.js con una estructura de código limpia y fácil de mantener.
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.
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.
Al integrar funciones de registro y sigilo, puede supervisar y administrar mejor sus tareas de automatizació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:
"Al optimizar su script de Puppeteer, puede garantizar un funcionamiento fluido y eficiente con resultados precisos y consistentes". - ScrapeOps
Puppeteer es una herramienta de automatización de navegador que se destaca en tareas como el control de navegador 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.
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. |
| Desempeno | 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.
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:
"Al optimizar su script de Puppeteer, puede garantizar un funcionamiento fluido y eficiente con resultados precisos y consistentes". - ScrapeOps
