Cypress: Navigare tra le Onde dei Test EndtoEnd - guida per giovani pirati

I test end-to-end rappresentano la tappa finale del nostro viaggio nello sviluppo software, garantendo che le nostre applicazioni web siano all’altezza delle aspettative dell’utente. Cypress, un compagno fidato di molti sviluppatori, offre un ambiente di testing intuitivo e potente. In questo articolo, esploreremo pratiche consigliate per scrivere test Cypress, sottolineando anche le insidiose trappole da evitare.

Photo by Nadjib BR on Unsplash

Installazione e Configurazione: Levare l’ancora prima del Viaggio

Per cominciare, poniamo le basi con l’installazione e la configurazione di Cypress. Un passo cruciale spesso trascurato è la gestione accurata delle dipendenze. Assicuriamoci di installare Cypress come dipendenza di sviluppo:

npm install cypress --save-dev

Facciamo partire Cypress con il comando:

npx cypress open

Il nostro progetto è ora pronto per l’esplorazione e l’esecuzione dei test. ⚓

Struttura del Codice: Navigare tra Ordine e Complessità

La struttura del codice è il fondamento su cui si erge il nostro ecosistema di test. Organizziamo i test in cartelle logiche che riflettano la struttura dell’applicazione. Tuttavia, occhio alle insidie: evitiamo una struttura troppo gerarchica che possa rendere difficile la navigazione, una buona mappa sa dirti sempre dove ti trovi (arg!🏴‍☠️🗺️ )

cypress
|-- integration
|   |-- homepage.spec.js
|   |-- login.spec.js
|   |-- cart.spec.js

Asserzioni: Scegliere Saggezza su Quantità

Cypress offre un vasto assortimento di asserzioni, ma è importante utilizzarle con attenzione. Sii selettivo nell’uso delle asserzioni e assicurati che siano descrittive. Un errore comune è l’eccessivo ricorso a should, che può portare a test fragili. Le asserzioni devono riflettere lo stato atteso dell'applicazione quindi non ragionare troppo sull’istante in cui il codice opera ma concentrati sul risultato delle azioni del test.

// Evita l'eccessiva dipendenza dall'ordine degli elementi
cy.get('test').should('have.length', 3);

// Utilizza questo approccio!
cy.get('test').eq(2).should('contain', 'Elemento Tre');

Dipendenze Rigide: Navigare tra i Rischiosi flutti del DOM

Un’altra insidia è la dipendenza rigida dagli elementi del DOM. Il cambiamento anche minimo nel markup potrebbe far affondare i tuoi test. Utilizza attributi dati o identificatori unici per selezionare gli elementi. Un approccio migliore è rendere i tuoi selettori più resilienti agli aggiornamenti del DOM. Solo così potrai resistere alla tempesta! 🌊⛵

// Evita: vulnerabile agli aggiornamenti del DOM
cy.get('.login-form input:first').type('username');

// Preferibile: è meno vulnerabile agli aggiornamenti
cy.get('[data-testid=username-input]').type('username');

Gif from giphy.com

Ambienti: Sapere perfettamente in quale mare stai navigando

La gestione degli ambienti è una gemma nascosta di Cypress. Sfruttala per adattare i tuoi test a diversi scenari, come ambiente di sviluppo, test e produzione. Evita l’errore comune di trascurare questa funzionalità, che può portare a test instabili e difficili da mantenere. Non perderti questo tesoro 👑💎💰

// Legge l'URL dall'ambiente
const apiUrl = Cypress.env('API_URL');

// Per il corpo di mille balene!

cy.wait: Una Trappola da Evitare con Attenzione

Un’area molto insidiosa da attraversare è l’uso di cy.wait. Mentre può sembrare utile per aspettare il completamento di chiamate asincrone, il suo uso eccessivo può rallentare i test e renderli instabili. Evitiamo di appoggiarci troppo al wait e cerchiamo alternative più affidabili, come l'attesa intelligente degli elementi o l'uso di comandi Cypress che attendono implicitamente.

// Evita l'uso eccessivo di cy.wait
cy.get('[data-testid=some-element]').click();
cy.wait(2000); // No grazie.

// Preferibile: utilizza comandi Cypress che attendono implicitamente
cy.get('[data-testid=some-element]').click();
cy.get('[data-testid=expected-element]').should('be.visible');

// E Se proprio non dovesse bastare il wait implicito..Timeout!
cy.get('[data-testid=some-element]').click();
cy.get('[data-testid=expected-element]',{timeout:5000}).should('be.visible');

cy.log: Segui le stelle se cala la notte

cy.log è uno strumento versatile che consente di registrare messaggi nel log di Cypress. Questo può essere estremamente utile per comprendere meglio il flusso dei test e risolvere eventuali problemi di debug. Tuttavia, è essenziale utilizzare il log in modo ponderato per evitare log indesiderati e sovraffollati. Ritrova la rotta come un vero pirata sa fare 🧭✨

// Esempio di utilizzo di cy.log
cy.log('Inizio del test di login');
cy.visit('/login');
cy.get('[data-testid=username-input]').type('testuser');
cy.get('[data-testid=password-input]').type('password123');
cy.get('[data-testid=login-button]').click();
cy.log('Fine del test di login');

Photo by nic chi on Unsplash

Un Esempio di Test in Acque limpide

E ora scriviamo un test con tutte le cose che abbiamo letto finora, e ricorda: Vogliamo un test robusto ma non troppo complesso! Non useresti mai una palla di cannone per uccidere una mosca, giusto ?

Un test E2E completo potrebbe apparire così:

describe('Funzionalità di Login', () => {
  it('dovrebbe consentire all\'utente di effettuare il login', () => {
    cy.log('Inizio del test di login');
    cy.visit('/login');
    cy.get('[data-testid=username-input]',{timeout:6000}).should('be.visible');
    cy.get('[data-testid=username-input]').type('testuser');
    cy.get('[data-testid=password-input]').type('password123');
    cy.get('[data-testid=login-button]').click();

    // Verifica il reindirizzamento alla home page dopo il login
    cy.url().should('include', '/home');

    cy.log('Login eseguito con successo');
  });
});

Per concludere: Naviga con consapevolezza, evita gli scogli

Navigare tra le acque dei test E2E con Cypress può essere un viaggio entusiasmante, ma richiede consapevolezza e attenzione. Mantieni il codice organizzato, fai un uso sagace delle asserzioni, evita dipendenze rigide e considera attentamente l’uso di cy.wait.

Concludiamo il nostro viaggio con un incoraggiamento: la scrittura di test può sembrare impegnativa, ma seguendo pratiche sane, renderai il tuo codice più robusto e facilmente manutenibile. Raggiungi nuove vette nella qualità del codice con test end-to-end affidabili ed inaffondabili! AAARG 🏴‍☠️

Ah dimenticavo, Buon testing!