En los últimos tiempos cuando hablamos de tests E2E en aplicaciones web, no podemos dejar de hablar de Cypress que se está convirtiendo en el estándar de facto, sustituyendo a Selenium en muchos proyectos a nivel empresarial.
Las razón principal de este éxito es que gracias a esta tecnología este tipo de pruebas han vuelto a recobrar la confianza que perdieron con Selenium; y esto es porque Cypress aporta el punto de robustez y confianza que no puede aportar Selenium.
Además nos permite hacer testing e2e de nuestras aplicaciones web sin preocuparse por la tecnología que estemos utilizando por debajo, haciendo que se reduzca nuestro esfuerzo cognitivo de tener que aprender como testear la capa de UI en cada framework.
Partimos de que ya tenemos un proyecto SPA Vanilla como hicimos en este tutorial donde con Vite, incluímos Vitest para los test unitarios.
Ahora para añadir el soporte de cypress a nuestro proyecto, lo primero que tenemos que hacer es instalar la siguiente dependencia:
$> npm install --save-dev cypress
Esto dispara un proceso de instalación de la herramienta en nuestro proyecto. Vamos a editar la sección de scripts de nuestro fichero package.json para configurar el arranque de los comandos principales de cypress, quedando el fichero package.json de nuestro de proyecto de esta forma:
{
"name": "spa-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "vitest --coverage",
"cy:open": "cypress open",
"cy:test": "cypress run"
},
"devDependencies": {
"vite": "^4.3.2",
"vitest": "^0.31.1",
"cypress": "^12.17.3"
}
}
El siguiente paso es abrir la herramienta desde nuestro proyecto, para ello ejecutamos el siguiente comando:
$> npm run cy:open
Este comando nos abre una ventana donde nos permite seleccionar qué tipo de test es el que queremos realizar: E2E o Component. Para nuestro caso vamos a seleccionar E2E Testing.
Ahora nos informa de los ficheros que va a añadir a nuestro proyecto para dar el soporte de Cypress adecuado:
El siguiente paso es seleccionar el browser contra el que queremos ejecutar las pruebas de todos los que tenemos disponibles en nuestra máquina de desarrollo, Cypress nos proporciona Electron que es una forma de ejecutar los tests en un navegador headless.
Una vez seleccionado pulsamos en "Start E2E Testing in Electron", con lo que se abrirá una nueva ventana como esta:
Si es la primera vez que estás trabajando con Cypress, selecciona la opción "Scaffold example specs" y dale a "Okay, I got it!" para generar varios tests de ejemplo.
Con lo que vamos a tener disponibles para su ejecución multitud de ejemplos para ver la mayor parte del potencial de esta tecnología:
Podemos ir ejecutando uno por uno los ejemplos pinchando sobre ellos, o también podemos habilitar la ejecución de todos ellos. Para habilitar esta característica tenemos que ir al fichero cypress.config.js de nuestro proyecto y dejarlo como se muestra:
const { defineConfig } = require("cypress");
module.exports = defineConfig({
video: false,
e2e: {
experimentalRunAllSpecs: true,
},
});
Ahora pulsamos en el enlace habilitado:
y nos dejamos sorprender por todo lo que puede hacer ;-)
Ejecución de los tests en el terminal
Otra de las fortalezas de Cypress es que los tests se pueden ejecutar desde el terminal, lo que favorece su inclusión en procesos de integración contínua.
En nuestro caso, simplemente tenemos que ejecutar el comando:
$> npm run cy:test
Verás que es este caso el navegador es Electron y esto es una ventaja ya que no tenemos que configurar nada extra en el pipeline de integración para poder ejecutar estos test en máquina que no tienen interfaz gráfica.
Otro detalle que podrás comprobar es que se está almacenando un vídeo con la ejecución del tests (si no está configurado como false) y podemos obtener un reporte pon consola como el que se muestra en la imagen:
Creación de nuestro primer test
Ahora abrimos nuestro proyecto con nuestro editor favorito, el mío es Visual Studio Code y lo primero que suelo hacer es mover las carpetas de los ejemplos un nivel hacía arriba para sacarlos del flujo de ejecución pero seguir teniéndoles como referencia.
Hecho esto dentro de la carpeta "cypress/e2e" creamos el fichero first.cy.js con el siguiente contenido:
it('simple', () => {
cy.visit('https://www.google.es');
})
En este test lo único que queremos hacer es visitar la página de Google, ahora para ejecutar el test nos vamos a apoyar en la herramienta visual.
$> npm run cy:open
Vemos que la herramienta se abre y que solo aparece nuestro test, pinchamos sobre él y vemos que se abre una instancia de Chrome que ejecuta el tests y nos deja alojados en la página de Google.
El test va a consistir en simular el comportamiento de un usuari@ que vaya a realizar una búsqueda de la palabra Cypress en el buscador de Google. Por tanto, tenemos que simular que llegamos a la página de Google, escribimos sobre el campo de texto y pulsamos sobre la opción "Cypress" para mostrar los resultados de la búsqueda.
Pero, ¿cómo hacemos esto? ¿cómo sabemos con qué elementos del DOM tenemos que interacturar? ¿tenemos que mirar todo el código fuente? La respuesta a estas preguntas las da la propia herramienta de Cypress pinchando sobre el icono que hay a la izquierda la barra de navegación.
Al pinchar sobre él (1) se abre una barra de herramientas que nos permite identificar los elementos (2) de la página simplemente situándonos encima de ellos (3), y desde el botón de copy (4) ya nos da el comando que tenemos que utilizar en el tests para poder interacturar con ese elemento.
Con esta herramienta podemos localizar los elementos en la página. En nuestro caso el campo de texto y el botón de "Buscar en Google" e interactuar con ellos desde el test con este código:
/// <reference types="Cypress" />
it("simple", () => {
cy.visit("https://www.google.es");
cy.get("#L2AGLb > .QS5gu").click();
cy.get("#APjFqb").type("Cypress{enter}");
cy.get('[href="https://www.cypress.io/"] > .LC20lb').click();
});
Como puedes comprobar cada vez que guardamos, el test se vuelve a ejecutar de forma automática.
Top comments (0)