Cypress és una eina de proves de cap a cap (end-to-end) que permet als desenvolupadors i testers automatitzar proves per a aplicacions web. És coneguda per la seva facilitat d'ús, velocitat i capacitat de depuració. En aquesta secció, aprendrem a configurar Cypress, escriure proves bàsiques i avançades, i executar-les.

Per començar a utilitzar Cypress, primer hem d'instal·lar-lo al nostre projecte. Assegura't de tenir Node.js instal·lat i segueix aquests passos:

1. Inicialitza el teu projecte amb npm (si no ho has fet ja):

   npm init -y
   

2. Instal·la Cypress com a dependència de desenvolupament:

   npm install cypress --save-dev
   

3. Obre Cypress per primera vegada:

   npx cypress open
   

Això crearà una estructura de directoris per a Cypress dins del teu projecte.

Un cop Cypress s'ha obert, veuràs una estructura de directoris com aquesta:

• fixtures/: Conté dades de prova que es poden utilitzar en les proves.
• integration/: Conté els fitxers de proves.
• plugins/: Conté plugins que poden modificar o ampliar el comportament de Cypress.
• support/: Conté scripts globals que s'executen abans de cada prova.

Crearem una prova senzilla que verifiqui que la pàgina principal del nostre lloc web es carrega correctament.

1. Crea un fitxer de prova dins del directori integration:

   touch cypress/integration/homepage.spec.js
   

2. Afegeix el següent codi al fitxer homepage.spec.js:

   describe('La pàgina principal', () => {
     it('s'hauria de carregar correctament', () => {
       cy.visit('http://localhost:3000'); // Canvia l'URL segons el teu entorn
       cy.contains('Benvingut a la nostra pàgina'); // Canvia el text segons el contingut de la teva pàgina
     });
   });
   

• describe: Defineix un conjunt de proves relacionades.
• it: Defineix una prova individual.
• cy.visit: Navega a l'URL especificada.
• cy.contains: Verifica que el text especificat està present a la pàgina.

Podem interactuar amb elements de la pàgina, com ara fer clic en botons, omplir formularis, etc.

Cypress proporciona diverses assertions per verificar l'estat de la pàgina i els elements.

Per executar les proves en mode interactiu (amb interfície gràfica):

Per executar les proves en mode headless (sense interfície gràfica):

1. No trobar elements: Assegura't que els selectors que utilitzes són correctes i que els elements estan presents a la pàgina.
2. Temps d'espera insuficients: Cypress espera automàticament que els elements apareguin, però en alguns casos pot ser necessari augmentar el temps d'espera.

1. Utilitza fixtures: Emmagatzema dades de prova en fitxers JSON dins del directori fixtures i utilitza'ls a les teves proves.
2. Divideix les proves: Divideix les proves en fitxers i blocs lògics per mantenir-les organitzades i fàcils de mantenir.
3. Depuració: Utilitza cy.pause() per pausar l'execució de la prova i inspeccionar l'estat de la pàgina.

En aquesta secció, hem après a configurar Cypress, escriure proves bàsiques i avançades, i executar-les. Cypress és una eina poderosa per a les proves de cap a cap que pot ajudar-te a assegurar la qualitat de les teves aplicacions web. Amb la pràctica, podràs escriure proves més complexes i robustes per cobrir tots els aspectes de la teva aplicació.