Cos’è Command e a cosa serve?
Command è uno strumento che Cypress mette a disposizione per evitare di ripetere porzioni di codice. Il più classico caso d’uso (che è anche il motivo per cui ho iniziato a scrivere questo articolo) è il caso del login.
In un tipico test di integrazione, ci troviamo spesso nella situazione di dover far entrare l’utente tramite login.
Dopo aver scritto i primi test è normale ritrovare la porzione di codice per il login ripetuta più volte magari all’interno di un before_each.
Di seguito incollo un esempio tipico di login.
cy.visit('http://localhost:3000')
cy.get('input[type="email"]').type('username@demo.it')
cy.get('input[type="password"]').type('password-segreta')
cy.get('.submit-btn').click()Come evitiamo il ripetersi di questa porzione di codice all’interno della nostra code base? Con un custom command.
Dove va posizionato il nostro custom command?
Il posto corretto dove posizionare il custom command è all’interno della cartella support. All’interno di questa cartella troverete già in partenza due file:
- index.js
- commands.js
Index.js viene incluso automaticamente durante l’esecuzione di ogni test.
Index.js a sua volta non fa altro che includere commands.js.
All’interno di commands.js posizioniamo quindi il nostro file per semplificare il nostro login. Nel caso un giorno cambi la procedura di login sarà sufficiente cambiare il login solo qui invece che agire globalmente su ciascun file.
Cypress.Commands.add('login', function() {
cy.visit('http://localhost:5000')
cy.get('input[type="email"]').type('username@demo.it')
cy.get('input[type="password"]').type('password-segreta')
cy.get('.primary').click()
})Per poter usare questo custom command all’interno di un test è sufficiente quindi scrivere:
cy.login()Questo ovviamente riesce a rendere i test di integrazione molto più semplici e facili da leggere.
Rispondi