Utilizzare get() con Cypress ed evitare il problema più insidioso.

Il metodo cy.get() permette di selezionare un elemento e operare delle affermazioni sull’elemento stesso.

È quindi lo strumento di uso più frequente all’interno del mondo dei test di integrazione con Cypress.

È importante sapere che non è una buona idea salvare in una variabile il risultato di cy.get(‘selettore’). Questo a causa dell’asincronicità insita nei meccanismi di Cypress.

// Questo codice non funzionerà come ti aspetti.
const button = cy.get('.result-filter button[value="x"]')
const form = cy.get('form')

button.click()

È quindi importante evitare di creare alias in questo modo poiché funzioneranno in modo diverso da quello che lo sviluppatore si aspetterà.
Per ulteriori approfondimenti sul meccanismo rimando all’articolo sulla guida ufficiale.

Per soddisfare le mie esigenze (avevo righe lunghissime a causa di alcuni selettori molto verbosi) ho messo semplicemente sotto variabile il nome della selezione.
In questo modo il codice è ritornato ad avere una lunghezza orizzontale gestibile in fase di lettura e scrittura.

// Questo codice non funzionerà come ti aspetti.
// In questo il comportamento di Cypress e di jQuery differiscono.
const selettore = '.result-filter button[value="x"]'
cy.get(selettore)
cy.get('form')
cy.get(selettore).click()