Automatización sin API: Navegador sin interfaz gráfica en la plataforma de código reducido Latenode

Hola, soy Daniel de Latenode 👋

Hoy vamos a hablar de una herramienta de automatización que no se utiliza mucho entre los expertos en código no codificado. 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 interfaz gráfica.

Explicación del navegador sin interfaz gráfica

Retrocedamos un poco 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 plenamente sus necesidades:

1. Automatizar procesos vía API.

Este es un enfoque sólido para crear flujos de datos entre diferentes aplicaciones que tienen una API pública. Puede ir al centro de desarrolladores y averiguar cómo hacer una llamada API correcta para hacer exactamente lo que necesita, o pedirle al Asistente de IA de JavaScript en Latenode que cree una integración con cualquier aplicación que necesite en segundos con solo describir su solicitud.

Lamentablemente, no todas las acciones en la web cuentan con una infraestructura API subyacente para hacer las mismas cosas automáticamente. Es en este caso que las empresas recurren al segundo método que no requiere ningún punto final de API.

2. Navegador sin interfaz gráfica para automatizar sin API

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

¿Qué es un navegador sin cabeza?

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

Una parte fundamental del navegador sin interfaz gráfica es su capacidad para ejecutar scripts personalizados de JavaScript. Le permite simular acciones del usuario, como hacer clic en botones, completar formularios y navegar por el menú de un sitio. Esto es fundamental para tareas como pruebas automatizadas, extracción de datos web y automatización de tareas repetitivas en portales web.

¿Cómo funciona un navegador sin cabeza?

El funcionamiento de un navegador sin interfaz gráfica implica algunos pasos clave, y es esencial comprenderlos para comenzar a utilizar su potencial:

1. URL para navegar:En primer lugar, debes especificar la URL de la página web con la que deseas interactuar. Es como introducir la dirección de un sitio web en un navegador normal, pero aquí lo haces mediante un script.
2. Selectores para navegar:Los selectores son fundamentales para indicarle al navegador headless con qué elementos de una página web desea interactuar. Pueden ser selectores CSS, XPath o comandos JavaScript. Le permiten identificar elementos específicos como botones, campos de texto, imágenes, etc.
3. Parámetros adicionales:Según la tarea que realice, es posible que necesite ingresar 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, debes decirle al navegador sin cabeza a dónde ir, qué encontrar, dónde hacer clic, qué texto escribir o copiar, etc.

¿Qué puede hacer un navegador sin interfaz gráfica?

Hay algunas acciones básicas que un navegador sin interfaz gráfica admite bajo su control:

• Navegación e interacción automatizadasLos navegadores sin cabeza pueden realizar tareas como completar formularios, hacer clic en enlaces, extraer datos e incluso tomar capturas de pantalla de páginas web.
• Extracción y manejo de datos:A menudo, el objetivo es extraer datos de páginas web. Los navegadores sin interfaz gráfica 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 su uso posterior.
• Ejecución de scripts personalizados:Dado que los navegadores sin cabeza pueden ejecutar JavaScript, puedes ejecutar scripts personalizados para interactuar con páginas web de formas complejas, como manejar contenido dinámico o lidiar con la autenticación.

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

Teniendo en cuenta las acciones básicas, los navegadores sin interfaz gráfica ofrecen una variedad de acciones avanzadas que pueden resultar increíblemente útiles. Para que esto sea posible, es necesario integrar el navegador sin interfaz gráfica en escenarios de código reducido en Latenode. Esto permite implementar el navegador sin interfaz gráfica en los siguientes casos de uso:

Casos de uso de navegadores sin interfaz gráfica

Ahora pasemos a casos de uso particulares que usted puede simplemente copiar, pegar y encender el Headless Browser por sí mismo, incluso sin experiencia previa.

Caso de uso n.° 1: Busque en la Web como lo hacen los complementos GPT con el navegador sin interfaz gráfica

Dato curioso: cuando utilizas ChatGPT y le pides que navegue por la web, ¡entra en juego un navegador sin interfaz gráfica! Construyamos un MVP de algo similar y pidámosle al navegador sin interfaz gráfica que realice una consulta de búsqueda por nosotros.

A continuación se presenta una breve descripción del siguiente escenario:

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

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

Después de eso, hagamos una solicitud POST y enviemos nuestra consulta de búsqueda como una clave "Buscar" en el cuerpo. En tan solo unos segundos, podremos ver el resultado de la ejecución del escenario.

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

Caso de uso n.° 2: analizar datos de páginas web con un navegador sin interfaz gráfica

¡Ahora, directamente a analizar datos de sitios web! Se puede usar de muchas maneras: desde la sincronización en tiempo real de precios de mercados hasta la extracción masiva de elementos SEO para un análisis posterior.

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

• El escenario parece el mismo:
• El webhook escucha una URL para analizar.
• El navegador sin cabeza navega a la URL proporcionada, busca y recupera títulos H1, H2 y H3.
• La respuesta de webhook muestra la lista de títulos como resultado de llamar al disparador de webhook.

Luego realizamos nuevamente una solicitud POST a nuestro escenario y enviamos el sitio web para 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 sin interfaz gráfica.

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

Segundo ejemplo:Si no tiene una API para el sitio web del cual necesita recuperar información crucial, como el tipo de cambio del dólar estadounidense y el euro a la libra esterlina, utilice un navegador sin cabeza para obtener acceso directo.

Al realizar una solicitud POST más con dos monedas, inevitablemente obtendrás dos tipos de cambio como respuesta del escenario Latenode.

Caso de uso n.° 3: completar formularios mediante un navegador sin interfaz gráfica

Ahora pasamos de la búsqueda y recuperación a la tarea de rellenar. ¿Qué tal si rellenamos un formulario web de forma automática y sin una API?

• Proporcione al navegador sin cabeza el enlace al formulario web.
• Dale texto para ingresar.
• Proporcione la ruta al elemento HTML, CSS o XPath para escribir su texto.

El código para completar un código HTML tan simple se ve así:

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: realizar capturas de pantalla con un navegador sin interfaz gráfica

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

Para hacer una presentación, creamos un gráfico dinámico en la plataforma Latenode que se actualiza cada semana con nueva información. Todo esto se hace con la ayuda de un nodo JavaScript y variables globales.

Parece así. Pero ¿qué pasa si queremos compartir este gráfico con otra persona cada semana cuando se actualice? Para hacerlo realidad, podemos pedirle ayuda a Headless Browsers para que haga una captura de pantalla y envíe el archivo a donde debe ir.

El nodo Headless Browser le devuelve una captura de pantalla en formato base64. Después, el nodo JavaScript le permite transformarla según las necesidades de su sistema para obtener este archivo.

👉Para personalizar esta plantilla lista para usar y comenzar a hacer capturas de pantalla y enviarlas a tu chat de Telegram, sigue estos pasos:

• Copia la plantilla de nuestra galería.
• En el nodo JavaScript, reemplace el token de bot de Telegram y el ChatID con sus datos.
• Implemente su escenario y llame a la URL del webhook manualmente.

Conclusión 

En este artículo, hemos descubierto el poder de los navegadores sin interfaz gráfica en Latenode, una potente herramienta para automatizaciones de código reducido. 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 completar 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 se destaque es su facilidad de uso en un entorno de poco código. Esto significa que incluso aquellos sin conocimientos profundos de codificación pueden usar sus capacidades. Desde la automatización de tareas simples hasta el manejo de interacciones web complejas, Headless Browser es una herramienta sólida para diversas necesidades.

Disfrute usando Latenode y para cualquier pregunta sobre la plataforma, Únete a nuestra comunidad de Discord de expertos en low-code.

Para obtener una representación visual de la automatización del navegador sin interfaz gráfica, mire el tutorial de Latenode sobre automatización de bajo código con la ayuda de nuestro nodo de navegador sin interfaz gráfica listo para usar en nuestra plataforma.

Artículos relacionados:

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