Estructuración y Configuración de Pruebas en Cypress

Clase 4 de 23 • Curso de Automatización de Pruebas UI con Cypress

Resumen

¿Cómo estructura Cypress los test?

Cypress, una herramienta poderosa para realizar pruebas automáticas, estructura sus pruebas de manera que permite una fácil gestión y ejecución. Al utilizar Mocha como marco subyacente, proporciona una sintaxis clara y organizada. En este artículo, te guiaré a través de la configuración y ejecución básica de pruebas con Cypress, ayudándote a sacar el máximo provecho de sus funcionalidades.

¿Cómo iniciar con Cypress?

Para empezar, debes crear un script de prueba y abrirlo con Cypress. Aquí está cómo puedes hacerlo:

Configuración inicial: Asegúrate de que Cypress está instalado y funcionando en tu proyecto. Esto te permitirá abrir el entorno de Cypress y ver las pruebas predeterminadas proporcionadas por la herramienta.
Eliminar pruebas predeterminadas: Si no planeas usar las pruebas automáticas incluidas, puedes eliminarlas o configurarlas para que se ignoren. Modifica el archivo cypress.json con el siguiente comando para ignorar ciertos archivos de prueba:
```
{
  "ignoreTestFiles": "**/examples/*"
}
```
Reiniciar Cypress: Para que los cambios surtan efecto, reinicia Cypress y observa que las pruebas predeterminadas ahora están ocultas.

¿Cómo crear y estructurar una nueva prueba?

Es hora de crear tu primera prueba en Cypress, aprovecha para seguir esta estructura paso a paso:

Crear un archivo de prueba: Crea un nuevo archivo de prueba con la extensión .spec.js, por ejemplo, primer_prueba.spec.js. Esto es importante para que Cypress lo detecte automáticamente.
Uso de Mocha para describir pruebas: Cypress utiliza Mocha que te permite definir pruebas usando bloques describe y it. Esta es una forma básica de estructurar tus suites de prueba:
```
describe('Primer Prueba', () => {
  it('debería navegar a Platzi', () => {
    cy.visit('https://www.platzi.com');
  });
});
```
En este ejemplo, describe encapsula un grupo de pruebas, mientras que it representa un caso de prueba individual.
Ejecución de la prueba: Guarda el archivo y navega en Cypress para verlo automáticamente. Al hacer clic en la prueba, Cypress abrirá un navegador y ejecutará el test.

¿Cómo personalizar la configuración de Cypress?

Adapta tu entorno de prueba según tus necesidades cambiando la configuración en el archivo cypress.json.

Configurar el tamaño del viewport: Ajustar el tamaño del viewport puede ser crucial para ciertas pruebas de diseño responsivo. Añade las siguientes líneas a tu configuración:
```
{
  "viewportWidth": 1000,
  "viewportHeight": 660
}
```
Modularidad en la estructura de pruebas: Puedes desarrollar una estructura más compleja al anidar otros bloques describe o it dentro de un describe principal. Aunque es flexible, una buena práctica es mantener un solo describe por archivo de prueba y varios it para diferentes casos de test.

A través de estos pasos, has aprendido cómo estructurar y ejecutar tus pruebas con Cypress. Con este conocimiento, estarás mejor preparado para gestionar pruebas más avanzadas y adaptarlas según las necesidades de tu proyecto. No subestimes el poder de una buena estructura: una base sólida facilita el mantenimiento y la escalabilidad de tus scripts de prueba. ¡Sigue explorando y ampliando tus habilidades de pruebas automatizadas!

Kalet Adonay Chavez Alas

student•

Por si acaso les da el mismo error que a mi, como primer punto la carpeta integration que se crea cuando levantamos cypress cambio de nombre y ahora se llama e2e, segundo ahi es donde se corren todos nuestros test y por si acaso usas la extension spec por ejemplo: “primetTest.spec.js” debes cambiarla a cy(“primerTest.cy.js”), para que encuentre el archivo a ejecutar para el test!

Diego Vergara

student•

Gracias bro.

Esteban Pallares Rodriguez

student•

Gracias por el aporte

Esteban Pallares Rodriguez

student•

Con la nueva versión de Cypress, la opción de ignoreTestFile que explica el profesor ya no esta disponible, con esta versión se utiliza el comando exclureSpectPattern

const { defineConfig } = require("cypress");

module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, excludeSpecPattern:[ "/1-getting-started/*.js", "/2-advanced-examples/*.js" ] }, });

Lucila Belen Pésaro

student•

hay que agregar ** antes de la primera contrabarra para cada archivo. queda asi:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    excludeSpecPattern:[
      "**/1-getting-started/*.js",
      "**/2-advanced-examples/*.js"
    ]
  },
});

Esto va en cypress.config.js

Oscar Santiago Zuluaga Gutiérrez

student•

Gracias crack!

Juan Pablo González

student•

El curso está desactualizado Profe... Tuve que hacer varios cambios para ejecutar mi primera prueba:

La sintaxis me quedó así:

describe ('Primer Prueba', ()=> {
    it ('Navegar a nuestra primer página', ()=> {
        cy.visit('https://www.platzi.com')

    })
})

Anderson David Chicaiza Tenesaca

student•

tal cual, me corrio con esa misma sintaxis

Erika Jiménez

student•

graciasss me sirvió mucho no sabía por qué me salía error en todo 😢 pero con tu ayuda me sirvió mucho ahora sí no me genera ereo

Misael Jafet Perez Carcache

student•

Si quieren cambiar en cypress 10 las dimensiones de la pantalla lo pueden hacer de la siguiente manera https://docs.cypress.io/api/commands/viewport#Default-sizing

Aqui comparto el codigo

const { defineConfig } = require("cypress");

module.exports = defineConfig({

    viewportWidth: 1920,
    viewportHeight: 1080,

  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Misael Jafet Perez Carcache

student•

Por si quieren que tambien como el profe les ignore los TestFiles de ejemplo en cypress 10 la forma seria la siguiente

const { defineConfig } = require("cypress");

module.exports = defineConfig({

    viewportWidth: 1920,
    viewportHeight: 1080,

  e2e: {

    setupNodeEvents(on, config) {
      // implement node event listeners here
    },

    excludeSpecPattern: [
      "cypress/e2e/1-getting-started/*.js",
      "cypress/e2e/2-advanced-examples/*.js"
  ]

  },
});

Me llevo rato entender la funcion del nuevo json, pero si a alguno le sirve bienvenido sea.

La fuente que no es muy clara, pero si oficial es https://docs.cypress.io/guides/references/migration-guide#Config-Option-Changes

Gabriel Mundaray

student•

Gracias bro

Emmanuel Rodríguez

student•

Personalizando nuestras pruebas

Partiendo de lo visto en la clase, seleccionando la prueba E2E de nuestra UI proporcionada por Cypress, lanzamos nuestra primera prueba.

Nota. De mi parte, estoy ejecutando el modo electron porque no me detectó ningún browser Cypress.

. Seleccionando y siguiendo el flujo de creación, pasamos por la UI para ejecutar nuestra primera prueba.

. Pasando a ejecutar nuestra primera prueba, tenemos lo siguiente: .

Primeras impresiones

Siendo honestos, considero que tiene un proceso interesante y distinto a lo tradicional, en cuanto al modo de ejecutar. Sin embargo, lo cool es que poseemos la misma estructura de pruebas como Jest que, de por sí, son compatibles con Cypress 🤟

Misael Jafet Perez Carcache

student•

Describe : Es como nuestra suite.

describe() sirve básicamente para agrupar nuestros casos de prueba. Podemos anidar nuestras pruebas en grupos tan profundos como consideremos necesario. describe() toma dos argumentos, el primero es el nombre del grupo de pruebas, y el segundo es una función callback. Puede haber varias descripciones en el mismo archivo. También se puede declarar una descripción dentro de otra descripción.

it : se utiliza para un caso de prueba individual. it() toma dos argumentos, una cadena (string) que explica lo que la prueba debe hacer, y una función de devolución de llamada que contiene nuestra prueba real.

Jan Sebastian Rodriguez Peña

student•

Muy desactualizado el curso... a compraración de la versión que existe actualmente

Cayo Legal

student•

Creo que se hace el curso con la versión 4, hoy día ya esta en la 12

Isilreiberth José Pérez Rodríguez

student•

Les dejo por acá como se seria en cypress 12 para ignoran los archivos de prueba que trae por defecto, deben editar el archivo cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  excludeSpecPattern: [
    "cypress/e2e/1-getting-started/",
    "cypress/e2e/2-advanced-examples/"
    ]
  },
});

Angie Alejandra Maldonado Giraldo

student•

muchas gracias!!

Daniel Azamar

student•

Yo estoy usando Yarn y me instaló la versión 10 de cypress. El instructor está usando la 9.5. Esto se arregla via el archivo package.json:

"cypress": "9.5.0",

Misael Jafet Perez Carcache

student•

Que buen aporte Daniel! Yo estoy tratando de adaptarlo a cypress 10 para ver que tan lejos puedo seguir por mi cuenta en este aspecto y sobretodo cuando el mercado me exija saber cypress 10 tener esa curva de aprendizaje cubierta, pero tambien es bueno tener una version anterior puesto que aveces ayuda a seguir los ejemplos. No sabia como cambiarlo ya que el comando generico de cypress te bajara la ultima version siempre

Álvaro Cano

student•

Para la versión 10, el archivo creado no es .spec.js, sino .cy.js

Hernan Esteban Caro Garrido

student•

Muchas gracias por su aporte.

Marcos Rogelio Mera Mera

student•

¿Cómo puedo hacer para que me lo autocomplete como al profe? Porque yo tengo que ir escribiendo una por una las palabras porque no las autocompleta?

deyvi.jara

student•

Con la versión 13.6.6 de cypress ahora a los archivos se tiene que poner la extensión.

primerPrueba.spec.cy.js

Brayan Torrealba Sáez

student•

Profe habrá alguna pronta actualización del curso a la versión 10 de cypress?

Gabriel Mundaray

student•

No estoy muy seguro, pero lo que si puedes hacer es actualizar cypress, con un solo comando puedes hacerlo. A nivel visual cy cambio bastante; sin embargo, lo que si cambio mucho fue la estructura y la forma de organizar los archivos. Hace un par de clases un chico dejó un link a un video de yt que lo explica mejor.

Cayo Legal

student•

Cual es el paquete para el autocompletado de las funciones de cypress?

Juan Daniel Hernández Urrego

student•

El curso está bastante desactualizado, deberían revisar el contenido.

Diana Catalina Gonzalez Cabezas

student•

La primer prueba me funcionó colocando el nombre de la carpeta como primerPrueba.cy.js ya que actualmente lo realizo desde visual studio con la versión de cypress v13.6.4

VICTOR EMILIANO AVIÑA ARAIZA

student•

LO DEJO POR ACA POR SI ALGUIEN TIENE EL MISMO
PROBLEMA, DE CORS (CROSS ORIGIN)

EN LA CARPETA SUPPORT EN EL E2E 
HAY QUE PONER LO SIGUIENTE

Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  return false
})

ME TARDE UN RATILLO CALANDO DONDE SE PONIA Y NOMAS NO JAJA para que no peirdan el tiempo

Darío Condori Humerez

student•

Nuestra primera prueba y mi primera observación, Javier deberías darle un poco de zoom todo el IDE como hacen los demás instructores.

Jaime Hernandez

student•

los viewport podrian ser distintos para mobile tablet y desktop?

Javier Fuentes Mora

teacher•

si , Los viewport cambian y se pueden modificar, de hecho en las siguientes clases se enseña

David Enrique Piedrahita

student•

Excelente video, pero tengo un problema al ejecutar un test con el navegador chrome u otro, se cierra repentinamente. Solo me funciona con el Electron...

Node v19.2.0 Cypress v11.2.0

read ECONNRESET Error: read ECONNRESET at TCP.onStreamRead (node:internal/stream_base_commons:217:20)

saludos

Javier Fuentes Mora

teacher•

ola, tal vez es tu version de Node , pero no deberia de haber ningún problema