Les proves de punta a punta (E2E) són essencials per assegurar que la teva aplicació funcioni correctament des de la perspectiva de l'usuari final. Cypress és una eina poderosa per a realitzar proves E2E, ja que proporciona una API senzilla i intuïtiva, així com una interfície gràfica per veure les proves en temps real.

Per començar a utilitzar Cypress, primer has d'instal·lar-lo al teu projecte. Pots fer-ho utilitzant npm o yarn:

Després d'instal·lar Cypress, pots inicialitzar-lo per crear l'estructura de carpetes necessària:

Això crearà una carpeta cypress al teu projecte amb les següents subcarpetes:

• fixtures: Conté dades de prova.
• integration: Conté els fitxers de proves.
• plugins: Conté fitxers per estendre la funcionalitat de Cypress.
• support: Conté fitxers de configuració i comandes personalitzades.

Suposem que tens una aplicació Vue.js amb una pàgina d'inici que conté un botó que, quan es clica, mostra un missatge. Crearem una prova per assegurar-nos que aquest comportament funciona correctament.

1. Crea un fitxer de prova: A la carpeta cypress/integration, crea un fitxer anomenat home.spec.js.

2. Escriu la prova:

• describe: Defineix un conjunt de proves relacionades.
• it: Defineix una prova individual.
• cy.visit('/'): Navega a la pàgina d'inici de l'aplicació.
• cy.get('button'): Selecciona l'element del botó.
• cy.contains('El botó ha estat clicat!'): Verifica que el text especificat es mostra a la pàgina.

Per executar les proves, pots utilitzar la interfície gràfica de Cypress o executar-les en mode capless.

Executa el següent comandament per obrir la interfície gràfica de Cypress:

A la interfície, selecciona el fitxer de prova home.spec.js per executar-lo.

Per executar les proves en mode capless (ideal per a integració contínua), utilitza el següent comandament:

Crea una prova per verificar que un formulari de registre funciona correctament. La prova hauria de:

1. Visitar la pàgina de registre.
2. Omplir els camps del formulari (nom, correu electrònic, contrasenya).
3. Clicar el botó de registre.
4. Verificar que es mostra un missatge de confirmació.

• Elements no trobats: Assegura't que els selectors que utilitzes són correctes i que els elements existeixen a la pàgina.
• Temps d'espera insuficients: Cypress espera automàticament que els elements apareguin, però en alguns casos pot ser necessari augmentar el temps d'espera.

• Utilitza selectors únics: Evita utilitzar selectors que puguin canviar fàcilment, com ara classes generades automàticament.
• Divideix les proves: Mantingues les proves petites i enfocades en una funcionalitat específica per facilitar el manteniment.

Les proves de punta a punta amb Cypress són una manera efectiva de garantir que la teva aplicació Vue.js funcioni correctament des de la perspectiva de l'usuari final. Amb Cypress, pots escriure proves clares i llegibles que cobreixin una àmplia gamma de casos d'ús. Practica escrivint i executant proves per familiaritzar-te amb l'eina i assegurar-te que la teva aplicació és robusta i fiable.