Header Ads Widget

Ticker

6/recent/ticker-posts

Headless Browser: un paso hacia el desarrollo de aplicaciones web más inteligentes

 Los sitios web, que son la principal fuente de comunicación en el mundo de la transformación digital, han evolucionado enormemente desde la última década. El desarrollo web ha crecido a un ritmo tremendo con una gran cantidad de marcos de pruebas de automatización que vienen tanto para el desarrollo frontend como para el backend. Los sitios web se han vuelto más inteligentes, al igual que las herramientas y los marcos subyacentes. Con un aumento significativo en el área de desarrollo web, los navegadores también se han vuelto más inteligentes. Hoy en día, puede encontrar navegadores sin cabeza, donde los usuarios pueden interactuar con el navegador sin GUI. Incluso puede raspar sitios web en navegadores sin cabeza utilizando paquetes como Puppeteer y nodejs.

El desarrollo web eficiente depende en gran medida de un mecanismo de prueba para la evaluación de la calidad antes de que podamos impulsarlos en entornos de producción. Los navegadores sin cabeza pueden realizar pruebas de extremo a extremo, pruebas de humo, etc. a una velocidad más rápida, ya que están libres de la sobrecarga del espacio de memoria requerido para la interfaz de usuario. Además, los estudios han demostrado que los navegadores sin cabeza generan más tráfico que los no automatizados. Los navegadores populares como Chrome pueden incluso ayudar a depurar las páginas web en tiempo real, analizar el rendimiento, notificar el consumo de memoria, habilitar el ajuste del código y analizar el rendimiento en tiempo real, etc. ¿No se dirige esta evolución de los navegadores hacia un desarrollo web más inteligente? ¿proceso? Entonces, en este blog, tendremos una descripción general de los navegadores sin cabeza y entenderemos cómo ayuda a un desarrollo de sitios web más inteligente y rápido.

¿Qué es un navegador sin cabeza?

Un navegador sin cabeza es simplemente un navegador sin la GUI. Tiene todas las capacidades de renderizar un sitio web, como un sitio web normal. Dado que la GUI no está disponible en el navegador con el modo sin cabeza, necesitamos usar la línea de comandos para interactuar con el navegador. Los navegadores sin cabeza están diseñados para tareas como pruebas de automatización , pruebas de bibliotecas javascript, simulación e interacciones de javascript.

Una de las principales razones para utilizar el navegador sin cabeza o las pruebas de navegador sin cabeza es que le permite ejecutar las pruebas más rápidamente y en un entorno real. Por ejemplo, la combinación de herramientas de desarrollo de Chrome y Chrome sin cabeza le permite editar páginas sobre la marcha y, lo que le ayuda a diagnosticar el problema rápidamente, en última instancia le ayuda a desarrollar mejores sitios web más rápido. Por lo tanto, los navegadores sin cabeza son más rápidos, flexibles y optimizados para realizar tareas como las pruebas de automatización basadas en la web. Al igual que un navegador normal, el navegador sin cabeza es capaz de realizar tareas como análisis de enlaces de JavaScript, hacer clic en enlaces, hacer frente a cualquier descarga y para ejecutar esto necesitamos utilizar la línea de comandos. Por lo tanto, puede proporcionar un contexto de navegador real sin la memoria consumida para ejecutar un navegador completo sin una GUI.

La necesidad de un navegador sin cabeza

Con los avances en las tecnologías de desarrollo de sitios web, las pruebas de sitios web han tomado un lugar central y se han convertido en los pasos más esenciales en el desarrollo de sitios web de alto rendimiento. Incluso los navegadores se están volviendo más inteligentes, ya que pueden cargar las bibliotecas de JavaScript para realizar pruebas de automatización. ¿No es ese un salto transformador significativo en las pruebas de sitios web? Así que tengamos una descripción general de algunas de las principales funciones que realizan los navegadores sin cabeza.

Permite pruebas web más rápidas mediante la interfaz de línea de comandos

Con las pruebas de navegador cruzado sin cabeza , nos ahorramos la sobrecarga de memoria consumida en la GUI, por lo tanto, permite pruebas de sitios web más rápidas, utilizando la línea de comandos como la fuente principal de interacción. Los navegadores sin cabeza están diseñados para ejecutar casos de prueba cruciales, como las pruebas de extremo a extremo, lo que garantiza que el flujo de una aplicación funciona según lo diseñado de principio a fin. Los navegadores sin cabeza se adaptan a este caso de uso, ya que permiten pruebas de sitios web más rápidas.

Raspado de sitios web

El navegador sin cabeza ahorra la sobrecarga de abrir la GUI, lo que permite un raspado más rápido de los sitios web. En los navegadores sin cabeza podemos automatizar el mecanismo de raspado y extraer los datos de una manera mucho más optimizada.

Tomar capturas de pantalla web

Aunque los navegadores sin cabeza no utilizan ninguna GUI, sí permiten a los usuarios tomar instantáneas del sitio web que están representando. Es muy útil en los casos en que el evaluador está probando el sitio web y necesita visualizar los efectos del código y guardar los resultados en forma de capturas de pantalla. En un navegador sin cabeza, puede tomar fácilmente una gran cantidad de capturas de pantalla sin ninguna interfaz de usuario real.

Mapeo del recorrido del usuario en los sitios web

Los navegadores sin cabeza le permiten mapear mediante programación los casos de prueba del recorrido del cliente. Aquí, los navegadores sin cabeza ayudan a los usuarios a optimizar la experiencia del usuario a lo largo de su proceso de toma de decisiones en el sitio web.

Ahora que hemos entendido qué es un navegador sin cabeza y sus numerosas características, junto con su cualidad clave de ser un navegador liviano que ayuda a acelerar la velocidad de las pruebas, echemos un vistazo al navegador sin cabeza más popular, Headless Chrome y veamos que desbloquea

Sumergirse en Headless Chrome y Chrome DevTools

Tenemos varios navegadores sin cabeza y, por nombrar algunos, Firefox versión 55 y 56, PhantomJs, Html Unit, Splinter, jBrowserDriver, etc. Chrome 59 es la versión de Chrome para ejecutarlo en modo sin cabeza. Headless Chrome y Chrome DevTools es una combinación bastante poderosa que permite a los usuarios funciones listas para usar. Así que tengamos una descripción general de Headless Chrome y Chrome DevTools.

¿Qué es Headless Chrome?

El envío de Chrome sin cabeza en Chrome 59 básicamente ejecuta Chrome en un entorno sin cabeza. Está ejecutando Chrome sin GUI. Este navegador ligero, que ahorra memoria y de ejecución rápida incorpora todas las funciones de la plataforma web moderna que ofrece el motor de renderizado de cromo y parpadeo a la línea de comandos.

Según los estudios, los navegadores automatizados siempre generaron más tráfico que los no automatizados. En una encuesta reciente, se descubrió que Chrome sin cabeza generaba más tráfico que su líder anterior Phantum Js dentro de un año de su lanzamiento.
Aparte de esto, hay varias razones por las que Chrome es el navegador sin cabeza más popular. Una de las razones es que siempre se están actualizando funciones listas para usar , que introducen constantemente nuevas tendencias en el desarrollo web . También consta de un motor de renderizado llamado Blink, que se actualiza constantemente a medida que evoluciona el sitio web. ¿Qué desbloquea el Chrome sin cabeza?

  • La capacidad de probar las últimas funciones de la plataforma web, como los módulos ES6, service worker y streams.
  • Permite acceder mediante programación a las herramientas de desarrollo de Chrome y hace uso de características increíbles como la limitación de la red, la emulación de dispositivos, el análisis del rendimiento del sitio web, etc.
  • Prueba varios niveles de navegación
  • Recopilar información de la página
  • Toma capturas de pantalla
  • Crear archivos PDF

Ahora echemos un vistazo a las banderas más comunes para comenzar a trabajar con Chrome sin cabeza:

Empezando sin cabeza

Para comenzar sin cabeza, necesita un Chrome 59+ y abra el binario de Chrome desde la línea de comando. Si tiene Chrome 59+ instalado, inicie Chrome con

La - bandera sin cabeza inicia el cromo en modo sin cabeza

De manera similar, para imprimir el DOM, crear pdf, tomar capturas de pantalla, simplemente podemos usar las siguientes banderas

Imprimir el DOM

La marca –dump-dom imprime document.body.innerHTML en stdout

Crea un PDF

La marca –print-to-pdf crea un PDF de la página:

Tomando capturas de pantalla

Para capturar una captura de pantalla de una página, utilice el -screenshot bandera

Depurar un código sin la interfaz de usuario del navegador

Si desea depurar su código en un navegador sin cabeza usando las herramientas de desarrollo de Chrome, tome nota de la siguiente bandera. –Puerto-de-depuración-remoto = 9222. Esta bandera le ayuda a abrir Chrome sin cabeza en un modo especial, en el que la herramienta de desarrollo de Chrome puede interactuar con el navegador sin cabeza para editar la página web durante el tiempo de ejecución. Profundizaremos en Chrome Devtools en la sección posterior del blog.

Para la depuración de la página web con cromo devtools, utilice el --remote depurar-port = 9222 bandera .

¿Qué es Chrome DevTool?

Chrome DevTools es un conjunto de herramientas de desarrollo web integradas directamente en Google Chrome. Ayuda a depurar las páginas web sobre la marcha y, por lo tanto, ayuda a detectar los errores rápidamente, lo que en última instancia ayuda a desarrollar los sitios web más rápido.

La forma más sencilla de abrir devtools es hacer clic derecho en su página web y hacer clic en inspeccionar. Ahora, según su propósito de utilizar la herramienta devtool, puede abrir varias consolas. Por ejemplo, para trabajar con DOM o CSS, puede hacer clic en el panel de elementos , para ver los mensajes registrados o ejecutar javascript, haga clic en el panel de la consola , para depurar el javascript, haga clic en el panel de origen , para ver la actividad de la red, haga clic en el panel de red, para analizar el rendimiento de la página web haga clic en el panel de rendimiento , para solucionar problemas de memoria haga clic en el panel de memoria .

Como podemos ver, Chrome devtools es un paquete de diversas funcionalidades que ayuda a depurar una página web en el navegador Chrome. Pero, ¿qué pasa con el navegador sin cabeza y sin interfaz de usuario, cómo podemos depurar la página web sin interfaz de usuario? ¿Pueden las herramientas de desarrollo de Chrome ayudar a depurar un navegador sin cabeza? Desmitifiquemos las formas de depurar un navegador sin cabeza con herramientas de desarrollo de Chrome, discutamos qué es titiritero en las siguientes secciones del blog.

Titiritero

Como se discutió anteriormente, una de las formas de depurar una página web en un navegador sin cabeza es usar el indicador –remote-debugging-port = 9222 en la línea de comando que ayuda a aprovechar las herramientas de desarrollo de Chrome mediante programación. Pero, hay otra capa en la imagen para jugar con el cromo sin cabeza para realizar numerosas tareas listas para usar y hacer uso del sin cabeza de una manera más eficiente. Aquí, Titiritero entra en escena.

Puppeteer es una biblioteca de nodos que proporciona una API de alto nivel para controlar Chrome sobre el protocolo devtools. Titiritero normalmente no tiene cabeza, pero también se puede configurar para usar Chrome completo sin cabeza. Proporciona acceso completo a todas las funciones de Chrome sin cabeza y también puede ejecutar Chrome completamente en un servidor remoto, lo que es muy beneficioso para los equipos de automatización. Sería bastante justificado denominar Puppeteer como el navegador sin cabeza oficial de Chrome del equipo de Google Chrome.

Una de las mayores ventajas de utilizar titiritero como marco de automatización para las pruebas es que, a diferencia de otros marcos, es muy simple y fácil de instalar.

Como puppeteer es una biblioteca de javascript de nodos, primero que nada necesita instalar nodejs en su sistema. Nodejs viene con el npm (administrador de paquetes de nodos) que nos ayudará a instalar el paquete puppeteer.

El siguiente fragmento de código le ayudará a instalar nodejs

## Actualización de las bibliotecas del sistema

## sudo apt-get update

## Instalación de node js en el sistema

## sudo apt-get install nodejs

Una vez que haya terminado con la instalación del nodo js en su máquina, puede ejecutar el siguiente indicador para instalar puppeteer.

npm yo titiritero

Con esto completó la instalación de titiritero que también descargará por defecto la última versión de Chrome.

¿Por qué es tan útil el titiritero?

Puppeteer proporciona acceso completo a todas las funciones listas para usar proporcionadas por el cromo sin cabeza y su motor de renderizado en constante actualización llamado blink. Además de los marcos de prueba de automatización más utilizados para aplicaciones web como el controlador web de selenio, el titiritero es tan popular ya que proporciona automatización para un navegador sin cabeza de peso ligero (sin interfaz de usuario) que ayuda a realizar pruebas más rápido. Asimismo, existen múltiples funcionalidades proporcionadas por titiritero, así que echémosle un vistazo.

  • Puede ayudar a generar capturas de pantalla y archivos PDF de páginas.
  • Rastrear una aplicación de una sola página y generar contenido pre-renderizado
  • Automatice el envío de formularios, pruebas de interfaz de usuario, pruebas de extremo a extremo, pruebas de humo, entrada de teclado, etc.
  • Crea un entorno de prueba automatizado y actualizado. Ejecute sus pruebas directamente en la última versión de Chrome utilizando las últimas funciones de JavaScript y del navegador.
  • Captura un seguimiento cronológico de su sitio y analiza los problemas de rendimiento.
  • Puede probar extensiones de Chrome.
  • Permite realizar web scraping

Como somos conscientes de las funcionalidades realizadas por titiritero, tengamos una descripción general del fragmento de código para tomar capturas de pantalla en titiritero.

const titiritero = require ('titiritero');

(asíncrono () => {

navegador constante = espera puppeteer.launch ();

const page = aguardar browser.newPage ();

aguardar page.goto ('https://example.com');

espera page.screenshot ({ruta: 'ejemplo.png'});

aguardar browser.close ();

}) ();

Una vez que se ejecute este código, se guardará una captura de pantalla en su sistema a través de la ruta mencionada en el fragmento de código.

Conclusión

El desarrollo web más rápido y cualitativo siempre ha sido y será la principal prioridad de los equipos de desarrollo y control de calidad. Los navegadores sin cabeza (sin GUI) son livianos y la memoria ahorradora se ejecuta a una velocidad más alta durante las pruebas de automatización. Definitivamente satisfacen la necesidad de un desarrollo web más inteligente. Además, ayudan a probar todas las características de la plataforma web moderna y permiten la depuración y el análisis de rendimiento en tiempo real, lo que agrega otra ventaja al límite. Son responsables del tráfico pesado en las aplicaciones web y apoyan el raspado de sitios web con la ayuda de paquetes como nodejs y puppeteer. Además, la instalación de navegadores sin cabeza es más fácil que la instalación de cualquier otro marco de automatización web como selenium.

Publicar un comentario

0 Comentarios