Guía de preparación de ambiente de Cypress
En este artículo te mostramos cómo preparar el ambiente de desarrollo para un proyecto con Cypress.
Si quieres conocer más sobre esta herramienta, puedes leer mi anterior publicación, en la que mostré hice una breve introducción sobre Cypress sus usos, ventajas y desventajas.
Cómo preparar el ambiente en un proyecto de Cypress
A continuación encontrarás un paso a paso para empezar a utilizar Cypress en tu proyecto.
El primer paso es Instalar Node JS: https://nodejs.org/en
Preferiblemente, no descargar la última versión, ya que no es estable, usar la LTS. La instalación es simple y solo es usar el next.
Para validar qué versión de Node JS tenemos instalado podemos colocar en el cmd el comando de node –version
Luego, aunque este paso se podría omitir, ya que podemos trabajar con las demás consolas perfectamente, podemos descargar cmder https://cmder.app/
Lo descomprimimos y se deja en el disco local C
El IDE que vamos a utilizar es VSC y se descarga aquí https://code.visualstudio.com/download
Instalado el VSC vamos a instalar varios plugins:
Cypress Snippets
Cypress Monitor
Cypress Helper
Run Cypress
vamos configurar la terminal
En esa misma ubicación crear el vsc.bat
Le agrego:
@echo off
SET CurrentWorkingDirectory=%CD%
SET CMDER_ROOT=C:\cmder
CALL "%CMDER_ROOT%\vendor\init.bat"
CD /D %CurrentWorkingDirectory%
https://github.com/cmderdev/cmder
seguimos los pasos abriendo el cmd como administrador y ejecutamos
y listo, al dar click derecho en cualquier carpeta está la adopción de abrir el cmder
Ahora en VSC abrimos las settings
y damos click en Editor: Font Ligatures
Se agrega el código:
{
"editor.fontLigatures": false,
"terminal.integrated.profiles.windows": {
"cmder": {
"path": "c:\\WINDOWS\\System32\\cmd.exe",
"args": ["/k", "C:\\cmder\\vendor\\bin\\vscode_init.cmd"]
}
},
"terminal.integrated.defaultProfile.windows": "cmder"
}
Ya podemos abrir la terminal y por defecto con de cmder.
Instalación de Cypress
Creamos una carpeta
La abrimos con VSC, click derecho, abrir con code
Luego valido que si tenga node instalado, desde el cmd ponemos node –version
Ahora en la terminal de VSC, dentro de mi proyecto voy a escribir:
npm init
y sale lo siguiente, a lo cual debes dar enter si no deseas ponerle algún texto.
y listo, vemos que se creó nuestro package.json
siguiendo la guía de instalación en la documentación de cypress, colocamos el comando:
npm install cypress - save-dev
https://docs.cypress.io/guides/getting-started/installing-cypress
Se carga el archivo de nodemodules que permite la carga de librerias, entre los paquetes que trae estaría Cypress
Ahora vamos a abrir cypress con el comando: npx cypress open
Damos click en la opción E2E Testing
Al abrir el launchpad de cypress, se me genera automáticamente la carpeta de cypress
Se generan las siguientes carpetas
Si quiero curiosear los ejemplos que trae cypress donde nos muestran los comandos a utilizar, doy click en
y podre ejecutar los tests
Iniciar una automatización desde cero:
Agrego la siguiente linea al archivo config.js : specPattern: “cypress/e2e/**/*.js”,
specPattern: “cypress/e2e/**/*.js”,
Agrego la siguiente linea al archivo config.js : specPattern: “cypress/e2e/**/*.js”,
Ahora se crea la prueba e2e dentro de una carpeta puede ser “seccion_1” o como desees llamarla, lo importante es que esté dentro de la carpeta e2e, si no la tienes créala sin problemas.
Crea tu primera prueba para imprimir un log en la consola de cypress:
describe("Bienvenida al curso de cypress sección 1", () =>{
it("Mi primer test -> Hola mundo", ()=>{
cy.log("Hola Mundo")
})
})
y ejecutalo con el comando npx cypress run, repetimos y ahora le damos click al archivo js
y vemos que se imprime nuestro Hola mundo
Ahora haremos una prueba real
Vamos a escribir el nombre en un input de la página:https://www.saucedemo.com/v1/
Vamos a inspeccionar el sitio y vamos a tomar el id del campo de texto para nombre.
Código:
describe("Bienvenida al curso de cypress sección 1", () =>{
it("Segundo test -> campo name", ()=> {
// Visitamos a la página de sauce demo/ swag labs
cy.visit("https://www.saucedemo.com/v1/")
// Localizamos el elemento para escribir el nombre por su id
// recordemos que para id usamos #
cy.get("#user-name").type("Mafe")
// Hacemos una espera de 2S
cy.wait(2000)
})
})
Nota: A veces es necesario recargar la web o cerrar por completo el launchpad de cypress y volver a ejecutar la prueba, como me ocurrió en el momento de escribir esta guía.