Optimizando el testing automatizado de UI con Cypress

Sovos
enero 12, 2022

Conversemos de DevSecOps

En esta nueva sección de nuestro blog compartiremos la visión y experiencia de nuestro equipo de expertos en el ámbito del desarrollo de software y las tecnologías de información en general, quienes tocarán distintos temas relacionados con las tecnologías y metodologías utilizadas por Sovos para crear e implementar un mejor software, y entregarán tips y datos orientados a aportar valor a quienes deben trabajar en este ámbito, fundamental para las compañías que crean y utilizan soluciones para impulsar el negocio de sus clientes.


 

Sergio Gómez, Principal QA Engineer

Optimizando el testing automatizado de UI con Cypress

A lo largo de los años hemos probado diferentes herramientas para crear test automatizados. Nuestros primeros intentos consistieron en automatizar smoke y regression tests utilizando herramientas que permiten simular acciones de los usuarios. En este tipo de pruebas se testean todos los componentes del sistema: UI, backend, base de datos, infraestructura y otros.

Al comienzo de los proyectos mantuvimos una buena cobertura y estabilidad, pero a medida que crecían los proyectos, los tiempos de ejecución se hacían más largos, el mantenimiento era más frecuente y los tests eran inestables. En muchas ocasiones los tests automatizados fallaban, pero esas fallas no estaban directamente relacionadas con bugs en el producto. Entonces empezamos a investigar herramientas que nos permitieran realmente encontrar problemas en nuestros productos y los reportaran rápidamente.

Una de estas herramientas fue Cypress I.O. En este artículo detallamos nuestra experiencia con la misma y las ventajas que encontramos. Para instalar y comenzar a usarla, pueden entrar al sitio oficial.

Cypress es un framework de test automatizado para UI modernas que permite escribir todo tipo de tests, incluyendo end-to-end, integration y unit tests, y cualquier otro que corra en el navegador. A diferencia de otras herramientas, no depende de aplicaciones de terceros (Webdrivers); Cypress detecta los browsers instalados en el sistema para ejecutarlos, por lo que no es necesario actualizar los webdrivers después de la actualización de dichos browsers.

La funcionalidad que nos pareció más útil fue la posibilidad de controlar el tráfico de red (Network traffic control) fácilmente. Esto permite interceptar todos los requests y retornar las respuestas que necesita el automated test. De esta manera, podemos trabajar en la integración de los componentes de la interfaz de usuario (UI) y no depender del backend. Como resultado, tenemos test más rápidos y estables que pueden ser integrados en el pipeline de desarrollo.

A continuación presentamos un ejemplo de cómo podemos interceptar los request de login de una aplicación para probar la reacción de la interfaz de usuario con diferentes respuestas. Lo primero que debemos hacer es identificar los elementos que usaremos en nuestro automated test. Necesitamos dos inputs para el nombre de usuario y password y un botón LOGIN. El botón se habilitará luego de completar el formulario y podremos hacer click en el mismo. Después, la UI disparará un request para chequear los datos ingresados.

 

sovos-automated-test

img-code-example-cypress-01

img-code-cypress-03

 

Para simplificar el ejemplo, vamos a suponer lo siguiente:

  • Username box tiene un atributo id=login-username
  • Password box tiene un atributo id=login-password
  • LOGIN button tiene un atributo id=login-btn
  • El request que se ejecuta tiene los siguientes atributos:
    1. URL: /api/v1/login
    2. Method: POST
    3. Body: { ‘username’: ’user@sovos.com’, ‘password’: ‘Passw@rd’ }
    4. Response
      1. i) Status Code: 200
      2. ii) Body: ‘true’

Ahora podemos escribir cómo quedaría el ejemplo usando los comandos de Cypress sin interceptar el request:

 

img-code-cypress-05

img-code-cypress-05

img-gif-cypress-06

 

En la imagen previa se puede observar cómo ejecuta Cypress los diferentes comandos. Utiliza cy.visit para navegar hasta la página deseada y cy.get para identificar a los elementos web usando como identificador sus respectivos IDs. Una vez identificado el elemento, usamos el comando type() para escribir un valor en el elemento y click() para enviar el formulario. Los requests ejecutados por la aplicación son identificados como (xhr) en el test runner. En este caso se ejecutó un request POST con URL igual a /api/v1/login pero no fue interceptado, por lo que fue validado por el backend. Una vez verificado, la respuesta es procesada por la UI, y si fue exitosa, muestra el texto Bienvenidos a la App.

Otra de las ventajas de Cypress es que espera en forma automática a que se cumpla una condición, por lo que no es necesario utilizar funciones de espera.

 

Proceso de login interceptado por Cypress

Para continuar con nuestro ejemplo, podemos utilizar el comando cy.intercept() para interceptar los requests generados por la UI y devolver respuestas deseadas. De esta manera, los requests no serán procesados por el servicio y solo probaremos cómo reacciona la aplicación de acuerdo a diferentes respuestas.

 

Caso positivo: login exitoso usando Stub

 

img-code-cypress-07

img-code-cypress-08

img-gif-cypress-09

 

En este ejemplo se puede observar cómo se utiliza el comando cy.intercept(). Cuando la UI lo ejecute, Cypress interceptará el request y lo comparará con lo que hemos definido. La comparación se realizará por el tipo de método (POST) y por la URL (/api/v1/login). Si coincide, devolverá el valor definido en la constante validLogin. Como la respuesta preestablecida es la cadena ‘true’’, esperamos que la UI muestre un texto de bienvenida.

En este ejemplo se puede comparar la velocidad de ejecución entre los dos casos. El primero demoró unos 5 segundos, porque la UI necesitaba la respuesta del servicio de login para mostrar el mensaje. En el segundo caso fue más rápido, porque fue interceptado por Cypress y devolvió una respuesta inmediatamente.

 

Caso negativo: Login no fue exitoso usando Stub

Para testear un caso negativo podríamos modificar la respuesta del request para simular un login inválido. En este caso es necesario cambiar el valor de status code de la respuesta para que la UI muestre un mensaje de error: Username/Password values are invalid. El automated test queda de la siguiente manera:

 

img-code-cypress-010

img-code-cypress-011

img-gif-cypress-12

 

En síntesis, podemos afirmar que Cypress es una herramienta muy útil para el tipo de test que necesitamos para nuestros productos, porque son más rápidos, estables y confiables. Cuando se rompen los tests, es porque se realizó algún cambio en el código fuente o porque no se realizó el mantenimiento adecuado en el código de los tests. Gracias a esto, los falsos positivos originados por problemas con la base de datos, demoras en el tráfico de red, usuarios inválidos, servicios caídos y otros factores ya no representan un problema.

Links de interés:

Cypress: https://www.cypress.io/

Cypress en Github: https://github.com/cypress-io

Suscríbase para más información

Manténgase actualizado con las últimas noticias relacionadas a los impuestos y el cumplimiento de la normativa tributaria que pueden impactar los procesos y las operaciones de su empresa.

AUTOR

Sovos

Sovos se creó para resolver las complejidades de la transformación digital de los impuestos, con ofertas completas y conectadas para la determinación de impuestos, los controles continuos de las transacciones, los informes fiscales y mucho más. Entre los clientes de Sovos se encuentran la mitad de las empresas de la lista Fortune 500, así como empresas de todos los tamaños que operan en más de 70 países. Los productos SaaS de la empresa y la plataforma Sovos S1, de su propiedad, se integran con una amplia variedad de aplicaciones empresariales y procesos de cumplimiento de la normativa gubernamental. Sovos tiene empleados en toda América y Europa, y es propiedad de Hg y TA Associates.
Compartir esta publicacion

Gestor documental digital Latinoamérica SSA
August 1, 2022
Botón de firma ¿Conoce esta funcionalidad?

El botón de firma es una funcionalidad muy versátil, que viene incluida en nuestra solución de gestión documental digital de Sovos y se puede activar fácilmente. ¡Buenas noticias! Si usted cuenta con nuestra solución y se conecta a través del portal, tiene acceso al “Botón de firma” y sólo debe activarlo. Esta funcionalidad le permite […]

Colombia Punto de venta electrónico SSA
August 1, 2022
Colombia se prepara para el envío de documentos equivalentes desde los puntos de venta POS

De acuerdo con el calendario establecido, el proceso inicia con grandes contribuyentes, que deben cumplir desde febrero de 2023. La Dirección de Impuestos y Aduanas Nacionales (DIAN) presentó a principios de julio un proyecto de resolución que establece finalmente el calendario para comenzar a exigir el límite máximo de 5 unidades de valor tributario (UVT) […]

Gestor documental digital Latinoamérica SSA
August 1, 2022
El fin del papel: gestión digital de documentos

Reducir los procesos presenciales de firma de documentos es fundamental para optimizar los recursos de las empresas. Más allá de ahorrar tiempo y dinero, la gestión digital de documentos es indispensable en la actualidad para concretar un sinnúmero de trámites administrativos que requieren ser resueltos con rapidez para asegurar la continuidad operativa de los negocios. […]

Digitalización de procesos empresariales Latinoamérica SSA
June 2, 2022
Utilización de Report Portal para monitoreo de pruebas funcionales

Conversemos de DevSecOps En esta nueva sección de nuestro blog compartiremos la visión y experiencia de nuestro equipo de expertos en el ámbito del desarrollo de software y las tecnologías de información en general, quienes tocarán distintos temas relacionados con las tecnologías y metodologías utilizadas por Sovos para crear e implementar un mejor software, y […]

Gerente técnico de cuentas Latinoamérica
May 25, 2022
Un gestor clave para llevar los servicios a otro nivel

Gerente técnico de cuentas (TAM) Un gestor clave para llevar los servicios a otro nivel La figura del Technical Account Manager o gerente técnico de cuentas (TAM), es un recurso que ofrece una línea de comunicación constante con los clientes, y que mantiene visibilidad completa de sus procesos de negocios para ayudar en la resolución […]