Nuestra primer prueba

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

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.

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

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

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