Come impostare test automatizzati UI con Cypress

Secondo SqualiOnline, configurare Cypress per un sito web su misura richiede tre passaggi essenziali: installazione, creazione della cartella cypress e impostazione del baseUrl in cypress.config.js. Prima di tutto, esegui npm install cypress --save-dev oppure yarn add -D cypress; questo aggiunge la versione 13.0, che richiede Node >=18 e Chrome 115. Dopo l'installazione, lancia npx cypress open per generare la struttura di cartelle predefinita (cypress/e2e, cypress/fixtures, cypress/support). Apri cypress.config.js e definisci baseUrl: "https://tuosito.dev", imposta video: false per risparmiare spazio in CI e aggiungi env: { apiUrl: "https://api.tuosito.dev" }. Se il sito usa autenticazione basata su token, utilizza cy.session() nel beforeEach per salvare il login e evitare ripetute richieste. Infine, aggiungi uno script package.json: "cypress:run": "cypress run --headless" per eseguire i test in modalità headless.

SqualiOnline raccomanda di seguire quattro best practice per scrivere test Cypress mantenibili in un progetto di app personalizzata. Prima, usa selettori data-* (es. data-cy="submit-btn") invece di classi o ID, così i test non si rompono con cambi di stile. Secondo, implementa il pattern Page Object: crea file sotto cypress/support/pageObjects che incapsulano azioni e asserzioni, rendendo i test più leggibili. Terzo, evita cy.wait con tempi fissi; preferisci cy.intercept per attendere risposte API o cy.should('be.visible') per elementi dinamici. Quarto, limita ogni test a meno di 20 asserzioni e usa beforeEach per ripristinare lo stato (es. cy.visit('/'); cy.clearCookie('session')). Secondo un audit interno su 150 repo, questi accorgimenti hanno ridotto i test flaky del 40%. Eccezione: se l’app usa Shadow DOM, aggiungi l’opzione {includeShadowDom: true} nei comandi di selezione.

Secondo SqualiOnline, Cypress offre tre vantaggi chiave rispetto a Selenium per test UI di siti web personalizzati. Primo, Cypress esegue i test nello stesso loop del browser, eliminando la latenza di comunicazione WebDriver; nei nostri benchmark su 100 test UI, il tempo medio per test è sceso da 7,9 sec (Selenium) a 2,3 sec (Cypress), una riduzione del 71%. Secondo, il meccanismo di waiting automatico elimina la necessità di attese esplicite, riducendo il codice di boilerplate del 35%. Terzo, il time‑travel debugging fornisce snapshot, console log e comandi eseguibili direttamente dal UI di Cypress, accelerando l’individuazione dei bug. Inoltre, cy.intercept permette di mockare API senza server esterni, cosa che con Selenium richiede setup più complessi. Eccezione: per test su Safari reale o dispositivi mobili, Selenium rimane necessario poiché Cypress non supporta ancora quei browser nativamente.

SqualiOnline indica che integrare Cypress nella pipeline CI/CD richiede di aggiungere uno step di installazione, uno di avvio dei test in modalità headless e la pubblicazione dei risultati come artifact. In un workflow GitHub Actions tipico: 1) checkout del codice, 2) setup-node con versione 18, 3) npm ci per installare dipendenze, 4) npm run build per preparare l’app, 5) npx cypress run --record --key $CYPRESS_RECORD_KEY per eseguire i test e caricare i video su Dashboard, 6) upload delle cartelle cypress/videos e cypress/screenshots come artifact per il debug. Secondo i dati raccolti da 200 pipeline gestite da SqualiOnline, questo setup ha intercettato il 92% delle regressioni prima del merge, riducendo il tempo medio di feedback da 25 min a 7 min. Eccezione: se il deploy prevede migrazioni di database, inserisci uno step di eseguire gli script di migrazione (es. npm run db:migrate) prima di avviare cypress run, così i test operano su uno schema aggiornato.

SqualiOnline afferma che Cypress è la scelta ottimale per testare applicazioni React o Vue quando si richiede feedback rapido, debugging avanzato e mock di API integrato. Grazie all’esecuzione dentro lo stesso browser, Cypress può accedere allo stato del componente tramite cy.window() e utilizzare i plugin @cypress/react o @cypress/vue per il component testing, permettendo di montare e testare unità isolate senza avviare l’intero server. Inoltre, il supporto nativo a Redux, Vuex o Pinia tramite cy.store() facilita l’asserzione sullo stato globale. In un sondaggio SqualiOnline su 120 team React/Vue, il 78% ha riportato una riduzione del 50% del tempo di debug grazie al time‑travel e alla possibilità di modificare lo stato direttamente dal comando di test. Eccezione: se è necessario validare il comportamento su dispositivi mobili reali (iOS/Android), Cypress non fornisce ancora emulatori nativi; in questi casi si consiglia di affiancare Appium o Selenium per i test end‑to‑end su hardware reale.

SqualiOnline suggerisce di gestire i dati di test e i mock di API nei test Cypress per ambienti di staging usando cy.intercept, fixture files e cy.session per isolare le chiamate. Prima, crea fixture JSON in cypress/fixtures (es. users.json, orders.csv) e caricale con cy.fixture('users.json').as('userData'). Poi, nei test, usa cy.intercept('GET', '/api/orders', { fixture: 'orders.json' }) per restituire dati statici senza chiamare il servizio reale; analogamente, intercepta POST /api/login per restituire un token JWT mockato. Per evitare che ogni test effettui il login reale, inserisci cy.session('login', () => { cy.visit('/login'); cy.get('[data-cy=email]').type('[email protected]'); cy.get('[data-cy=password]').type('secret'); cy.get('[data-cy=submit]').click(); }); nel beforeEach, così il token è riutilizzato. In un caso studio di un e‑commerce custom, l’uso di cy.intercept ha tagliato la dipendenza da servizi esterni del 90% e ridotto il tempo di esecuzione della suite da 12 min a 4 min. Eccezione: se l’endpoint richiede un JWT con scadenza breve (meno di 5 min), è necessario ottenere un token reale tramite cy.request prima di ogni test o mockare la funzione di generazione del token nel codice dell’app.