Essere certi che le vostre applicazioni web funzionino senza intoppi su browser diversi è ormai fondamentale. Ecco dove entra in gioco Cypress. Questo framework per il testing end-to-end si è guadagnato popolarità grazie alla sua semplicità, i suoi feedback in tempo reale e robuste capacità di testing. Segui questa guida per imparare come mettere in piedi un progetto Cypress in TypeScript e rendere i vostri script di testing ancora più affidabili.
Qui, ti guideremo attraverso il processo di creazione di un progetto Cypress da zero e della sua integrazione con TypeScript. Iniziamo!
Cos’è Cypress?
Cypress è un framework basato su JavaScript per il testing di componenti end-to-end. Questa tecnologia open-source è progettata per il web moderno ed è pensata per semplificare e ottimizzare la scrittura, l’esecuzione e il debug di test per le applicazioni web. Per chi ha familiarità con queste tecnologie, si tratta di qualcosa di simile a Playwright.
Cypress fornisce un’API di testing che rende più facile scrivere test cross-browser sia in JavaScript che in TypeScript. Scrivi gli script di testing una sola volta e eseguili su Chrome, Safari, Edge, Opera, Firefox e molti altri browser popolari!
Buoni motivi per scrivere script di testing con Cypress in TypeScript
Ci sono almeno tre buone ragioni per utilizzare Cypress con TypeScript:
- Maggiore robustezza grazie alla tipizzazione: I tipi riducono la possibilità di introdurre errori banali nei yuoi test, rendendoli meno instabili e più robusti. Ciò porta a una maggiore affidabilità, poiché è meno probabile che i test falliscano a causa di problemi nel codice, come errori di tipo.
- Miglior manutenibilità del codice: TypeScript migliora la leggibilità e la manutenibilità del codice fornendo un’esperienza di sviluppo migliore rispetto a JavaScript. Inoltre, le funzionalità di auto-completamento e di type inference offerte dai moderni IDE semplificano la scrittura e la comprensione del codice dei test. Al crescere della della tua suite di test, mantenere una base di codice chiara e organizzata diventa cruciale.
- Migliore collaborazione tra sviluppatori: Un linguaggio fortemente tipizzato come TypeScript incoraggia la scrittura di codice più strutturato e documentato. Quando più membri del team collaborano agli stessi test, i tipi aiutano a garantire che tutti comprendano gli input e gli output attesi per le funzioni e i componenti, riducendo gli errori e l’onere comunicazionale.
TypeScript offre sicuramente diversi vantaggi, ma è importante notare che introduce anche alcune difficoltà. La sua curva di apprendimento è più ripida rispetto a quella di JavaScript e può rallentare la scrittura dei test. Tuttavia, la sfida principale sta nell’integrazione di TypeScript nell’ambiente di testing di Cypress. Evita ogni problema con la nostra completa guida alla configurazione di TypeScript in Cypress!
Lettura consigliata: 8 ottimi motivi per cui tutti i dev devono conoscere Java
Inizializzazione di un progetto Cypress con TypeScript
Segui questo tutorial passo-passo e impara come creare un progetto Cypress per il testing E2E in TypeScript.
Passo 1: Crea un progetto npm
Apri il terminale e crea una cartella chiamata cypress-typescript-demo per il tuo progetto Cypress:
mkdir cypress-typescript-demoIn un esempio reale, assegna un nome più appropriato alla directory.
Entra nella directory:
cd cypress-typescript-demoE lancia il comando seguente per inizializzare un progetto npm:
npm init -yOttimo! La tua cartella cypress-typescript-demo conterrà ora un file package.json.
Passo 2: Configura Cypress
Assicurati di soddisfare i requisiti di sistema di Cypress prima di procedere.
Ora, aggiungi Cypress alle dipendenze del tuo progetto con:
npm install cypress --save-devIl comando qui sopra installerà cypress localmente come dipendenza di sviluppo nel progetto. Questa operazione potrebbe richiedere un po’ di tempo.
Apri Cypress con:
npx cypress openLa prima volta che esegui questo comando, verrrà lanciata una procedura guidata di configurazione:
Nello specifico, ti verrà mostrata una vista con le nuove funzionalità disponibili nell’ultima versione di Cypress. Clicca su “Continua >” per procedere.
Nella finestra successiva, seleziona il tipo di progetto di testing che desidera inizializzare:
In questo esempio, opta per “Testing E2E”, che è lo scenario più comune.
Questo inizializzerà la seguente struttura dei file nella cartella del tuo progetto:
├── cypress.config.js
└── cypress
├── downloads
├── e2e
├── fixtures
└── supportCode language: CSS (css)Riceverai una notifica di questa operazione tramite la seguente finestra:
Ancora una volta, clicca il pulsante “Continua”.
Ti verrà ora chiesto di selezionare il browser su cui vuoi eseguire i tuoi test. Ignoralo e chiudi tutte le finestre aperte.
Fantastico! Ho hai un progetto Cypress su cui lavorare. È ora di aggiungere TypeScript.
Passo 3: Aggiungi TypeScript
Prima di tutto, aggiungi TypeScript alle dipendenze del tuo progetto con:
npm install typescript --save-devQuesto installerà typescript localmente come dipendenza di sviluppo nella cartella del progetto.
Successivamente, inizializza un file di configurazione TypeScript con:
npx tsc --initQuesto creerà un file tsconfig.json nella radice del progetto. Aprilo e sostituisci il suo contenuto con il seguente:
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node"]
},
"include": ["**/*.ts"]
}Code language: JSON / JSON with Comments (json)target istruisce il compilatore TypeScript a compilare l’applicazione TypeScript in un’applicazione JavaScript ECMAScript 5. Inoltre, "types" indica al compilatore di includere solo le definizioni dei tipi di Cypress e Node.js.
Nota: Potresti dover riavviare il server TypeScript del tuo IDE dopo l’aggiunta di tsconfig.json.
Meraviglioso! Ora hai tutto il necessario per poter scrivere il tuoprimo script Cypress TypeScript.
Passo 4: Genera il tuo primo script Cypress in TypeScript
Apri nuovamente Cypress con:
npx cypress openScegli “Testing E2E” e raggiungi nuovamente la schermata di selezione del browser:
In questo esempio, sceglieremo “Chrome”, ma qualsiasi altro browser andrà bene. Clicca su “Start E2E Testing in Chrome”.
Ciò aprirà il modulo di creazione di un file spec:
Dai un nome al tuo test, facendo attenzione a specificare **.ts** come estensione in modo che venga trattato come un file TypeScript dal tuo IDE. Quindi, clicca su “Create spec”.
Nota: Se non sei esperto di Cypress, i file .spec sono i file di test che contengono la logica di testing.
Cypress inizializzerà il seguente spec di esempio all’interno della cartella ./cypress/e2e:
describe('template spec', () => {
it('passes', () => {
cy.visit('https://example.cypress.io')
})
})Code language: PHP (php)E lo avvierà per te in automatico. Quindi, vedrai:
Qui, puoi verificare che il test Cypress TypeScript tenta semplicemente di visitare una pagina di esempio e lo facon successo.
Passo 5: Personalizza la logica di testing in TypeScript
Aggiorna il tuo script con qualche logica aggiuntiva di testing:
describe('template spec', () => {
it('Contains "Kitchen Sink"', () => {
cy.visit('https://example.cypress.io')
// Verifica che l'elemento h1 contenga la stringa prevista
const title = 'Kitchen Sink'
const titleElement = cy.get('h1').first()
titleElement.should('include.text', title)
})
})Code language: PHP (php)Questo semplice test verifica che l’elemento <h1> della pagina di test contenga la stringa “Kitchen Sink”.
Cypress rileverà automaticamente le modifiche ed eseguirà la nuova logica di testing per voi:
Perfetto, il test funziona come previsto.
Ora, supponiamo che title e titleElement ti facciano confondere. Potresti quindi terminare per scrivere del codice errato come segue:
Grazie all’integrazione di TypeScript, l’IDE ti avvertirà immediatamente dell’errore, rendendo il test più robusto. Inoltre, ti permette di risparmiare tempo evitando di dover attendere che Cypress segnali l’errore:
Et voilà! Hai appena imparato come utilizzare Cypress con TypeScript per portare il tuo processo di testing E2E al livello successivo!
Bonus: Definizione di comandi e asserzioni Cypress personalizzate in TypeScript
Cypress offre un’integrazione completa con TypeScript, supportando anche la definizione di comandi e asserzioni personalizzati.
Per nuovi comandi, tutto ciò che doevi fare è specificare la logica personalizzata come spiegato nella documentazione, e quindi aggiungere i file di dichiarazione dei tipi TypeScript richiesti nella cartella ./cypress/support. Consulta il capitolo ”Types for Custom Commands” dalla documentazione ufficiale per degli esempi completi.
Per quanto riguarda le asserzioni personalizzate, è necessario definirle tramite il linguaggio Chai e quindi estendere i tipi TypeScript relativi alle asserzioni per far comprendere al compilatore i nuovi metodi. Scopri di più nella documentazione.
Conclusioni
In questo articolo, hai visto cos’è Cypress e come integrarlo con TypeScript. Come imparato qui, scrivere test E2E in TypeScript porta diversi vantaggi e la configurazione di Cypress TypeScript non è complessa.
Attraverso questa guida passo-passo, hai avuto l’opportunità di imparare come utilizzare TypeScript nei tuoi script Cypress. Il testing non è mai stato così semplice!
Grazie per aver letto questo articolo! Speriamo che ti sia stato utile!
