Automatizar sin API: Headless Browser en plataforma low-code Latenode

Hola, soy Daniel de Latenode 👋

Hoy vamos a hablar de una herramienta de automatización que no es muy utilizada entre los expertos en no-código. Además, esta función, nativa de Latenode, no está disponible en plataformas como Zapier, Make y otras, pero tiene un gran potencial para mejorar tus flujos de trabajo.

Por cierto, cada vez que navegas por la web a través de ChatGPT, ¡lo estás utilizando! Es un Navegador sin Cabeza.

Explicación de Headless Browser

Demos un paso atrás y observemos el mundo de la automatización de los procesos empresariales. En la mayoría de los casos, las empresas utilizan sólo dos enfoques de automatización que satisfacen plenamente sus necesidades:

1. Automatiza procesos mediante API.

Este es un enfoque sólido para construir flujos de datos entre distintas aplicaciones que tengan una API pública. O bien vas tú mismo al centro de desarrollo y averiguas cómo hacer una llamada correcta a la API para hacer precisamente lo que necesitas, o bien le pides al Asistente de Inteligencia Artificial de JavaScript en Latenode que construya la integración con cualquier aplicación que necesites en cuestión de segundos, simplemente describiendo tu petición.

Por desgracia, no todas las acciones en la web tienen una infraestructura API subyacente para hacer las mismas cosas automáticamente. Ahí es donde las empresas recurren al segundo método, que no requiere ningún punto final de API.

2. Headless Browser para automatizar sin APIs

Este artículo trata de ello, así que toma asiento, relájate y vamos a sumergirnos en un nuevo campo de automatización que más adelante te cubrirá las espaldas.

¿Qué es un Navegador sin Cabeza?

Imagina un navegador de Internet normal, como Chrome o Firefox. Ahora, elimina todas las partes visibles de la interfaz: botones, barra de direcciones, marcadores. ¿Qué queda? El "cerebro" que puede navegar por Internet, abrir sitios web e interactuar con ellos. Esto es lo que llamamos un navegador "sin cabeza". Puede automatizar diversas tareas en los sitios web sin mostrar contenido visual y puede hacerlo a una velocidad vertiginosa. Un script, no un humano, controla el proceso.

Una parte crucial de Headless Browser es su capacidad para ejecutar scripts personalizados de JavaScript. Te permite simular acciones del usuario como pulsar botones, rellenar formularios y navegar por el menú de un sitio. Esto es crucial para tareas como pruebas automatizadas, web scraping y automatización de tareas repetitivas en portales web.

¿Cómo funciona un navegador sin cabeza?

El funcionamiento de un navegador sin cabeza implica unos cuantos pasos clave, y es esencial comprenderlos para empezar a utilizar su potencial:

1. URL para navegar: En primer lugar, tienes que especificar la URL de la página web con la que quieres interactuar. Esto es como introducir la dirección de un sitio web en un navegador normal, pero aquí lo haces a través de un script.
2. Selectores para navegar: Los selectores son cruciales para indicar al navegador sin cabeza con qué elementos de una página web quieres interactuar. Pueden ser selectores CSS, XPath o comandos JavaScript. Te permiten señalar elementos específicos como botones, campos de texto, imágenes, etc.
3. Parámetros adicionales: Dependiendo de tu tarea, puede que necesites introducir texto en formularios, subir archivos o pulsar botones. Estas acciones se gestionan mediante guiones que tú escribes, que especifican qué hacer y cuándo hacerlo.

Básicamente, debes decirle al Navegador sin Cabeza adónde ir, qué encontrar, dónde hacer clic, qué texto escribir o copiar, etc.

¿Qué puede hacer un navegador sin cabeza?

Hay algunas acciones básicas que un Navegador sin Cabeza soporta bajo tu control:

• Navegación e interacción automatizadas: Los navegadores sin cabeza pueden realizar tareas como rellenar formularios, hacer clic en enlaces, raspar datos e incluso hacer capturas de pantalla de páginas web.
• Extracción y tratamiento de datos: A menudo, el objetivo es extraer datos de las páginas web. Los navegadores sin cabeza pueden analizar el HTML y el texto de una página y extraer la información que necesitas, que luego puedes utilizar en tu aplicación o almacenar para su uso posterior.
• Ejecutar scripts personalizados: Puesto que los navegadores sin cabeza pueden ejecutar JavaScript, puedes ejecutar scripts personalizados para interactuar con las páginas web de formas complejas, como manejar contenido dinámico o gestionar la autenticación.

¿Para qué fines puedo utilizar un navegador sin cabeza?

Teniendo en cuenta las acciones básicas, los Navegadores sin Cabeza ofrecen una serie de acciones avanzadas que pueden ser increíblemente útiles. Para hacerlo realidad, necesitas integrar el navegador sin cabeza en escenarios de código bajo en Latenode. Eso te permite implementar el navegador sin cabeza en los siguientes casos de uso:

Casos prácticos de Headless Browser

Ahora pasemos a casos de uso concretos que puedes simplemente copiar-pegar y activar el encendido de Headless Browser por ti mismo, incluso sin experiencia previa.

Caso práctico nº 1: Buscar en la Web como hacen los plugins GPT con Headless Browser

Dato curioso: cuando utilizas ChatGPT y le pides que navegue por la web, ¡entra en juego un Navegador sin Cabeza! Construyamos un MVP de algo similar y pidámosle al Headless Browser que haga una consulta de búsqueda por nosotros.

He aquí un breve resumen del siguiente escenario:

• La URL del Webhook busca una solicitud de publicación con una solicitud de búsqueda.
• Headless Browser recibe esa petición, abre Google y devuelve los títulos de las 10 primeras posiciones de búsqueda.
• La respuesta del webhook devuelve al webhook el resultado.

Profundicemos un poco más en el código del navegador sin cabeza, donde mapeamos los datos del webhook, para que nuestro nodo Headless Browser sepa qué debe buscar exactamente en Google.

Después, hagamos una petición POST y enviemos nuestra consulta de búsqueda como una Clave 'Buscar' en el Cuerpo. En unos segundos, podremos ver el resultado de la ejecución del escenario.

¿Quieres probarlo tú mismo? ¡Copia la plantilla lista para usar y navega por la web con Headless Browser!

Caso práctico nº 2: Analizar datos de páginas web con un navegador sin cabeza

¡Ahora directamente a analizar datos de sitios web! Su uso es muy amplio: desde la sincronización en tiempo real de los precios de los mercados hasta el raspado masivo de elementos SEO para su posterior análisis.

Primer ejemplo: ¿qué tal si raspamos todos los títulos (H1, H2, H3) de la página de aterrizaje de Latenode? ¡Hagámoslo!

• El escenario es el mismo:
• El Webhook espera una URL para analizarla.
• Headless Browser navega a la URL proporcionada, encuentra y recupera los Títulos H1, H2, H3.
• La Respuesta Webhook muestra la lista de títulos como resultado de llamar al activador Webhook.

A continuación, volvemos a hacer una petición POST a nuestro escenario y enviamos el sitio web a analizar en la sección body, 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 sin cabeza.

Nota: Lo importante es que puedes operar con esa información dentro del escenario Latenode para cualquier otra transformación de datos o envío de información a donde necesites.

Segundo ejemplo: si no tienes una API para el sitio web del que necesitas recuperar alguna información crucial, como un tipo de cambio de dólar estadounidense y euro a libra inglesa, utiliza un navegador headless para acceder directamente a él.

Al hacer una petición POST más con dos monedas, inevitablemente obtendrás dos tipos de cambio como respuesta del escenario Latenode .

Caso práctico nº 3: Rellenar formularios con Headless Browser

Ahora pasamos de buscar y recuperar a rellenar. ¿Qué te parece rellenar un formulario web automáticamente y sin una API?

• Proporciona al navegador sin cabeza el enlace al formulario web.
• Dale texto para introducir.
• Proporciona la ruta al elemento HTML, CSS o XPath para escribir tu texto.

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 práctico nº 4: Hacer capturas de pantalla con Headless Browser

Por último, pero no menos importante, haz capturas de pantalla de todo lo que encuentres en la web.

Para hacer un escaparate, construimos un gráfico dinámico en la plataforma Latenode que se actualiza cada semana con nueva información. Todo ello con la ayuda de un nodo JavaScript y Variables Globales.

Tiene este aspecto. Pero, ¿y si queremos compartir este gráfico con otra persona cada semana cuando se actualice? Para hacerlo realidad, podemos pedir ayuda a Headless Browsers para hacer una captura de pantalla y enviar el archivo a donde tenga que ir.

El nodo Headless Browser te devuelve una captura de pantalla en formato base64. Después, el nodo JavaScript te permite transformarlo como necesite tu sistema posterior para obtener este archivo.

👉Para personalizar esta plantilla lista para usar y empezar a hacer capturas de pantalla con posterior envío a tu chat de Telegram, sigue estos pasos:

• Copia la plantilla de nuestra galería.
• En el nodo JavaScript, sustituye el Telegram Bot Token & ChatID por tus datos.
• Despliega tu escenario y llama manualmente a la URL del webhook.

Conclusión 

En este artículo, hemos descubierto el poder de los Navegadores sin Cabeza en Latenode, una potente herramienta para automatizaciones de bajo código. Estos navegadores, sin la interfaz habitual de Chrome o Firefox, ofrecen una forma rápida y basada en scripts de utilizar 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 hace que nuestro nodo Headless Browser destaque es su facilidad de uso en un entorno de bajo código. Esto significa que incluso quienes no tengan profundos conocimientos de codificación pueden utilizar sus capacidades. Desde la automatización de tareas sencillas hasta el manejo de interacciones web complejas, Headless Browser es una herramienta robusta para diversas necesidades.

Disfruta utilizando Latenode, y para cualquier pregunta sobre la plataforma, únete a nuestra comunidad Discord de expertos en low-code.

Para una representación visual de la Automatización de Headless Browser, mira el tutorial Latenode sobre automatización de bajo código con la ayuda de nuestro nodo Headless Browser listo para usar en nuestra plataforma.

Artículos relacionados:

• JavaScript + IA: un dúo perfecto para automatizaciones de bajo código
• Crear integración con cualquier app: Dos métodos
• ¡La primera oferta de por vida para los madrugadores!