No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
15 Hrs
23 Min
45 Seg

Nuestra primer prueba

4/23
Recursos

Aportes 20

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: 鈥減rimetTest.spec.js鈥 debes cambiarla a cy(鈥減rimerTest.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(鈥渃ypress鈥);

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 pgina', ()=> {
        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

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

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

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.

Con la versi贸n 13.6.6 de cypress ahora a los archivos se tiene que poner la extensi贸n. **primerPrueba.spec.cy.js**
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 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(鈥淪end Form鈥, function () {
Cypress.on(鈥渦ncaught:exception鈥, (err, runnable) => {
return false;
});
for (let j = 0; j < data.countries.length; j++) {
let pathUrl = url + data.countries[j];
it(鈥淔ill and Send form鈥 + 鈥 鈥 + data.countries[j], function () {
cy.visit(pathUrl, {
headers: {
鈥淎ccept-Encoding鈥: 鈥済zip, 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: 鈥渃ypress open鈥) , puedes agregarle de una vez la opcion del navegador que quieras usar para la prueba por ejemplo en chrome seria: 鈥渢est鈥: 鈥渃ypress open --browser chrome --e2e鈥(el e2e indica el tipo de prueba a realizar).