Gestire i flussi di posta elettronica nei test Cypress #frontend@twiliosendgrid

Twilio SendGrid invia molte email. Per inviare tutte le nostre e-mail transazionali, dalla reimpostazione della password alla verifica e-mail dell'account per esportare e-mail CSV, utilizziamo i nostri servizi di back-end.

Di recente abbiamo superato un enorme traguardo di oltre 3 trilioni di e-mail inviate.

Nei nostri ambienti di test, inviamo le nostre e-mail per testare le caselle di posta in server Squirrelmail self-hosted per evitare di inviare e-mail di prova a fornitori di servizi di posta in arrivo come Gmail. Molti flussi importanti richiedono all'utente di controllare la propria posta elettronica, fare clic su un collegamento utilizzabile, reindirizzare all'applicazione Web e quindi continuare in una pagina di download o verifica riuscita.

Testiamo queste funzionalità manualmente inserendo i nostri indirizzi e-mail Squirrelmail nei moduli necessari, facendo clic su alcuni pulsanti e seguendo i collegamenti e-mail per verificare che le cose funzionino come previsto. Possiamo farlo ogni volta che vengono apportate nuove modifiche al codice per assicurarci di non regredire da nessuna parte, ma sarebbe bello automatizzare questi passaggi in un test end-to-end (E2E) che possiamo eseguire di nuovo ogni volta che lo desideriamo. In particolare, vorremmo scrivere test E2E con Cypress, quindi non dobbiamo testare manualmente questi flussi di posta elettronica potenzialmente lenti e confusi ogni volta nel nostro browser web.

Prima di entrare nel post, ecco un paio di articoli che potresti essere interessato a leggere prima.

• Se non hai mai scritto test E2E prima o desideri un aggiornamento su come pensare quando scrivi test E2E, potresti voler vedere questo post sul blog prima di iniziare.
• Se non hai familiarità con l'utilizzo di Cypress per la scrittura di test E2E in generale, ti consigliamo vivamente di dare un'occhiata alla nostra panoramica di mille piedi sull'implementazione dei test Cypress per le tue applicazioni web: questo ti darà un'idea migliore dell'API Cypress.

Questo post presuppone che tu conosca alcune delle funzioni Cypress come cy.task() per eseguire codice arbitrario che definiamo in un server Node per aiutarci a gestire le e-mail. Inoltre, se i frammenti di codice successivi con TypeScript sono un po' confusi, potrebbe chiarire le cose per vedere il nostro post sul blog su come abbiamo digitato i nostri test Cypress. Puoi comunque modificare il codice nei tuoi test Cypress rimuovendo le definizioni del tipo e attenendoti alla sintassi solo JavaScript.

Non tratteremo come configurare il tuo server di posta in arrivo di prova (come Squirrelmail), ma ci concentreremo sull'automazione di questi passaggi relativi alla ricerca di e-mail, all'analisi dei contenuti e-mail corrispondenti e ai seguenti collegamenti e-mail. Questo dovrebbe darti un quadro migliore del tipo di funzioni da utilizzare e implementare per gestire questi flussi di posta elettronica, supponendo che tu abbia un server di posta in arrivo di prova e le tue credenziali a cui connetterti.

Come gestiamo i flussi di posta elettronica nei test Cypress?

Per testare l'intero flusso di posta elettronica, abbiamo creato i plugin cy.task() per:

• Gestisci la connessione e il filtraggio delle caselle di posta in arrivo per le e-mail con una determinata riga dell'oggetto
• Recupero del contenuto del corpo di un'e-mail corrispondente
• Eliminazione di e-mail dalla posta in arrivo di un utente senza mai dover accedere tramite l'interfaccia utente di Squirrelmail

Abbiamo seguito questa strada anche perché non possediamo né abbiamo il controllo sull'interfaccia utente di Squirrelmail e non è possibile visitare più di un superdominio in un test di Cypress poiché gli URL per l'interfaccia utente di Squirrelmail risiedono in un superdominio separato dalla nostra app frontend distribuita .

Per prima cosa abbiamo installato una libreria chiamata "emailjs-imap-client" per aiutarci a configurare un client IMAP per connettersi alla nostra casella di posta Squirrelmail tramite alcune credenziali e configurazioni dell'host. Usando questa libreria, abbiamo incapsulato tutte le cose relative a Squirrelmail all'interno di un modulo chiamato squirrelmail.ts che avremmo poi importato nei nostri plugins/index.ts per le definizioni delle nostre funzioni cy.task() .

Prima di eseguire i test che coinvolgono le e-mail, dovremmo eliminare tutte le e-mail con la stessa riga dell'oggetto per evitare falsi positivi nel riferimento accidentale a un'e-mail più vecchia attivata in un test precedente. Per gestire questo caso d'uso, abbiamo implementato questa attività per eliminare tutte le email con una riga dell'oggetto corrispondente nella posta in arrivo di un utente come segue.

Durante i nostri test, attiviamo un'azione che porterà all'invio di un'e-mail all'indirizzo e-mail Squirrelmail dell'utente e spesso dobbiamo attendere che l'e-mail con una riga dell'oggetto corrispondente arrivi nella casella di posta dell'utente. Questo processo richiede da secondi a minuti, a seconda di quanto sono coinvolti i processi di back-end. Dobbiamo assicurarci di eseguire il sondaggio fino all'arrivo o fornire un errore di timeout nel test per farci sapere se qualcosa non funziona o è in ritardo nella parte di invio della posta. Poiché abbiamo già eliminato in anticipo le e-mail con le righe dell'oggetto corrispondenti, possiamo essere per lo più certi che sia stato attivato dal nostro test se viene restituito correttamente.

Ecco come abbiamo sviluppato la funzionalità per attendere che un'e-mail con una riga dell'oggetto specifica come "Esportazione della tua attività e-mail" o "Verifica del mittente" arrivi nella casella di posta di un utente.

Finora:

• Abbiamo cancellato la casella di posta elettronica dell'utente
• Il test viene eseguito e attiva un'e-mail da inviare alla casella di posta elettronica dell'utente
• Abbiamo atteso con successo l'arrivo dell'e-mail nella casella di posta dell'utente

Ora, dobbiamo ottenere il contenuto del corpo di quella specifica email.

Per fortuna, possiamo restituire il contenuto del corpo dell'e-mail corrispondente come una stringa che dovremo in seguito analizzare affinché il collegamento dell'azione torni all'app Web che controlliamo e possediamo. Il plug-in delle attività di seguito cerca nella posta in arrivo di un utente un'e-mail con una riga dell'oggetto corrispondente e restituisce il contenuto del corpo da utilizzare in seguito.

Come breve promemoria, non potevamo semplicemente creare oggetti pagina per le pagine di Squirrelmail, visitare Squirrelmail tramite l'interfaccia utente, filtrare per una riga dell'oggetto corrispondente, aprire l'e-mail, fare clic sul collegamento azionabile direttamente ed essere sulla buona strada per tornare a la nostra app Web, perché non possiamo visitare più superdomini nello stesso test Cypress. È anche più un antipattern per visitare pagine e applicazioni che non controlli o possiedi.

Dopo aver trovato il contenuto del corpo dell'e-mail corrispondente che abbiamo attivato nel test, dobbiamo analizzare il contenuto HTML, trovare il collegamento dell'azione, attivare una richiesta HTTP al collegamento e quindi seguire il reindirizzamento alla nostra applicazione web.

Per analizzare il contenuto HTML dell'e-mail e trovare le parti dei link di azione, abbiamo utilizzato un'altra libreria chiamata "cheerio", che carica la stringa HTML e ci consente di chiamare funzioni simili a jQuery per estrarre i pulsanti di azione o i collegamenti di cui abbiamo bisogno. Una volta analizzati i collegamenti, facciamo una richiesta HTTP al collegamento con cy.request() , seguiamo il collegamento di reindirizzamento all'app Web che controlliamo e possediamo su un superdominio e procediamo con la verifica degli stati di successo nella pagina che abbiamo reindirizzato a.

Nel tuo caso, potrebbe non essere necessario attivare una richiesta HTTP al link e seguire il reindirizzamento della risposta se il tuo link punta già alla posizione corretta. Se l'URL del collegamento punta già direttamente alla tua app Web, nulla ti impedisce di estrarre il percorso del collegamento ed eseguire un cy.visit(linkPath) per reindirizzare alla tua app. Nel caso dei link Twilio SendGrid, i link potrebbero avere l'aspetto di "...sendgrid.net?..." se hai attivato il tracciamento dei link per le tue e-mail o "brandedlink.com" se hai il branding dei link. Ecco perché dovremmo fare una richiesta HTTP ed estrarre il percorso di reindirizzamento per fare un cy.visit(redirectPath) perché l'"href" immediato dei collegamenti non corrisponde alla nostra app web.

Di seguito è riportato un esempio di trovare il collegamento con cheerio, effettuare una richiesta HTTP al collegamento e seguire il reindirizzamento.

Conclusione

Ti abbiamo guidato attraverso le numerose funzioni del plug-in cy.task() che abbiamo implementato per eseguire più azioni di lettura ed eliminazione con e-mail corrispondenti nelle nostre caselle di posta. Abbiamo creato queste funzioni per reimpostare correttamente lo stato della posta in arrivo dell'utente prima di attivare questi flussi di posta elettronica nelle pagine Web, attendere che le e-mail arrivino nella posta in arrivo e infine seguire i collegamenti per tornare ai loro stati di successo. Riassumiamo di seguito i passaggi chiave per i tuoi test Cypress:

• Elimina tutte le email con una determinata riga dell'oggetto per evitare falsi positivi con cy.task(“teardownMatchingEmails”) .
• Accedi a un utente tramite l'API, quindi esegui una serie di passaggi attraverso l'interfaccia utente per generare quell'e-mail da inviare alla casella di posta elettronica dell'utente.
• Sondaggio per la casella di posta elettronica dell'utente per ricevere l'e-mail con la riga dell'oggetto corrispondente tramite cy.task(“awaitEmailInSquirrelmailInbox”) .
• Leggi il contenuto del corpo dell'e-mail con la riga dell'oggetto corrispondente utilizzando cy.task(“squirrelmailSearchBySubject”) .
• Analizza il collegamento di azione corretto con la libreria cheerio passando la stringa HTML del corpo dell'e-mail e cercando gli elementi con una sintassi simile a jQuery.
• Effettua una richiesta HTTP sui collegamenti e-mail analizzati tramite cy.request(“link”) e segui la risposta di reindirizzamento all'app Web o visita il percorso se i collegamenti corrispondono già al tuo superdominio con cy.visit(“emailLinkToWebApp”) .
• Verifica che si verifichino stati di successo o segui altri passaggi dell'interfaccia utente nella pagina di cui sei proprietario.

Ci auguriamo che questo post del blog ti incoraggi a iniziare a testare a fondo dall'inizio alla fine. Di solito evitavamo di scrivere test E2E con flussi di posta elettronica, ma per fortuna abbiamo trovato un modo con questi test Cypress per risparmiarci molto tempo che avremmo speso per testare manualmente tutto. Abbiamo appreso che è molto più prezioso automatizzare e testare l'intero flusso del percorso felice piuttosto che parti del flusso, a meno che molti passaggi non si basino su servizi di terze parti che non possiedi o controlli o non è possibile ripristinare l'utente su un certo stato in modo affidabile.

Se sei interessato ad altri post del blog relativi a ciò che abbiamo imparato sulla scrittura dei test Cypress per le nostre applicazioni web, dai un'occhiata ai seguenti articoli:

• Cosa considerare quando si scrivono test E2E
• Panoramica di 1.000 piedi sulla scrittura di test di cipresso
• TypeScript Tutte le cose nei tuoi test Cypress
• Idee per configurare, organizzare e consolidare i test Cypress
• Integrazione dei test Cypress con Docker, Buildkite e CICD