Hola, soy Daniel de Latenode 👋
Hoy vamos a hablar de una herramienta de automatización que no se utiliza mucho entre los expertos en no-code. Además, esta funcionalidad nativa de Latenode no está disponible en plataformas como Zapier, Make y otras, pero tiene un gran potencial para mejorar sus flujos.
Por cierto, cada vez que navega por la web a través de ChatGPT, ¡la está usando! Es un navegador headless.
Pruebe el flujo "Hacer una captura de pantalla y enviarla a Telegram" con un navegador headless
Explicación del navegador headless
Demos un paso atrás y observemos el mundo de la automatización de procesos empresariales. En la mayoría de los casos, las empresas utilizan solo dos enfoques de automatización que satisfacen por completo sus necesidades:
- Automatizar procesos mediante API.
Este es un enfoque sólido para crear flujos de datos entre diferentes aplicaciones que tienen una API pública. Puede ir usted mismo al centro para desarrolladores y averiguar cómo realizar una llamada API correcta para hacer exactamente lo que necesita, o pedir al Asistente de IA de JavaScript de Latenode que cree en segundos la integración con cualquier aplicación que necesite simplemente describiendo su solicitud.
Por desgracia, no todas las acciones en la web cuentan con una infraestructura de API subyacente que permita realizar las mismas tareas automáticamente. Ahí es donde las empresas recurren al segundo método, que no requiere ningún endpoint de API.
- Navegador headless para automatizar sin API
Este artículo trata precisamente de ello, así que póngase cómodo, relájese y profundicemos en un nuevo ámbito de automatización que más adelante le cubrirá las espaldas.
¿Qué es un navegador headless?
Imagine un navegador de internet convencional como Chrome o Firefox. Ahora elimine todas las partes visibles de la interfaz: botones, barra de direcciones y marcadores. ¿Qué queda? El «cerebro» capaz de navegar por internet, abrir sitios web e interactuar con ellos. Esto es lo que llamamos un navegador «headless». Puede automatizar diversas tareas en sitios web sin mostrar contenido visual y hacerlo a una velocidad vertiginosa. Un script, y no una persona, controla el proceso.
Una parte fundamental del navegador headless es su capacidad para ejecutar scripts personalizados de JavaScript. Esto le permite simular acciones de usuario, como hacer clic en botones, rellenar formularios y navegar por el menú de un sitio. Es esencial para tareas como las pruebas automatizadas, el web scraping y la automatización de tareas repetitivas en portales web.
¿Cómo funciona un navegador headless?
Operar un navegador headless implica algunos pasos clave, y es esencial entenderlos para empezar a aprovechar su potencial:
- URL que se va a navegar: Primero, debe especificar la URL de la página web con la que desea interactuar. Es como introducir la dirección de un sitio web en un navegador convencional, pero aquí lo hace mediante un script.
- Selectores para navegar: Los selectores son fundamentales para indicar al navegador headless con qué elementos de una página web desea interactuar. Pueden ser selectores CSS, XPath o comandos de JavaScript. Le permiten localizar elementos específicos como botones, campos de texto, imágenes, etc.
- Parámetros adicionales: Según su tarea, puede que necesite introducir texto en formularios, cargar archivos o hacer clic en botones. Estas acciones se gestionan mediante scripts que usted escribe y que especifican qué hacer y cuándo hacerlo.
Básicamente, debe indicar al navegador headless adónde ir, qué encontrar, dónde hacer clic, qué texto escribir o copiar, etc.
¿Qué puede hacer un navegador headless?
Estas son algunas acciones básicas que un navegador headless admite bajo su control:
- Navegación e interacción automatizadas: Los navegadores headless pueden realizar tareas como rellenar formularios, hacer clic en enlaces, extraer datos e incluso tomar capturas de pantalla de páginas web.
- Extracción y gestión de datos: A menudo, el objetivo es extraer datos de páginas web. Los navegadores headless pueden analizar el HTML y el texto de una página y extraer la información que necesita, que luego puede utilizarse en su aplicación o almacenarse para usarla más adelante.
- Ejecución de scripts personalizados: Puesto que los navegadores headless pueden ejecutar JavaScript, puede ejecutar scripts personalizados para interactuar con páginas web de formas complejas, como gestionar contenido dinámico o procesos de autenticación.
¿Para qué fines puedo usar un navegador headless?
Teniendo en cuenta las acciones básicas, los navegadores headless ofrecen una variedad de acciones avanzadas que pueden resultar increíblemente útiles. Para hacerlo realidad, debe integrar el navegador headless en flujos low-code de Latenode. Esto le permite implementar un navegador headless en los siguientes casos de uso:
| Funcionalidad | Descripción |
|---|---|
| Pruebas automatizadas | Use el navegador headless para realizar pruebas automatizadas de aplicaciones web y garantizar que funcionan correctamente en distintos navegadores y dispositivos. |
| Rastreo web y scraping | El navegador headless es perfecto para el rastreo web y el scraping, ya que le permite recopilar grandes cantidades de datos de la web de forma eficiente. |
| Monitorización del rendimiento | Los navegadores headless pueden ayudar a monitorizar el rendimiento de las aplicaciones web mediante el seguimiento de los tiempos de carga, la capacidad de respuesta y otras métricas clave. |
| Gestión de sitios con mucho AJAX y JavaScript | El navegador headless puede gestionar sitios con mucho AJAX y JavaScript de forma similar a un navegador convencional, lo que lo hace ideal para aplicaciones web dinámicas. |
Casos de uso del navegador headless
Ahora pasemos a casos de uso concretos que puede simplemente copiar y pegar para poner en marcha un navegador headless usted mismo, incluso sin experiencia previa.
Caso de uso n.º 1: Buscar en la web como lo hacen los plugins de GPT con un navegador headless
Dato curioso: cuando usa ChatGPT y le pide que navegue por la web, ¡entra en juego un navegador headless! Creemos un MVP de algo similar y pidamos al navegador headless que realice una consulta de búsqueda por nosotros.
Aquí tiene un breve resumen del siguiente flujo:
- La URL del webhook espera una solicitud POST con una petición de búsqueda.
- El navegador headless recibe esa solicitud, abre Google y devuelve los títulos de las primeras 10 posiciones de búsqueda.
- La respuesta del webhook devuelve el resultado al webhook.
Profundicemos un poco más en el código del navegador headless, donde asignamos los datos del webhook para que nuestro nodo de navegador headless sepa exactamente qué debe buscar en Google.
Después, realicemos una solicitud POST y enviemos nuestra consulta de búsqueda como una clave «Search» en el cuerpo. En solo unos segundos, podremos ver el resultado de la ejecución del flujo.
👉¿Quiere probarlo usted mismo? ¡Copie la plantilla lista para usar y navegue por la web con un navegador headless!
Pruebe el flujo "Hacer una captura de pantalla y enviarla a Telegram" con un navegador headless
Caso de uso n.º 2: Analizar datos de páginas web con un navegador headless
¡Ahora vayamos directamente al análisis de datos de sitios web! Puede utilizarse de muchas maneras: desde la sincronización en tiempo real de precios de marketplaces hasta la extracción masiva de elementos SEO para su posterior análisis.
Primer ejemplo: ¿qué le parece extraer todos los títulos (H1, H2, H3) de la página de destino de Latenode? ¡Hagámoslo!
- El flujo tiene la misma estructura:
- El webhook escucha una URL para analizar.
- El navegador headless navega a la URL proporcionada, encuentra y recupera los títulos H1, H2 y H3.
- La respuesta del webhook muestra la lista de títulos como resultado de llamar al desencadenante del webhook.
A continuación, realizamos de nuevo una solicitud POST a nuestro flujo y enviamos el sitio web que se va a analizar en la sección del cuerpo, como se muestra a continuación:
Como resultado, obtenemos la lista de títulos H1, H2 y H3 de la página web que enviamos al navegador headless.
Nota: lo importante es que puede utilizar esa información dentro del flujo de Latenode para cualquier transformación posterior de datos o para enviar la información donde la necesite.
Segundo ejemplo: si no tiene una API para el sitio web del que necesita recuperar información crucial, como un tipo de cambio del dólar estadounidense y el euro a la libra esterlina, use un navegador headless para acceder directamente a ella.
Al realizar otra solicitud POST con dos divisas, obtendrá inevitablemente dos tipos de cambio como respuesta del flujo de Latenode.
Caso de uso n.º 3: Rellenar formularios con un navegador headless
Ahora cambiamos el enfoque de buscar y recuperar a rellenar. ¿Qué tal rellenar automáticamente un formulario web y sin una API?
- Proporcione al navegador headless el enlace al formulario web.
- Indíquele el texto que debe introducir.
- Proporcione la ruta al elemento HTML, CSS o XPath donde debe escribir su texto.
Cree integraciones ilimitadas con ramificaciones, múltiples desencadenantes que llegan a un solo nodo, utilice low-code o escriba su propio código con AI Copilot.
El código para rellenar un código HTML tan sencillo tiene este aspecto:
const targetUrl = '<https://webhook.latenode.com/368/dev/SIMPLE_FORM>';
await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');
await page.goto(targetUrl);
// Using 'id' selectors as per your HTML structure
await page.type('#subject', data["{{$3.body.subject}}"]);
await page.type('#title', data["{{$3.body.title}}"]);
await page.type('#overview', data["{{$3.body.overview}}"]);
await page.type('#platform-updates', data["{{$3.body.updates}}"]);
await page.type('#useful-materials', data["{{$3.body.materials}}"]);
await page.type('#other-news', data["{{$3.body.news}}"]);
// The 'value' in the select option should match the 'value' attribute of the option
await page.select('#platform', 'TestEmail');
await page.click('#submit'); // Updated to use the 'id' of the submit button
// Assuming the popup is the confirmation of submission
await page.waitForSelector('#popup', {visible: true, timeout: 5000});
return { message: 'FORM SUBMITTED' };
Caso de uso n.º 4: Crear capturas de pantalla con un navegador headless
Por último, pero no menos importante, crear capturas de pantalla de cualquier cosa que pueda encontrar en la web.
Para mostrarlo, creamos un gráfico dinámico en la plataforma Latenode que se actualiza cada semana con información nueva. Todo ello con la ayuda de un nodo de JavaScript y Variables Globales.
Tiene este aspecto. Pero ¿qué pasa si queremos compartir este gráfico con otra persona cada semana cuando se actualiza? Para hacerlo realidad, podemos pedir ayuda a los navegadores headless para crear una captura de pantalla y enviar el archivo a donde sea necesario.
El nodo de navegador headless le devuelve una captura de pantalla en formato base64. Después, el nodo de JavaScript le permite transformarla según las necesidades de su sistema para obtener este archivo.
Recree este flujo con Latenode.
👉Para personalizar esta plantilla lista para usar y empezar a crear capturas de pantalla para enviarlas después a su chat de Telegram, siga estos pasos:
- Copie la plantilla de nuestra galería.
- En el nodo de JavaScript, sustituya el token del bot de Telegram y el ChatID por sus datos.
- Implemente su flujo y llame manualmente a la URL del webhook.
Conclusión
En este artículo, hemos descubierto el potencial de los navegadores headless en Latenode, una potente herramienta para automatizaciones low-code. Estos navegadores, sin la interfaz habitual de Chrome o Firefox, ofrecen una forma rápida y basada en scripts de usar la web. Son perfectos para tareas como rellenar formularios, obtener datos de sitios web y realizar pruebas automatizadas, especialmente en sitios complejos y dinámicos.
Lo que distingue a nuestro nodo de navegador headless es su facilidad de uso en un entorno low-code. Esto significa que incluso quienes no tienen amplios conocimientos de programación pueden aprovechar sus capacidades. Desde automatizar tareas sencillas hasta gestionar interacciones web complejas, el navegador headless es una herramienta sólida para diversas necesidades.
Disfrute usando Latenode y, si tiene cualquier pregunta sobre la plataforma, únase a nuestra comunidad de Discord de expertos en low-code.
Para una representación visual de la automatización con navegador headless, vea el tutorial de Latenode sobre automatización low-code con la ayuda de nuestro nodo de navegador headless listo para usar en nuestra plataforma.
