En este articulo te mostraré como crear un framework de automatización desde cero y paso a paso, utilizando herramientas como Cypress y Cucumber, además vamos a conocer sobre estas herramientas y sus ventajas.
¿Qué es un framework?
Un framework es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software.
Con la creación de un framework vamos a poder:
1) Evitar código repetitivo
2) Utilizar buenas practicas
3) Desarrollar más rápido
Un framework de automatización nos permite: tener un conjunto de pautas o reglas para la generación de casos de prueba y estandarizar la ejecución de pruebas tales como UI, API, de rendimiento, seguridad, etc.
¿Por qué automatizar nuestras pruebas?
• Uno de los desafíos más grandes que nos encontramos a la hora de desarrollar una aplicación web es la calidad de la entrega del producto, y que el desarrollo de este no contenga errores.
• Para brindar mayor calidad en nuestras aplicaciones, además de testear la aplicación de forma manual, es conveniente automatizar los tests. Cabe destacar que esto no significa eliminar los tests manuales por completo, ya que son muy importantes en el proceso.
• La automatización de tests comienza siempre con una primera fase de testing manual, para después ser automatizada. De esta forma encontraremos errores en las primeras fases de desarrollo, reduciendo así los costes y las horas de trabajo.
Objetivos de automatizar nuestros tests:
• Aumentar la productividad.
• Automatizar tareas repetitivas para poder acortar los tiempos de ejecución y reducir errores.
• Reducir costos.
• Mantener los resultados siempre actualizados.
• Mejorar el control de las operaciones.
• Mejorar la comunicación.
¿Qué es Cypress.io?
Es una herramienta open-source para llevar a cabo End-to-End testing (e2e), diseñada para la web moderna.
Características:
1) Cypress toma capturas instantáneas mientras se ejecutan sus pruebas. Posiciona el cursor sobre los comandos en el registro de comandos para ver qué sucedió exactamente en cada paso.
2) Capacidad de depuración.
3) Cypress espera automáticamente los comandos y las afirmaciones antes de continuar.
4) La arquitectura no utiliza Selenium ni WebDriver, las pruebas son rápidas, consistentes y confiables.
5) Ejecutando las pruebas en modo handle se graban videos automáticamente de cada prueba, además saca una captura cuando alguna falla.
6) Se pueden ejecutar pruebas dentro de los navegadores de la familia Firefox y Chrome (incluidos Edge y Electron) de manera local y optima.
7) Control de trafico de red.
¿Qué es Cucumber?
Cucumber es una herramienta para implementar metodologías como el Behaviour Driven Development (BDD) o desarrollo basado en comportamiento, que permite ejecutar descripciones funcionales en texto plano, como pruebas de software automatizadas.
El objetivo principal es que pueda ser entendido y usado tanto por probadores, desarrolladores, clientes y gente de negocio.
Cucumber usa un lenguaje para definir los requisitos, este lenguaje se llama Gherkin.
Nos permite traducir todas las especificaciones en un lenguaje cercano al natural en especificaciones de test en el lenguaje que queramos.
Llego la hora de crear nuestro framework desde cero
“Pero primero y más importante, debemos tener instalado Node.js, npm y como IDE recomiendo Visual Studio Code”.
Una vez instalados, ya vamos a poder seguir con la creación.
Vamos a crear una carpeta y le pondrán el nombre que ustedes quieran, en mi caso se llamara “project-cypress-framework”
Vamos a abrir nuestra terminal CMD y nos vamos a dirigir a nuestra carpeta creada. En mi caso usare el comando “cd C:\project-cypress-framework”
Una vez situados en nuestra carpeta vamos a empezar con el primer comando y muy importante “npm init”, que nos creará nuestro package.json, que tendrá todas las dependencias que nosotros necesitemos.
Una vez ejecutado el comando nos encontraremos con una serie de preguntas del proyecto que vamos a crear:
Una vez completado todo vamos a poder ver algo como la siguiente imagen.
Sólo nos quedara colocar “yes” para seguir avanzando.
Nuestro siguiente paso es muy importante: es instalar Cypress con el siguiente comando.
La idea de este comando es guardarlo como dependencia dentro de nuestro proyecto, para que cuando lo compartamos con otra persona, pueda solamente ejecutar “npm install” sin tener que instalar Cypress aparte.
Una vez instalado podremos observar lo siguiente.
Nuestro siguiente paso será abrir nuestro proyecto en Visual Studio Code, en nuestro archivo package.json colocaremos el siguiente script recomendado por Cypress.
Un vez hecho iremos a nuestro CMD y situados en nuestro proyecto ejecutaremos el comando “npm run cypress:open”, que nos abrirá el runner de Cypress, una interfaz visual que tiene ejemplos de pruebas para que podamos ver y ejecutar.
El siguiente paso, situados en nuestro proyecto va a ser instalar Cucumber como dependencia en nuestro archivo package.json con el comando
Ahora a configurar nuestro index.js, para decirle a nuestro proyecto que es requerido usar Cucumber. Para eso iremos a la carpeta plugins y agregaremos las siguientes configuraciones:
Agregamos la siguiente constante:
Luego agregaremos el siguiente bloque de código:
Quedando nuestro index.js de la siguiente forma:
Aquí vamos a ir a nuestro cypress.json. Normalmente cuando nosotros ejecutamos nuestros casos de prueba viene y busca los archivos .js, pero en este caso como vamos a usar Cucumber la idea es decirle que busque los archivos con la extensión .feature, para eso vamos agregar la siguiente instrucción:
Con esto el proyecto va a escanear todas las carpetas y va a seleccionar todos los archivos que terminen con .feature sin importar el nombre que tengan anteriormente.
Al poner * hacemos referencia a cualquier archivo cuya extensión sea “.feature”.
Siguiente paso y último, en nuestro archivo package.json vamos a poner la siguiente línea
Lo que queremos hacer acá es que cuando nosotros creamos nuestros archivos feature, también debemos definir donde se guardan los pasos que vamos a ir ejecutando.
Terminamos de instalar y configurar todo en tan solo 9 pasos para poder trabajar con Cypress junto a Cucumber, solo queda ordenar la estructura del proyecto.
Abriremos nuestro proyecto en Visual Studio Code, donde eliminaremos todos los ejemplos que Cypress nos trae por defecto.
Luego vamos a eliminar la carpeta llamada “examples”.
En la carpeta “integration” vamos a crear otra que le pondremos de nombre “cucumber”.
Dentro de la carpeta cucumber es donde nosotros crearemos nuestros features y steps.
En la carpeta “support” vamos a crear otra que la llamaremos “pages” en la cual vamos a poder trabajar con el famoso patrón de diseño llamado page object model.
Por ultimo le vamos a instalar a nuestro Visual Studio Code la extensión de Cucumber para nuestros features, buscaremos “cucumber gherkin full support visual studio” y presionaremos “install”.
Nuestra estructura está finalizada. En mi próximo blog vamos a ejecutar nuestras primeras pruebas automatizadas utilizando Cypress, Cucumber, Patrón de diseño Page Object Model y los famosos fixtures.
Conclusión
Un framework de automatización nos va a ayudar muchísimo, por ejemplo: Reutilización de código, mantenimiento y escalabilidad, consistencia e integración, estándar para el equipo de trabajo, reducción de los tiempo de ejecución de las pruebas, integración de reportes acordes a las necesidades del equipo y entre otras.
Respecto a herramientas como Cypress, nos va a ayudar muchísimo, ya que automáticamente toma snapshots mientras los test corren, de esta manera vamos a poder identificar lo que va pasando en cada momento, al tener un runner interactivo nos va a facilitar ver los comandos que se están ejecutando mientras vemos la aplicación que se esta testeando.
Tenemos un Dashboard, que es un servicio que nos da acceso a todas las pruebas realizadas, nos brinda información de lo que sucedió en cada prueba, tomando screenshots y grabando videos de las pruebas fallidas. Además tenemos el modo handle que es una funcionalidad que nos permite correr nuestro test de modo background, ocultando el navegador, donde se va a grabar un video de todos los tests y además screenshots de los test que fallen.
De cucumber podemos decir que es una excelente herramienta de colaboración, ya que vamos a poder manejar un idioma para que tanto testers, desarrolladores, clientes y personas del negocio entendamos lo mismo y no surjan confusiones.
Descarga nuestro Clever UI KIT 👇
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Por rellenar el formulario
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Por rellenar el formulario
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Por rellenar el formulario
¡Ups! Algo salió mal al enviar el formulario.
Crea tu propio manual de marca con esta plantilla gratuita. ¡Organiza tus activos de diseño de forma más eficiente!
