Constantemente nosotros los programadores cuando desarrollamos un nuevo producto y estamos a punto de entregar, le hacemos todas las pruebas posibles, y cuando ya terminamos nos decimos «esto que hice está perfecto». Allí es cuando nos estrellamos con la realidad cuando pasa a manos de los responsables de calidad, ya que este tiene bugs o afecto el comportamiento de otro elemento o nos faltó validar un punto importante.

Para resolver estos problemas que nos agobian, existen varias herramientas que permite automatizar pruebas. Con lo anterior nos ayuda disminuir la tasa de devolución de productos de calidad a desarrollo por mal funcionamiento. Para este artículo hablaremos de un Framework (uno de muchos en el mercado) muy conocido llamado Cypress, que nos permitirá realizar este trabajo.

Cypress como pruebas E2E

La ventaja de las pruebas E2E, de que se puede validar la integridad entre varios componentes la posee Cypress, permitiendo realizar el recorrido de la aplicación como si de un usuario normal se tratase. Dicho Framework es aplicable en cualquier proyecto JavaScript y con compatibilidad con cualquier Sistema Operativo, ya que este levanta una máquina virtual con su respectivo navegador (puede usarse Electron como navegador nativo o Google Chrome que también es soportado).

El Framework Cypress es Open Source, donde tiene una capa gratuita muy completa, el cual permite que en la ejecución de las pruebas detecte los cambios en el DOM en tiempo real, interacción con los elementos de la aplicación por medio de propiedades, acceso a las diferentes rutas, generalización de datos de pruebas y funciones, realizar debug paso a paso en la ejecución de las pruebas, entre otras funcionalidades.

Lo bueno de usar Cypress

• Detección de cambios hechos por el equipo de programación, donde puede afectar la integración de los componentes.
• Basta documentación de cómo utilizar los comandos para dicha herramienta, con idioma inglés.
• Muy intuitivo al desarrollar pruebas, es decir que se tiene una curva de aprendizaje baja para aprender a implementarlo.
• Permite organizar con facilidad las pruebas, permitiendo desglosar las mismas por categorías y subcategorías.
• Provee de una máquina virtual que permite que pueda ser ejecutado en cualquier entorno gráfico.
• Cypress es factible integrarse a cualquier proyecto JavaScript.
• Comunidad muy activa en el uso de Cypress, permite resolver dudas más rápido cuando sucede algún inconveniente.
• Libertad para usar funciones, variables y constantes dentro de las pruebas. Permite generalizar muchas tareas.
• Facilidad para conocer las propiedades de los elementos con el cual se quiere interactuar con el selector de elementos.

Lo malo de Cypress

• Presenta algunas irregularidades en cuanto al funcionamiento al interactuar con la aplicación, debido a que veces pasos hechos de forma manual no se comportan iguales a las que ocurren con los pasos automatizados.
• Es complicado interactuar con variables que se procesan por debajo de la aplicación, que no están a la vista.
• No tiene como para guardar un estado previo o un recorrido ya realizado, ya que se debe esperar que se ejecuten las pruebas previas para llegar un punto donde se quiere evaluar con detenimiento.
• No tiene una función que evalúe qué componentes o módulos faltaron por validar.
• Puede ser algo demorado desarrollar las pruebas para un módulo que podría considerarse pequeño, en términos de proporción.
• El ordenador debe tener unas características altas para ejecutar con fluidez. Por ejemplo para ordenadores con 4GB RAM y disco duro SATA, puede que se ralentice mucho para el desarrollo y ejecución de pruebas.

Tips y recomendaciones

Para tener mayor fluidez y eficiencia en el desarrollo de las pruebas, los siguientes tips y recomendaciones:

• Usar sobre los elementos HTML de la aplicación colocar identificadores o clases propias, para facilitar el desarrollo de las pruebas automatizadas.
• Se puede generalizar el selector con constantes en el desarrollo de las pruebas. Muy útil para se requiere interactuar con un mismo elemento.
• Tratar que, dentro de una prueba grande, tener varias con funciones pequeñas, para facilitar la detección de fallos mientras se ejecuta la prueba.
• Dejar comentarios de que hace cada línea, para mejorar la lectura y mantenibilidad del código.
• Muchas veces el tiempo de respuesta de la aplicación no es tan rápida, para ello aplicar los métodos wait() para esperar el renderizado de las vistas.
• Coordinar que algunos datos perseveren entre pruebas, para que se pueda realizar una prueba completa con la menor interacción humana en el mismo.
• Se puede escribir sobre el selector de elemento y descubrir manualmente donde está el elemento requerido.