Luigi Sabbetti

Cypress: come funziona e a cosa serve


di // Pubblicato il: // Ultimo aggiornamento:

Le fasi di sviluppo di un software sono diverse, una delle più importanti è quella che riguarda il testing che permette di ridurre al minimo errori ed eventuali bug in produzione ed aiuta ad accrescere la qualità del prodotto sviluppato.

Esistono varie tipologie di test, una di queste è la e2e, acronimo di end to end, che consiste nel simulare il comportamento di un utente. A tal proposito, è possibile utilizzare diversi framework che ci aiutano in questa delicata fase di progettazione.

Se lavori da tempo in questo settore, probabilmente avrai sentito parlare dei vari Selenium, Jasmine o Cypress. In questo articolo ci soffermeremo proprio su quest’ultimo. Vedremo nel dettaglio come funziona Cypress, a cosa serve e come configurarlo ed effettueremo alcuni semplici test che ci permetteranno di utilizzarlo al meglio per i nostri scopi.

Quella che trovi qui, può essere considerata una sorta di guida introduttiva a Cypress che, spero, possa aiutarti durante lo sviluppo dei tuoi progetti, sia a livello personale che aziendale. Non ci resta che proseguire nella lettura e scoprire tutte le potenzialità di questo potente framework Javascript per la creazione di test e2e.

Indice dei contenuti

Prima di iniziare

Prima di iniziare, lasci che ti spieghi brevemente perché dovresti utilizzare Cypress all’interno di un tuo progetto. Innanzitutto voglio che tu sappia che la fase di test, per quanto sia sottovalutata, è importantissima durante lo sviluppo poiché ti permette di limitare i bug e ciò vuol dire risparmiare tempo e denaro.

Cypress è semplice da utilizzare, la sua curva di apprendimento è dolce, grazie ad una sintassi chiara ed estremamente intuitiva. Potrai creare test su qualsiasi elemento del DOM e simulare il comportamento di un utente reale che naviga le pagine del tuo sito.

Potrai decidere, inoltre, di utilizzare browser differenti ed una risoluzione dello schermo a tua scelta. In questo modo avrai a disposizione scenari realistici e potrai prevedere i bug e risolverli prima che avvenga il rilascio in produzione.

A differenza di Selenium, infine, non necessita di sovrastrutture per funzionare, potrai installarlo attraverso un comando Npm o Yarn e nel giro di pochi minuti sarai in grado di effettuare i tuoi primi test e2e in autonomia. Cypress, infine, è utilizzabile facilmente anche in ambiente locale e questo ti permette di testare il software quando ancora si trova sul tuo Pc.

Per utilizzare Cypress, ti basta avere una conoscenza base di Javascript ed essere in grado di effettuare Query sui nodi del DOM. Come avrai capito, Cypress è un framework utile per sviluppatori e QA engineer, estramemente richiesto nel mondo dello sviluppo software. Ecco perché ti consiglio di approfondire l’argomento ed imparare ad utilizzarlo al meglio.

Come installare Cypress

Come ti accennavo precedentemente, Cypress è installabile come pacchetto Npm e per farlo avrai bisogno di una versione recente di Node.js. A questo punto basta aprire un terminale all’interno della cartella del tuo progetto e lanciare il seguente comando:

npm install cypress

In una manciata di minuti, avrai terminato il download e l’installazione del pacchetto npm e sarai pronto a lanciare la dashboard di Cypress. Per farlo digita nel terminale il comando

./node_modules/.bin/cypress open

Ora che Cypress è in funzione, dovrai scegliere la tipologia di test che intendi effettuare. Puoi scegliere tra test e2e o component test. La differenza tra queste due tipologie di test esula dallo scopo di questa guida, per maggiori dettagli ti rimando alla guida ufficiale di Cypress a questo link.

Qualora tu non avessi mai utilizzato prima Cypress, ti consiglio di utilizzare lo scaffold ovvero una demo modificabile e ben commentata che potrai modificare in base alle tue esigenze. In fase di creazione progetto sarà Cypress stesso a chiederti di farlo, oppure potrai creare un progetto da zero. Dipende, sostanzialmente, dal tuo livello di conoscenza e dimestichezza con l’uso del framework.

Cypress, di base, è un framework ad uso gratuito ma con delle limitazioni al raggiungimento di determinate condizioni. Superando alcune soglie – riguardanti utenti e numero di test effettuati – si rende necessaria la sottoscrizione di un abbonamento. Sul sito ufficiale trovi il pricing dettagliato. Creando un account, infine, potrai sfruttare al meglio la dashboard realizzando dei video dei tuoi test da rivedere ogni volta che vorrai e molto altro.

Creare un test in Cypress

Durante l’installazione di Cypress, viene creato un file di configurazione a livello di root denominato cypress.config.js. Questo file ci permette di inserire al suo interno alcune configurazioni che ci semplificheranno la vita durante la creazione dei nostri test.

Ad esempio, possiamo informare Cypress attraverso questo file di configurazione che andremo a testare sempre url che hanno come base il nostro http://localhost:8080 così da non dover ogni volta riscrivere da zero il percorso delle pagine web che abbiamo intenzione di testare con Cypress.

Adesso passiamo alla creazione di un semplice test. Poniamo il caso che tu abbia un sito web che tratta prodotti per animali. Il sito in questione, presenta una barra di ricerca principale che, a livello di DOM, è composta da una semplice input con classe ‘main-search’. Inserendo del testo all’interno dell’input, appariranno i risultati di ricerca disposti in una struttura del DOM di tipo UL > LI. Questa lista ha come id ‘keywords’.

Il nostro compito è quello di simulare il comportamento di un utente che atterra sul nostro sito, intenzionato a cercare prodotti per canarini il quale, al fine di portare a termine la sua operazione, digita nella barra di ricerca la parola ‘Canarini’ per poi cliccare sul primo risultato di ricerca disponibile.

Ora che abbiamo individuato la tipologia di test da effettuare, non ci resta che passare alla parte di codice e comunicare a Cypress le operazioni da simulare. Possiamo quindi modificare il file todo.spec.ts che troviamo all’interno dello scaffold e scrivere quanto segue:

 
describe('Il mio primo test in Cypress', () => {
  beforeEach(() => {
    // Ciò che inseriamo nel before each viene eseguito prima di entrare nel loop dei test
    // Diciamo quindi a Cypress di visitare la pagina web avente url http://localhost:8080
    // Impostando la root nel file di configurazione, ci basterà lanciare il comando
    // cy.visit(/)
    cy.visit('http://localhost:8080')
  })
 
  it('Il mio primo test su una input di ricerca', () => {
    // Adesso Cypress si trova sulla nostra homepage, non ci resta che ricercare l'input 
    // della barra di ricerca Avente classe 'main-search'
    //  e digitare al suo interno la parola 'Canarini'
    const myTestKey = 'Canarini' // Creiamo una costante per la nostra keyword di test
 
    // Selezioniamo la input ed inseriamo al suo interno la nostra costante
    cy.get('.main-search').type(`${myTestKey}') 
 
    // A questo punto avremo a disposizione il menu contenente i risultati di ricerca
    // Comunichiamo a Cypress l'intenzione di voler cliccare sulla prima voce di menu
    cy.get('#keywords > li).first().click()
  })
})

Non ci resta che salvare il nostro codice. Cypress ci chiederà con quale browser vogliamo eseguirlo. Nel nostro caso selezioniamo Chrome e proseguiamo. In automatico si avvieranno i nostri test e potremo verificare se tutto è andato a buon fine. Qualora vi siano errori, Cypress è in grado di segnalarli in modo preciso e dettagliato e saremo in grado di risolverli facilmente.

Qualora un elemento del DOM non fosse visibile, è possibile comunque forzarne l’esecuzione passando il parametro {force=true}. Capita spesso, infatti, che un elemento da testare abbia in quel momento un display:none che ne impedisca la visualizzazione a video. Utilizzando questo parametro potremo aggirare il problema e proseguire con l’esecuzione dei test e2e sulla nostra applicazione.

Il test che abbiamo eseguito è volutamente basilare, eseguire test complessi va oltre lo scopo di questa guida che vuole essere una comoda introduzione per lo sviluppatore che si approccia alla prima volta a questo potente framework. La documentazione è ampia e dettagliata e potrai trovare tutte le informazioni di cui necessiti sul sito ufficiale del progetto all’indirizzo cypress.io

Conclusioni

Come abbiamo avuto modo di vedere, Cypress è un framework potente e ben strutturato che ci consente, attraverso pochissimi click, di avere a disposizione una vera e propria dashboard avanzata per testare a pieno il codice sviluppato ed evitare spiacevoli errori in fase di rilascio o regressioni durante la risoluzione di bug o lo sviluppo di nuove features.

Il mio consiglio è quello di non sottovalutare mai l’importanza dei test poiché ti permetteranno di risparmiare tempo prezioso alla ricerca di errori in cui l’utente finale del tuo sito potrebbe incappare. A volte un semplice overflow o una input nascosta, possono portare a perdite enormi e mancate conversioni e di queste problematiche potresti renderti conto solo a distanza di tempo, quando ormai i giochi sono fatti e tutto è perduto.

Cypress è un framework largamente utilizzato, arrivato ormai alla versione 10 e che sta riscontrando un ottimo parere da parte dei dev che trovano la sua sintassi di facile lettura. Spero di averti incuriosito con questa breve guida in cui ho cercato di mostrarti come funziona Cypress, a cosa serve e come utilizzarlo nei tuoi progetti. Non ti resta che cimentarti e, perché no, farmi sapere cosa ne pensi.

Iscriviti alla newsletter!