Chrome sin interfaz gráfica: cómo utilizarlo y configurarlo
Aprenda a configurar y usar Headless Chrome para automatización web, raspado y pruebas, agilizando sus flujos de trabajo sin una GUI.
¿Quieres automatizar tareas, extraer datos o probar sitios web de manera eficiente? Sin cabeza Chrome Puede ayudarte a hacer exactamente eso. Es un navegador que funciona sin una interfaz gráfica, lo que lo hace más rápido y consume menos recursos para tareas como el rastreo web, las pruebas automatizadas y el análisis SEO.
Beneficios claves:
- Raspado web: Extraer datos de sitios web que utilizan mucho JavaScript.
- Pruebas automatizadas: Ejecute pruebas más rápidas y que ahorren recursos para las canalizaciones de CI/CD.
- Supervisión del rendimiento: Simular interacciones del usuario para depurar problemas.
- Análisis SEO: Recopila y analiza rápidamente datos del sitio web.
Configuración rápida:
- Instalar Node.js y Titiritero.
- Configure ajustes básicos como el tamaño de la ventana gráfica y el bloqueo de recursos.
- Utilice scripts para automatizar tareas, capturar capturas de pantalla o generar archivos PDF.
Plataformas como Nodo tardío Simplifique aún más este proceso con herramientas de automatización de código reducido. Tanto si es un desarrollador como si es un principiante, Headless Chrome es una herramienta potente para optimizar las tareas web. Veamos cómo configurarlo y usarlo de forma eficaz.
¿Qué es un navegador sin interfaz gráfica? ¿Cómo se ejecuta un navegador sin interfaz gráfica? Chrome?
Guía de preparación
Asegúrese de que su sistema cumpla con las especificaciones requeridas y siga los pasos de instalación para su plataforma.
Requerimientos Técnicos
Comprueba la compatibilidad de tu sistema:
| Sistema operativo | Requisitos del sistema |
|---|---|
| Windows | • Windows 10 o Windows Server 2016+• Intel Pentium 4 (compatible con SSE3) o más reciente |
| macOS | • macOS Big Sur 11 o más reciente |
| Linux | • Ubuntu 18.04+ de 64 bits, Debian 10+• openSUSE 15.5+ o Fedora 39+• Intel Pentium 4 (compatible con SSE3) o más reciente |
También necesitarás instalar Node.js (última versión LTS) para usar Puppeteer.
Pasos de la instalación
Siga estos pasos según su plataforma:
Windows Descargue Chrome desde su sitio web oficial, instale Node.js y luego ejecute:
npm install puppeteermacOS Usa Homebrew Para instalar Chrome y Puppeteer:
brew install --cask google-chrome npm install puppeteerLinux Actualice su sistema e instale Chrome junto con Puppeteer:
sudo apt update sudo apt install google-chrome-stable npm install puppeteer
Después de la instalación, vuelva a verificar su configuración para asegurarse de que todo esté funcionando.
Probando su instalación
Ejecute estos comandos para confirmar que Chrome esté instalado correctamente:
google-chrome-stable --version
google-chrome-stable --headless --disable-gpu --dump-dom https://www.google.com/
Si ves la versión de Chrome y la salida HTML de Google, Chrome está listo para funcionar. Para probar Puppeteer, utiliza el siguiente script:
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
(<span class="hljs-title function_">async</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-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://www.google.com'</span>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();
Guarde este código como test.js y ejecutarlo usando node test.jsSi se ejecuta sin errores, la configuración está completa y está listo para comenzar con las tareas de automatización.
Ajustes básicos
Configuración básica
Configure las configuraciones esenciales para garantizar una automatización fluida, una gestión eficaz de los recursos y un manejo confiable de las solicitudes.
<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>,
<span class="hljs-string">'--disable-dev-shm-usage'</span>,
<span class="hljs-string">'--disable-accelerated-2d-canvas'</span>,
<span class="hljs-string">'--disable-gpu'</span>
]
});
Esta configuración funciona bien para la mayoría de las tareas de automatización, ya que utiliza dimensiones de pantalla de escritorio estándar y argumentos centrados en la estabilidad. Puede modificar estas configuraciones en función de sus requisitos específicos.
Configuración específica de la tarea
Ajuste la configuración para tareas individuales. Por ejemplo, si está trabajando en el rastreo web, puede reducir el uso de recursos y evitar la detección:
<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">// Block unnecessary resources</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_">includes</span>(request.<span class="hljs-title function_">resourceType</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">// Set custom headers</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
<span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
<span class="hljs-string">'User-Agent'</span>: <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'</span>
});
<span class="hljs-comment">// Enable JavaScript if required</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setJavaScriptEnabled</span>(<span class="hljs-literal">true</span>);
Para las pruebas automatizadas, priorice la estabilidad y la consistencia:
<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_">setDefaultTimeout</span>(<span class="hljs-number">30000</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">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
Puede mejorar aún más el rendimiento modificando la configuración de velocidad y asignación de recursos.
Configuración de velocidad y recursos
Mejore el rendimiento de Headless Chrome administrando los recursos de manera eficaz. A continuación, se muestran algunas configuraciones útiles:
| Tipo del ajuste | Configuration | Proposito |
|---|---|---|
| Salud Cerebral | --tamaño máximo del espacio anterior=4096 | Asigna hasta 4 GB de memoria para Node.js |
| Proceso | --proceso único | Ejecuta Chrome como un único proceso |
| representación | --deshabilitar-gpu | Desactiva la aceleración de hardware de la GPU (como se mostró anteriormente) |
Para tareas de mayor escala, puede ejecutar varias sesiones de navegador simultáneamente mientras administra recursos:
<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">puppeteerOptions</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>]
}
});
Además, ajuste la configuración de tiempo de espera para que coincida con las condiciones de su red:
page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">60000</span>); <span class="hljs-comment">// 60 seconds for navigation</span>
page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>); <span class="hljs-comment">// 30 seconds for other tasks</span>
Estas configuraciones le ayudarán a lograr un equilibrio entre velocidad, estabilidad y eficiencia de recursos.
sbb-itb-23997f1
Operaciones de JavaScript
Chrome sin cabeza puede ejecutar JavaScript y gestionar interacciones web de manera efectiva con Puppeteer.
Ejecución de scripts simples
Puppeteer simplifica la automatización del navegador:
<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-comment">// Navigate to a page and wait for the network to be idle</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-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Get the page title using JavaScript</span>
<span class="hljs-keyword">const</span> pageTitle = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span>;
});
<span class="hljs-comment">// Extract specific data from the page</span>
<span class="hljs-keyword">const</span> results = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> data = [];
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-item'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
data.<span class="hljs-title function_">push</span>({
<span class="hljs-attr">name</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.title'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">price</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>
});
});
<span class="hljs-keyword">return</span> data;
});
Métodos de interacción de la página
Puede simular acciones del usuario, como clics y escritura, para que las interacciones parezcan más naturales:
<span class="hljs-comment">// Wait for an element to appear and click it</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-comment">// Type text into an input field with random delays</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, <span class="hljs-string">'[email protected]'</span>, {
<span class="hljs-attr">delay</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">100</span>) + <span class="hljs-number">50</span>
});
<span class="hljs-comment">// Handle form submission 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">'#submit-button'</span>)
]);
"Un navegador sin interfaz gráfica es una gran herramienta para pruebas automatizadas y entornos de servidor donde no se necesita una interfaz de usuario visible". - Eric Bidelman [ 2 ]
Gestión de elementos dinámicos
El contenido dinámico requiere un manejo específico para garantizar una interacción adecuada:
<span class="hljs-comment">// Wait for dynamic content to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
<span class="hljs-string">'document.querySelector(".dynamic-content").childNodes.length > 0'</span>,
{ <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> }
);
<span class="hljs-comment">// Handle infinite scrolling</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">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
<span class="hljs-keyword">let</span> totalHeight = <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> distance = <span class="hljs-number">100</span>;
<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollBy</span>(<span class="hljs-number">0</span>, distance);
totalHeight += distance;
<span class="hljs-keyword">if</span> (totalHeight >= <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollHeight</span>) {
<span class="hljs-built_in">clearInterval</span>(timer);
<span class="hljs-title function_">resolve</span>();
}
}, <span class="hljs-number">100</span>);
});
});
}
A continuación se muestran algunos escenarios y soluciones comunes para trabajar con elementos dinámicos:
| Guión | Solución: | Caso de uso |
|---|---|---|
| Estados de carga | Utilice waitForSelector con verificación de visibilidad | Aplicaciones de una sola página |
| Actualizaciones de AJAX | Utilice waitForFunction para verificar el contenido | Fuentes de datos en tiempo real |
| DOM de sombra | Utilice evaluateHandle con selectores personalizados | Componentes web |
Sugerencias de optimización:
- Utilice esperas explícitas para evitar retrasos innecesarios.
- Implementar el manejo de errores para administrar fallas de script.
- Vigila el uso de la CPU y la memoria durante la ejecución.
- Deshabilite recursos no esenciales como imágenes o anuncios para mejorar el rendimiento.
Características Avanzadas
Basándose en configuraciones básicas y operaciones de JavaScript, estas funciones avanzadas llevan a Headless Chrome al siguiente nivel. Permiten una salida más refinada y un mejor manejo de errores, lo que hace que sus tareas de automatización sean aún más eficientes.
Creación de captura de pantalla
Hacer capturas de pantalla con Puppeteer es muy sencillo. A continuación, te indicamos cómo puedes hacer una captura de pantalla de página completa:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<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">// Set a consistent viewport size</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-comment">// Wait for the page to load and capture a full-page screenshot</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-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</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">'full-page.jpg'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
¿Necesitas capturar un elemento específico? Concéntrate en una sección particular de la página:
<span class="hljs-comment">// Screenshot of a specific element</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.hero-section'</span>);
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'hero.png'</span>,
<span class="hljs-attr">omitBackground</span>: <span class="hljs-literal">true</span>
});
| Opción de captura de pantalla | Mejor caso de uso | Impacto en el rendimiento |
|---|---|---|
| Formato JPEG | Capturas de pantalla grandes, procesamiento más rápido | Menor calidad, tamaño de archivo más pequeño |
| Formato PNG | Se requiere alto nivel de detalle o transparencia. | Archivos más grandes, procesamiento más lento |
| Específico del elemento | Componentes de la interfaz de usuario, captura selectiva | Uso mínimo de recursos |
Creación de PDF
También puedes generar archivos PDF con formato personalizado:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'document.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">margin</span>: {
<span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">right</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">left</span>: <span class="hljs-string">'1in'</span>
},
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">displayHeaderFooter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">headerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Generated on {{date}}</div>'</span>,
<span class="hljs-attr">footerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'</span>
});
"Chrome sin interfaz gráfica es una forma de ejecutar el navegador Chrome en un entorno sin interfaz gráfica. Básicamente, se trata de ejecutar Chrome sin Chrome. Incorpora todas las funciones de la plataforma web moderna proporcionadas por Chromium y el motor de renderizado Blink a la línea de comandos". - Eric Bidelman, Chrome para desarrolladores [ 2 ]
Una vez que sus resultados estén listos, puede utilizar herramientas integradas para depurar y ajustar el rendimiento.
Herramientas de resolución de problemas
La depuración de problemas en Headless Chrome es más sencilla con el protocolo Chrome DevTools:
<span class="hljs-comment">// Enable debugging</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-attr">devtools</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--remote-debugging-port=9222'</span>]
});
<span class="hljs-comment">// Add error logging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Browser console:'</span>, msg.<span class="hljs-title function_">text</span>()));
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'pageerror'</span>, <span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page error:'</span>, err));
Para problemas más complejos, puede automatizar la captura de errores:
<span class="hljs-keyword">try</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">catch</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">'Navigation failed:'</span>, error);
}
Por ejemplo, Chrome DevTools se ha utilizado para solucionar problemas de identificación de elementos en los servicios IDP de Google. [ 3 ].
| Método de depuración | Proposito | Cuándo usar |
|---|---|---|
| Herramientas de desarrollo remotas | Inspección en vivo | Problemas de representación complejos |
| Registro de consola | Seguimiento de la ejecución del script | Problemas de flujo de script |
| Capturas de pantalla de error | Depuración visual | Fallos relacionados con la interfaz de usuario |
Usando Chrome sin interfaz gráfica con Nodo tardío
En esta sección se explica cómo utilizar una plataforma de código reducido como Latenode para la automatización de Chrome sin interfaz gráfica. Latenode integra Chrome sin interfaz gráfica en su sistema, lo que hace que la automatización web sea sencilla tanto para desarrolladores como para usuarios sin conocimientos técnicos.
Sobre Nosotros Nodo tardío
Latenode incluye la funcionalidad Headless Chrome incorporada a través de su sistema de nodos "Headless browser". Esto permite a los equipos automatizar los flujos de trabajo sin tener que gestionar Puppeteer directamente.
| Característica | Descripción | Beneficio |
|---|---|---|
| Constructor Visual | Creación de flujo de trabajo de arrastrar y soltar | Simplifica las tareas básicas de automatización. |
| Copiloto de código de IA | Generación de código automatizada | Acelera la configuración de escenarios complejos |
| Almacenamiento de datos integrado | Manejo de datos integrado | Facilita la gestión de los datos extraídos |
| Integración de NPM | Acceso a más de 1 millón de paquetes | Añade funcionalidad adicional |
Pasos para la configuración de Latenode
A continuación se muestra un ejemplo de script para comenzar:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">run</span>(<span class="hljs-params">{execution_id, input, data, page}</span>) {
<span class="hljs-comment">// Set user agent for better compatibility</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102'</span>);
<span class="hljs-comment">// Configure viewport for reliable element detection</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">1</span>
});
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">status</span>: <span class="hljs-string">'success'</span>
}
}
Para tareas web más avanzadas, el nodo de navegador sin interfaz gráfica de Latenode brinda acceso a funciones de manipulación de páginas. También administra instancias de navegador automáticamente, por lo que no es necesario configurar Puppeteer manualmente.
Aspectos destacados de la plataforma
Latenode optimiza la automatización de Chrome sin interfaz gráfica al abordar los desafíos comunes de la codificación tradicional. Las características principales incluyen:
- Manejo automático de errores y opciones de reintento
- Gestión de proxy integrada
- Herramientas de depuración visual para flujos de trabajo
- Seguimiento del historial de ejecución durante hasta 60 días (disponible en el plan Prime)
El precio se basa en el uso de la ejecución y ofrece opciones que van desde un nivel gratuito (300 créditos) hasta planes de nivel empresarial que admiten hasta 1.5 millones de ejecuciones de escenarios por mes. Esto lo convierte en una opción flexible y económica para escalar los esfuerzos de automatización.
Para los equipos que manejan múltiples flujos de trabajo, el generador visual acelera el desarrollo y admite funciones avanzadas como captura de pantalla y generación de PDF. Al simplificar la implementación y la administración, Latenode mejora lo que ya ofrece Headless Chrome, lo que hace que la automatización sea más accesible.
Conclusión
Resumen
El Chrome sin interfaz gráfica hace que la automatización web sea más rápida y eficiente al eliminar la necesidad de una interfaz de navegador completa. Reduce el consumo de recursos y acelera los procesos, lo que lo hace ideal para tareas como el rastreo web, las pruebas, el análisis de SEO y el seguimiento del rendimiento. [ 1 ]Plataformas como Latenode facilitan la implementación de Headless Chrome con herramientas visuales y funciones automatizadas, lo que requiere menos conocimientos técnicos.
Primeros Pasos
Siga estos pasos para comenzar a utilizar Headless Chrome:
Conceptos básicos de configuración:
Instala Node.js y Puppeteer. Estas herramientas ofrecen API que simplifican las tareas de automatización.Configurar ajustes:
Comience por navegar por las páginas y tomar capturas de pantalla. Ajuste el rendimiento ajustando estas configuraciones:Configuración Proposito Beneficio Desactivar imágenes Ahorre ancho de banda Cargas de página más rápidas Ventana gráfica personalizada Garantizar una representación consistente Mejor detección de elementos Bloqueo de recursos Evite descargas innecesarias Ejecución más rápida Funciones avanzadas:
UsawaitForSelectorPara gestionar contenido dinámico y configurar el manejo de errores para que las operaciones sean más fluidas. Para escalar, Latenode ofrece planes flexibles, comenzando con un nivel gratuito (300 créditos) y llegando hasta soluciones empresariales que admiten hasta 1.5 millones de ejecuciones mensuales.
Artículos relacionados con
