Automatización del navegador con Puppeteer y JavaScript: Implementación práctica en Node.js
Descubra cómo automatizar las tareas del navegador con Puppeteer en Node.js, desde el raspado web hasta la automatización de formularios, con ejemplos prácticos y mejores prácticas.
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:
<span class="hljs-keyword">import</span> puppeteer <span class="hljs-keyword">from</span> <span class="hljs-string">'puppeteer'</span>;
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runAutomation</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({ <span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span> });
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}
<span class="hljs-title function_">runAutomation</span>();
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 ...
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
Para comenzar, necesitarás tres componentes principales:
| Componente | Proposito | Verificar comando |
|---|---|---|
| Node.js | Entorno de ejecución | nodo --versión |
| npm | Gerente de empaquetación | npm --versión |
| 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-projectpara 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:
<span class="hljs-keyword">import</span> puppeteer <span class="hljs-keyword">from</span> <span class="hljs-string">'puppeteer'</span>;
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runAutomation</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({ <span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">800</span> });
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
<span class="hljs-comment">// Add your actions here</span>
} <span class="hljs-keyword">finally</span> {
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}
}
<span class="hljs-title function_">runAutomation</span>();
Mejores prácticas para escribir guiones de Puppeteer:
- Usa
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/finallybloques 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 |
| Pleno | 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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">defaultViewport</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span> },
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});
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:
<span class="hljs-comment">// Wait for the email input field to load and type an email</span>
<span class="hljs-keyword">const</span> emailInput = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'input[type="email"]'</span>);
<span class="hljs-keyword">await</span> emailInput.<span class="hljs-title function_">type</span>(<span class="hljs-string">'[email protected]'</span>);
<span class="hljs-comment">// Wait for the submit button to appear and click it</span>
<span class="hljs-keyword">const</span> submitButton = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'button[type="submit"]'</span>);
<span class="hljs-keyword">await</span> submitButton.<span class="hljs-title function_">click</span>();
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:
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#submit-button'</span>)
]);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.success-message'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, 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 | Proposito | 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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrapeReviews</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> reviews = [];
<span class="hljs-comment">// Scroll until no new content loads</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrollToBottom</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> lastHeight = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'document.body.scrollHeight'</span>);
<span class="hljs-keyword">while</span> (<span class="hljs-literal">true</span>) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'window.scrollTo(0, document.body.scrollHeight)'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">2000</span>);
<span class="hljs-keyword">let</span> newHeight = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'document.body.scrollHeight'</span>);
<span class="hljs-keyword">if</span> (newHeight === lastHeight) <span class="hljs-keyword">break</span>;
lastHeight = newHeight;
}
}
<span class="hljs-comment">// Extract review data</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">scrollToBottom</span>();
<span class="hljs-keyword">const</span> reviewElements = <span class="hljs-keyword">await</span> page.$$(<span class="hljs-string">'.review-box'</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> element <span class="hljs-keyword">of</span> reviewElements) {
<span class="hljs-keyword">const</span> review = <span class="hljs-keyword">await</span> element.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> ({
<span class="hljs-attr">text</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.review-text'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">rating</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.rating'</span>).<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">'data-score'</span>),
<span class="hljs-attr">date</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.review-date'</span>).<span class="hljs-property">textContent</span>
}));
reviews.<span class="hljs-title function_">push</span>(review);
}
<span class="hljs-keyword">return</span> reviews;
}
Para mejorar el rendimiento durante el raspado, tenga en cuenta estos consejos:
| Optimiza | Implementación | Beneficio |
|---|---|---|
| Desactivar imágenes | página.setRequestInterception(verdadero) | Ahorra ancho de banda |
| Usa el modo sigiloso | titiritero-extra-plugin-sigilo | Ayuda a evitar la detección |
| Agregar retrasos | página.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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleLogin</span>(<span class="hljs-params">username, password</span>) {
<span class="hljs-keyword">try</span> {
<span class="hljs-comment">// Click cookie accept button if visible</span>
<span class="hljs-keyword">const</span> cookieButton = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.cookie-accept'</span>);
<span class="hljs-keyword">if</span> (cookieButton) <span class="hljs-keyword">await</span> cookieButton.<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Fill login form</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, username, { <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> });
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#password'</span>, password, { <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> });
<span class="hljs-comment">// Submit and wait for navigation</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#login-button'</span>)
]);
<span class="hljs-comment">// Check for error messages</span>
<span class="hljs-keyword">const</span> errorElement = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.error-message-container'</span>);
<span class="hljs-keyword">if</span> (errorElement) {
<span class="hljs-keyword">const</span> errorText = <span class="hljs-keyword">await</span> errorElement.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> el.<span class="hljs-property">textContent</span>);
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`Login failed: <span class="hljs-subst">${errorText}</span>`</span>);
}
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Login automation failed:'</span>, 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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">captureWebPage</span>(<span class="hljs-params">url</span>) {
<span class="hljs-comment">// Set viewport for consistent captures</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> });
<span class="hljs-comment">// Take full-page screenshot</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'capture.jpg'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">quality</span>: <span class="hljs-number">90</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
<span class="hljs-comment">// Generate PDF with custom settings</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'page.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">margin</span>: { <span class="hljs-attr">top</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">right</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">left</span>: <span class="hljs-string">'20px'</span> }
});
}
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">robustPageOperation</span>(<span class="hljs-params">url</span>) {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'domcontentloaded'</span>, <span class="hljs-comment">// Faster than 'networkidle2'</span>
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Monitor failed requests</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'requestfailed'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Failed request: <span class="hljs-subst">${request.url()}</span>`</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Reason: <span class="hljs-subst">${request.failure().errorText}</span>`</span>);
});
<span class="hljs-comment">// Capture a screenshot on error for debugging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'error'</span>, <span class="hljs-title function_">async</span> (error) => {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">`error-<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>.png`</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page error:'</span>, error);
});
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
<span class="hljs-keyword">throw</span> 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:
<span class="hljs-keyword">const</span> { <span class="hljs-title class_">Cluster</span> } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-cluster'</span>);
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runParallelOperations</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> cluster = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Cluster</span>.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">concurrency</span>: <span class="hljs-title class_">Cluster</span>.<span class="hljs-property">CONCURRENCY_CONTEXT</span>,
<span class="hljs-attr">maxConcurrency</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">monitor</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">task</span>(<span class="hljs-title function_">async</span> ({ page, <span class="hljs-attr">data</span>: url }) => {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url);
<span class="hljs-comment">// Perform page operations</span>
});
<span class="hljs-comment">// Queue URLs for processing</span>
<span class="hljs-keyword">const</span> urls = [<span class="hljs-string">'url1'</span>, <span class="hljs-string">'url2'</span>, <span class="hljs-string">'url3'</span>];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> url <span class="hljs-keyword">of</span> urls) {
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">queue</span>(url);
}
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">idle</span>();
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">close</span>();
}
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">optimizedPageOperation</span>(<span class="hljs-params"></span>) {
<span class="hljs-comment">// Intercept and optimize requests</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'stylesheet'</span>) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
<span class="hljs-comment">// Implement caching</span>
<span class="hljs-keyword">const</span> cache = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>();
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
<span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">ok</span>() && !cache.<span class="hljs-title function_">has</span>(url)) {
cache.<span class="hljs-title function_">set</span>(url, <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">text</span>());
}
});
}
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:
<span class="hljs-comment">// automation/browser.js</span>
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">class</span> <span class="hljs-title class_">BrowserManager</span> {
<span class="hljs-keyword">async</span> <span class="hljs-title function_">initialize</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span> = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>;
}
<span class="hljs-keyword">async</span> <span class="hljs-title function_">createPage</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">return</span> page;
}
<span class="hljs-keyword">async</span> <span class="hljs-title function_">cleanup</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>) {
<span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>.<span class="hljs-title function_">close</span>();
}
}
}
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BrowserManager</span>();
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:
<span class="hljs-keyword">const</span> winston = <span class="hljs-built_in">require</span>(<span class="hljs-string">'winston'</span>);
<span class="hljs-keyword">const</span> puppeteerExtra = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
<span class="hljs-comment">// Set up logging with winston</span>
<span class="hljs-keyword">const</span> logger = winston.<span class="hljs-title function_">createLogger</span>({
<span class="hljs-attr">level</span>: <span class="hljs-string">'info'</span>,
<span class="hljs-attr">format</span>: winston.<span class="hljs-property">format</span>.<span class="hljs-title function_">json</span>(),
<span class="hljs-attr">transports</span>: [
<span class="hljs-keyword">new</span> winston.<span class="hljs-property">transports</span>.<span class="hljs-title class_">File</span>({ <span class="hljs-attr">filename</span>: <span class="hljs-string">'automation.log'</span> })
]
});
<span class="hljs-comment">// Configure Puppeteer with stealth mode</span>
puppeteerExtra.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</span>());
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">setupAutomation</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteerExtra.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Log browser console messages</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">message</span> =></span> {
logger.<span class="hljs-title function_">info</span>(<span class="hljs-string">`Browser console: <span class="hljs-subst">${message.text()}</span>`</span>);
});
<span class="hljs-keyword">return</span> { 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 | Proposito |
|---|---|---|
| Dependencias | Instalar dependencias de Chrome | Garantiza la funcionalidad del navegador |
| Configuración de caché | Configurar el directorio .cache/puppeteer | 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:
<span class="hljs-keyword">const</span> { join } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
<span class="hljs-attr">cacheDirectory</span>: <span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">'.cache'</span>, <span class="hljs-string">'puppeteer'</span>),
<span class="hljs-attr">executablePath</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">CHROME_PATH</span> || <span class="hljs-literal">null</span>,
<span class="hljs-attr">defaultViewport</span>: {
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>
}
};
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:
| Característica | 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:
<span class="hljs-comment">// Optimize page load performance</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">indexOf</span>(request.<span class="hljs-title function_">resourceType</span>()) !== -<span class="hljs-number">1</span>) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
Prevención de errores
Utilice este fragmento para garantizar que su script espere a que aparezca un elemento antes de interactuar con él:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#target-element'</span>, {
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>
});
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: Utilice 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 ]
Artículos relacionados con
- Navegador sin interfaz gráfica Node.js: descripción general de las mejores soluciones
- Navegador sin interfaz gráfica en C#: configuración y ejemplos de código
- Instalación y configuración de Puppeteer: Solución de problemas comunes de dependencias y Chromium
- Automatización de formularios con Puppeteer: entrada de texto, llenado de formularios y simulación de usuario
