En un entorno de comercialización global en el que cada vez tienen más peso las ventas a través de las diferentes webs de las empresas, es necesario que las compañías garanticen el rendimiento de sus aplicaciones y sistemas para garantizar la mejor experiencia de cliente. Esto se consigue a través de las sondas sintéticas, las cuales permiten obtener información precisa y en tiempo real.
¿Qué es una sonda sintética?
Las sondas sintéticas son programas automatizados para simular el comportamiento de los usuarios reales al interactuar con un sistema o aplicación. Estas sondas pueden realizar tareas específicas, como enviar una solicitud HTTP o completar un formulario web, y luego medir el tiempo de respuesta y la calidad de la respuesta recibida.
¿Qué tipo de sondas tienes a tu disposición? En Datadope tenemos dos tipos de sondas:
- Sondas sintéticas: la monitorización sintética con sondas de API implica el uso de programas automatizados que simulan la interacción de una aplicación con una API, es decir, la interfaz de programación de aplicaciones. Estas sondas sintéticas envían solicitudes a la API y luego miden el tiempo de respuesta y la calidad de la respuesta recibida. De esta manera, las empresas pueden asegurarse que sus aplicaciones se integran correctamente con otras aplicaciones y sistemas, y que cumplen los acuerdos de nivel de servicio (SLA) establecidos.
- Sondas programáticas: la monitorización sintética con sondas de navegador implica el uso de programas automatizados que simulan el comportamiento de los usuarios reales al interactuar con una aplicación a través de un navegador web. Estas sondas sintéticas realizan acciones específicas, como hacer clic en un botón o rellenar un formulario, y luego miden el tiempo de respuesta y la calidad de la respuesta recibida. De esta manera, las empresas pueden detectar rápidamente cualquier problema en su aplicación en diferentes navegadores y dispositivos, y garantizar que la experiencia del usuario sea consistente y satisfactoria. En el caso de que se produjese una incidencia, el cliente podría acceder a un video que le permita visualizar el punto donde se ha roto el proceso de la sonda.
En esta primera entrada hablaremos sobre las consideraciones para poder crear una sonda sintética para simular de la forma más real posible la experiencia de usuario en un flujo común de navegación por la aplicación en concreto.
Creación de una sonda programática
Para la creación de una sonda sintética se definen las siguientes acciones
- Agnósticas a posibles cambios de páginas web
- Agrupación funcional de acciones para validar diferentes componentes del aplicativo
- Validación de existencia y operatividad de los elementos a interaccionar del aplicativo
Grabación
Refinamiento: navegación
El objetivo de nuestra sonda programática es simular de la forma más real posible al usuario y poder validar y garantizar que la transacción que realice el usuario se pueda realizar de forma satisfactoria y, en su defecto, poder validar que el servicio expuesto al usuario funciona correctamente en un tiempo razonable.
Para ello, se listan a continuación diferentes consideraciones para poder mejorar el diseño de la propia transacción.
Navegación privada
Para poder realizar la transacción es importante realizarla en una ventana de incógnito/navegación privada para evitar:
- Sesiones guardadas de anteriores accesos
- Cookies guardadas y poder simular el acceso único de un usuario a nuestro aplicativo.
La ventana de incógnito garantizará que aparezca el banner de cookies y podremos realizar las acciones para validar el banner u otros elementos que aparezcan. Al no tener sesiones almacenadas en el navegador, podremos simular el login o simular accesos no deseados en diferentes recursos de nuestro aplicativo
Las páginas web tienen diferentes estrategias de carga y durante la carga de la misma, los elementos con los cuales se va a interactuar pueden aparecer en momentos determinados del tiempo o no tener la funcionalidad debido a que se añade vía código.
Para poder simular de forma real la interacción con un usuario debemos utilizar condiciones de espera y validación de los diferentes elementos de nuestro aplicativo con los que vayamos a interactuar y que tengan la funcionalidad deseada:
- Espera a que el elemento exista en nuestra página web
- Espera a que el elemento sea visible en nuestra página web
- Espera a que la página web contenga un elemento determinado
Se debe evitar a medida de lo posible el uso de esperas “manuales” (ej: Sleep, Wait, u otros comandos que nos ofrecen los framework)
Timeouts en esperas e interacciones entre páginas web
En muchas páginas web cuando el usuario navega entre los diferentes menús o accede a diferentes elementos, estos hacen referencia a carga de nuevas páginas o recursos donde el usuario debe esperar a que la nueva vista finalice. Para cada interacción con los diferentes elementos es recomendable indicar el timeout que se considera que el usuario debe esperar antes de salirse de la página web, pensándose que no está funcionando o tiene algún problema con su conexión.
Locators e identificadores de elementos
Los “locators” permiten identificar (dentro del árbol de elementos que componen una página web en forma de árbol (DOM)) los diferentes elementos HTML a interaccionar accediendo a las diferentes propiedades de los mismos (id, class, texto, enlace, etc.). La mayoría de los frameworks permiten utilizar diferentes locators genéricos que acceden a propiedades de los elementos (id, class, link…), aunque el más común y genérico es el uso xpath.
Un mismo elemento puede identificarse mediante diferentes locators, pero es recomendable usar un locator que sea agnóstico a los diferentes cambios que pueda sufrir una página web. Para ello, definimos los siguientes casos a evitar y donde requerirá un refinamiento:
- ID dinámico en compilación: los ids de los diferentes elementos pueden variar en tiempo de compilación de la propia página web
- Elementos posicionales vía xpath
- Clases de estilo no específicas a elementos
Ejemplo: seleccionar el elemento de Compañía
Locator | Recomendable | Detalle |
|---|---|---|
id=sm-16823485866516055-5 | No | ID variable, cualquier cambio y compilación de la página web nuestra sonda sintética dejará de funcionar |
xpath=(.//nav/ul/li/[4]/a) | No | Si se añade una nueva sección previa en el menú, nuestra sonda sintética dejará de funcionar |
class=elementor-item | No | Si se usa la clase a cualquier otro elemento de la página web y coincidir con el deseado, nuestra sonda sintética dejará de funcionar |
xpath=(.//nav/ul/li/a[contains(text(),»Compañía»)]) | Sí | Se busca un texto en concreto que aparezca en el propio menú y no tiene en cuenta la posición del menú o los estilos aplicados en la propia navegación |
Credenciales y datos sensibles
A la hora de realizar el login o insertar datos sensibles en los formularios de nuestro aplicativo, es importante utilizar los mecanismos que nos ofrece el framework para poder esconder y securizar nuestros credenciales o datos sensibles
Para ello es importante revisar la transacción sintética y garantizar que las credenciales estén ocultas en nuestra definición de transacción y que las credenciales se lean desde algún gestor de credenciales u otras fuentes.
Refinamiento: agrupación funcional
El objetivo de una sonda programática es poder validar que un servicio de nuestro aplicativo esté disponible al usuario: compra de un artículo, validación de inventario, validación de procesos automáticos…
Para completar la sonda y validación, la transacción del usuario deberá interactuar con elementos web y que a su vez realizan llamadas a servicios externos al propio aplicativo (llamada a servicio de login, base de datos, etc.). Para poder acotar posibles problemas detectados en una navegación y correlar la monitorización de nuestro aplicativo, es importante agrupar las diferentes acciones en pasos funcionales y recoger, de la misma forma que se realiza a nivel global, los tiempos de respuesta y estado de cada uno de los pasos funcionales.
Supongamos el ejemplo de un e-commerce donde queremos validar que un usuario registrado es capaz de buscar un elemento en nuestro catálogo, acceder a su cesta de la compra y comprar su producto. Se definen los siguientes pasos funcionales para poder cumplir la navegación:
1. Acceso página principal
a. Acceso URL
b. Espera y aceptación cookies
c. Espera y clic en botón Login
d. Espera a carga de formulario de Login
2. Login
a. Introducir usuario y contraseña
b. Clic en Submit
c. Espera a carga de página principal con nombre de usuario
3. Acceso catálogo
a. Acceder al catálogo y buscar producto
b. Seleccionar elemento y añadir al carrito
c. Clic en cesta de la compra
d. Espera a carga de la cesta
4. Compra producto
a. Validar que el producto existe en el carrito de la compra
b. Validar que el botón comprar existe
Conclusión
Las sondas sintéticas permiten validar el estado actual del servicio desde el punto de vista de usuario y, por tanto, en valor para el negocio en concreto. Las sondas programáticas deben simular de forma real la transacción que realiza un usuario y se deben refinar a la medida de lo posible para poder detectar en tiempo y espacio los posibles errores de nuestro aplicativo.
