No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
6 Hrs
54 Min
41 Seg

Nuestra primer prueba

4/23
Recursos

¿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:

  1. 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.

  2. 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/*"
    }
    
  3. 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:

  1. 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.

  2. 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.

  3. 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.

  1. 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
    }
    
  2. 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!

Aportes 22

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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!

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"
]
},
});

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
    },
  },
});

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')

    })
})

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 🤟

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.

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

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/"
    ]
  },
});

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",

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

Con la versión 13.6.6 de cypress ahora a los archivos se tiene que poner la extensión. **primerPrueba.spec.cy.js**

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

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
```js 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 ```

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.

el archivo cypress.json ya no es soportado en la última versión!
```js describe('Primer Prueba', () => { it('Navegar a nuestra primer pagina', ()=>{ cy.visit('https://www.platzi.com/') cy.viewport(1920, 1080) }) }) ```Para las dimensiones de la pantalla de pueba tambien puedes aplicar esta forma, para que cada test tenga una dimensión diferente en dado caso que lo necesites.

En algunos proyectos que he trabajado, cuando debo realizar la misma pruebas en varios templates (subpaginas) del sitio, utilizo un for para que el pase por un fixture y realice las pruebas en cada pagina creando los it automaticamente.

import data from “…/…/fixtures/qadata.json”;
const myfunctions = require("…/…/e2e/myproject/e2e");
const url = Cypress.config().qaBaseUrl;
describe(“Send Form”, function () {
Cypress.on(“uncaught:exception”, (err, runnable) => {
return false;
});
for (let j = 0; j < data.countries.length; j++) {
let pathUrl = url + data.countries[j];
it(“Fill and Send form” + ’ ’ + data.countries[j], function () {
cy.visit(pathUrl, {
headers: {
“Accept-Encoding”: “gzip, deflate, br”
}
}).then(() => {

El toma la info de un archivo json y va iterando por cada posicion

    "countries": [
            "es",
            "fr",
            "pt",
            "co",
            "ca",
            "us"
    ],

Es mas facil si utilizamos la misma version de cypress que usa el profesor en este curso

Si quieres instalar la versión en específico del curso, selecciona al momento de instalar
[email protected].

Siguiendo el vídeo y la documentación, tenemos lo siguiente al ejectuar npx cypress open

En las ultimas versiones de cypress la manera de ignorar pruebas ya funciona con ignoreTestFiles, si no que ahora se crea una propiedad component o e2e dependiendo del tipo de prueba que quieras hacer y ya ahi se indica el patron para los specs excluidos:
.

// cypress.config.js

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

module.exports = defineConfig({
  component: {
    excludeSpecPattern: [
      "/snapsots/*"
    ],
  },
});

La ignoreTestFilesopción ya no se usa en Cypress 10 y se reemplazó con la excludeSpecPattern para ignorar los TestFile del e2e ante llamada integration podemos usar las siguientes líneas en el cypress.config.js

excludeSpecPattern:[
"/1-getting-started/*.js",
"
/2-advanced-examples/*.js"
]
El archivo quedaría así

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"
    ]          
  },
});

si estas usando la version 10 de cypress como al script de test que utilizamos para levantar cypress(test: “cypress open”) , puedes agregarle de una vez la opcion del navegador que quieras usar para la prueba por ejemplo en chrome seria: “test”: “cypress open --browser chrome --e2e”(el e2e indica el tipo de prueba a realizar).