Cypress es parte de la llamada “non-selenium based automation testing tool”, una nueva generación de frameworks para testing que quiere dar una alternativa al ya conocido selenium evitando así varios problemas que este posee. Aunque esta herramienta se enfoca más en pruebas de tipo e2e, se le considera que es un todo en uno, debido a que además de poseer una interfaz gráfica sencilla usando chrome para las pruebas integrales, también cuenta con librerías para realizar mocks y pruebas unitarias.
Esta herramienta fue desarrollada para tecnologías de frontend modernas como angular, react o vue. Pero a la vez funciona para páginas web que se rendericen en el servidor (SSD).
Instalación:
Cypress se puede instalar de varias formas, descargando el instalador de la página oficial y por medio de un package manager como npm o yarn, para esta práctica es necesario tener instalado npm y node. Antes de esto vamos a crear una carpeta y creamos un proyecto en node con los siguientes comandos:
- mkdir example
- cd example
- npm init (Aceptamos todas las configuraciones por defecto)
- npm i cypress --save-dev
En este momento ya instalamos cypress pero debemos iniciarlo para trabajar y escribir el código de nuestros test con el siguiente comando:
- node_modules/.bin/cypress open
Esto nos abrirá la interfaz gráfica de cypress, presionamos el botón de Ok y nos mostrará todos los test que cypress crea inicialmente como ejemplos.
Al hacer doble click en alguno de estos specs se empezará a correr la prueba.
Como se observa, se ejecuta cada caso de prueba contenida en el action.spec.js y al finalizar, podremos ver el detalle de cada caso en específico. Al presionar en algún paso nos mostrara el estado de la pagina por medio de screenshots que cypress obtiene mientras ejecuta la prueba.
En este caso se abrió el detalle del caso de prueba .submit(), y además se observa el paso -TYPE en el que inserta el texto “HALLOFF” en un input del DOM, otra herramienta que se logra observar es los botones de before y after, con estos se podrá mirar como se encontraba la pagina antes y después de realizar ese paso en específico.
Luego abrimos el directorio example en un editor de código como visual code y debería mostrar los siguientes archivos y carpetas:
Las carpetas de uso exclusivo de cypress y su funcionalidad son las siguientes:
- Fixtures: Donde se guarda los archivos que se usaran en los mocks, pueden ser imágenes, videos, txt etc.
- Plugins: En esta carpeta podemos modificar el funcionamiento interno de Cypress.
- Specs: Acá es donde guardaremos nuestros test e2e.
- Support: Un lugar donde podremos guardar funciones de utilidad, por ejemplo, una función que maneje la autenticación.
Para observar el código asociado a las pruebas de ejemplo que corrimos anteriormente tendremos que regresar a nuestro editor de código, el archivo actions.spec.js se encuentra desde la raíz del proyecto en la ruta cypress/integration/examples, aquí podremos ver todos los ejemplos creados por cypress, esta carpeta la podemos eliminar.
Creando pruebas:
Para realizar esta prueba vamos a usar una página enfocada al testing la cual se encuentra en la siguiente url: http://testing-ground.scraping.pro/login esta contiene un login sencillo y nos muestra las credenciales en la misma página las cuales son: para usuario “admin” y contraseña “12345”, si el login es exitoso nos redirige a la url http://testing-ground.scraping.pro/login?mode=welcome, para este ejercicio probaremos este login y que este nos envíe correctamente a la página de bienvenida.
Vamos a la carpeta integration y creamos el archivo firstTest.spec.js, acá crearemos nuestro primer test con la siguiente estructura:
Inicialmente creamos un método describe en este permite agrupar una o varias pruebas, contiene dos parámetros los cuales son: una descripción de lo que se le hará testing que en este caso la definimos como “login”, y el segundo que contiene una función en donde se encontraran nuestras pruebas.
Luego vemos que se usa un método beforeEach, en este definimos una serie de pasos que realizará antes de cada prueba creada, este método es opcional, para este caso solo tiene un paso "cy.visit()", cy es una variable global inyectada por cypress y en esta se tienen todos los métodos que podremos realizar en los test esta oportunidad utiliza el visit, este método nos redirige a la url que le enviamos como parámetro.
Después de esto pasamos a revisar la prueba que se define con el método it, igual que él decribe recibe la descripción y como segundo parámetro los pasos a seguir en el test, esta vez se ejecutará el método get, acá obtendremos un objeto del DOM que se puede referenciar mediante su id(#), clase(.) o su tipo. En este caso para la línea “cy.get('#usr')” capturamos el objeto con el id “usr” que corresponde con el input donde se escribe el usuario, ya cuando obtenemos el objeto podemos realizar más acciones con este, por ejemplo el type, con este método podemos escribir en algún input como en este caso que le enviamos “admin”. Luego de esto realizamos lo mismo pero para la contraseña, con el id “pwd” y escribimos “12345”. Solo falta la acción de darle click al botón de login, ya que este objeto no cuenta con una clase o id la podemos referenciar con su type con la siguiente linea “cy.get('[type="submit"]')”, luego procedemos a usar el método click, y con este enviamos los datos. Para confirmar si el login fue exitoso revisaremos con url, con este tendremos la dirección y para verificar si nos envió a la url de bienvenida usamos should, le preguntamos si la url incluye “mode=welcome”, si esto es verdadero el test pasó la prueba.
Volvemos a correr el comando “node_modules/.bin/cypress open”, en la interfaz de cypress seleccionamos el archivo que creamos “firsTest.spec.js”, la prueba empezará a correr y si todo es correcto deberá mostrar los siguientes resultados:
Así terminamos nuestra primer prueba con cypress, cómo se puede ver es muy sencillo y con un código muy fácil de leer. Esta herramienta también nos ofrece muchas más opciones como la de obtener registro en video de las pruebas, correr las pruebas en background, integrarlo directamente a un proyecto, hacer integración continua entre otras opciones que maneja este poderoso framework que principalmente da otra alternativa a los testing e2e.
El repositorio del test del ejemplo queda en el siguiente link:
https://github.com/tebanwolox/cypress-example
Y dejo otros links de interés:
Latest comments (0)