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 fue creada para resolver las complejidades de la transformación digital de los impuestos, con soluciones completas y conectadas para la determinación de impuestos, el cumplimiento de los controles transaccionales continuos, la declaración del IVA y más. La compañía brinda asistencia a más de 12.000 mil clientes, incluida la mitad del ranking Fortune 500, que operan en más de 70 países. Sus productos SaaS y la plataforma patentada Sovos S1 se integran con una amplia variedad de aplicaciones comerciales y procesos de cumplimiento gubernamentales. Sovos tiene empleados en las Américas y Europa, y es propiedad de Hg y TA Associates. Para obtener más información, visite https://sovos.com/es/ y síganos en https://www.linkedin.com/company/sovos-latam.
Compartir esta publicacion

Ecuador Factura Electrónica Firma Electrónica Gestor Documental Latinoamérica SSA
January 6, 2022
Stupendo suma grandes ventajas a clientes de Sovos

Recientemente Sovos adquirió la empresa Stupendo, líder en el desarrollo de soluciones para los procesos administrativos y financieros en Ecuador. La empresa aporta varias soluciones robustas al portafolio de Sovos, que abarcan la digitalización de procesos -incluyendo gestión documental digital y firma electrónica- y procesos automatizados de facturación electrónica, en compliance con las normativas establecidas […]

Boleta Electrónica Colombia Latinoamérica SSA
January 6, 2022
La obligatoriedad del recibo electrónico en Colombia

La próxima obligatoriedad, para las empresas en Colombia, de implementar el recibo (o boleta) electrónico, está forzando a las empresas a acelerar el paso para integrar este mandato a tiempo y sin afectar sus operaciones. Con esta medida, la DIAN busca seguir modernizando el sistema tributario del país y acelerar el onboarding digital de las […]

Gestor Documental Latinoamérica SSA
January 6, 2022
El efecto dominó en los cambios normativos de Latinoamérica

Cuando hablamos del efecto dominó, se nos viene a la mente la imagen de las fichas que caen unas sobre otras de manera rápida y casi sincronizada; una reacción en cadena que se replica de manera similar en lo que se refiere a los cambios normativos en la región. En efecto, y como resultado del […]

Ecuador Gestor Documental Latinoamérica SSA
January 6, 2022
Sovos realiza workshop de firma y procesos digitales en Ecuador

Sumándose a la creciente tendencia de los gobiernos de la región, que están exigiendo a las empresas digitalizar todos sus procesos tributarios y de negocios, Ecuador está incorporando paulatinamente diversos mandatos orientados a incorporar a las compañías a la transformación digital. En esa línea, Sovos organizó, en conjunto con la Cámara de Innovación y Tecnología […]

Cumplimiento Fiscal en Latinoamérica Latinoamérica
December 17, 2021
Seguridad de la información y transformación digital

A medida que avanza la transformación digital en los negocios, surgen nuevos métodos de estafa y robo de información crítica que los usuarios confían a distintas entidades y que ponen a prueba a las compañías. El cibercrimen está violando los sistemas de seguridad de las entidades que guardan información de las personas para apropiarse de […]