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%

En https://cmder.app/

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.