Confruntarea cu fluxurile de e-mail în testele Cypress #frontend@twiliosendgrid

Twilio SendGrid trimite o mulțime de e-mailuri. Pentru a trimite toate e-mailurile noastre tranzacționale, de la resetarea parolei la verificarea e-mailului contului și la exportul e-mailurilor CSV, folosim propriile noastre servicii de backend.

Am depășit recent o etapă uriașă de peste 3 trilioane de e-mailuri trimise.

În mediile noastre de testare, trimitem e-mailurile noastre pentru a testa căsuțele de e-mail în serverele Squirrelmail auto-găzduite, pentru a evita trimiterea de e-mailuri de testare către furnizorii de servicii de căsuțe de e-mail efective, cum ar fi Gmail. Multe fluxuri importante impun utilizatorului să își verifice e-mailul, să facă clic pe un link care poate fi acționat, să redirecționeze înapoi la aplicația web și apoi să continue la o pagină de descărcare sau verificare cu succes.

Testăm aceste funcții manual introducând adresele noastre de e-mail Squirrelmail în formularele necesare, făcând clic pe unele butoane și urmând link-uri de e-mail pentru a valida ca lucrurile funcționează conform așteptărilor. Putem face acest lucru de fiecare dată la noile modificări de cod pentru a ne asigura că nu am regresat nicăieri, dar ar fi bine să automatizăm acești pași într-un test end-to-end (E2E) pe care îl putem rula din nou oricând dorim. Mai exact, am dori să scriem teste E2E cu Cypress, așa că nu trebuie să testăm de fiecare dată aceste fluxuri de e-mail potențial lente și confuze manual în propriul nostru browser web.

Înainte de a intra în postare, iată câteva articole pe care ați putea fi interesat să le citiți mai întâi.

• Dacă nu ați scris niciodată teste E2E înainte sau ați dori o informare despre cum să gândiți când scrieți teste E2E, vă recomandăm să vedeți această postare de blog înainte de a începe.
• Dacă nu sunteți familiarizat cu utilizarea Cypress pentru scrierea testelor E2E în general, vă recomandăm insistent să consultați prezentarea noastră de o mie de picioare despre implementarea testelor Cypress pentru aplicațiile dvs. web - acest lucru vă va oferi o idee mai bună despre API-ul Cypress.

Această postare presupune că cunoașteți unele dintre funcțiile Cypress, cum ar fi cy.task() pentru a rula cod arbitrar pe care îl definim într-un server Node pentru a ne ajuta să ne ocupăm de e-mailuri. De asemenea, dacă fragmentele de cod ulterioare cu TypeScript sunt puțin confuze, s-ar putea să clarifice lucrurile să vedeți postarea de blog despre cum am tastat testele noastre Cypress. Puteți modifica codul în propriile teste Cypress, eliminând definițiile tipului și respectând sintaxa numai JavaScript.

Nu vom acoperi cum să vă configurați propriul server de e-mail de testare pentru căsuța de e-mail (cum ar fi Squirrelmail), dar ne vom concentra pe automatizarea acestor pași legați de căutarea de e-mailuri, analizarea conținutului de e-mail care se potrivește și urmărirea linkurilor de e-mail. Acest lucru ar trebui să vă ofere o imagine mai bună a ce fel de funcții să utilizați și să implementați pentru a gestiona aceste fluxuri de e-mail, presupunând că aveți un server de testare a căsuței de e-mail și propriile acreditări la care să vă conectați.

Cum ne descurcăm cu fluxurile de e-mail în testele Cypress?

Pentru ca noi să testăm întregul flux de e-mail, am creat pluginuri cy.task() pentru:

• Ocupați-vă de conectarea și filtrarea prin căsuțele de e-mail pentru e-mailurile cu un anumit subiect
• Preluarea conținutului corpului unui e-mail potrivit
• Ștergerea e-mailurilor din căsuța de e-mail a unui utilizator fără a fi nevoie să vă conectați prin Squirrelmail UI

De asemenea, am urmat această cale deoarece nu deținem sau nu deținem control asupra interfeței de utilizare Squirrelmail și nu este posibil să vizitați mai mult de un superdomeniu într-un test Cypress, deoarece adresele URL pentru interfața de utilizare Squirrelmail trăiesc într-un superdomeniu separat de aplicația noastră frontală implementată. .

Am instalat mai întâi o bibliotecă numită „emailjs-imap-client” pentru a ne ajuta să setăm un client IMAP pentru a se conecta la căsuța noastră Squirrelmail prin intermediul unor acreditări și configurații de gazdă. Folosind această bibliotecă, am încapsulat toate lucrurile legate de Squirrelmail într-un modul numit squirrelmail.ts pe care l-am importat ulterior în plugins/index.ts pentru definițiile funcției noastre cy.task() .

Înainte de a rula testele care implică e-mailuri, ar trebui să dărâmăm toate e-mailurile cu același subiect pentru a evita fals pozitive în referirea accidentală la un e-mail mai vechi declanșat într-un test anterior. Pentru a gestiona acest caz de utilizare, am implementat această sarcină pentru a șterge toate e-mailurile cu un subiect potrivit în căsuța de e-mail a unui utilizator, după cum urmează.

În timpul testelor noastre, declanșăm o acțiune care va duce la trimiterea unui e-mail către adresa de e-mail Squirrelmail a utilizatorului și adesea trebuie să așteptăm ca e-mailul cu un subiect potrivit să ajungă în căsuța de e-mail a utilizatorului. Acest proces durează de la secunde la minute, în funcție de cât de implicate sunt procesele backend. Trebuie să ne asigurăm că interogăm până sosește sau să furnizăm o eroare de timeout în test pentru a ne anunța dacă ceva nu funcționează sau a întârziat în partea de trimitere a e-mailului. Deoarece am șters deja e-mailurile cu linii de subiect potrivite în prealabil, putem fi în mare parte siguri că a fost declanșat din testul nostru dacă revine cu succes.

Iată cum am dezvoltat funcționalitatea de așteptare a unui e-mail cu un anumit subiect, cum ar fi „Exportul activității tale de e-mail” sau „Verificarea expeditorului” să ajungă în căsuța de e-mail a unui utilizator.

Până acum:

• Am șters căsuța de e-mail a utilizatorului
• Testul rulează și declanșează trimiterea unui e-mail în căsuța de e-mail a utilizatorului
• Am așteptat cu succes ca e-mailul să ajungă în căsuța de e-mail a utilizatorului

Acum, trebuie să obținem conținutul corpului acelui e-mail specific.

Din fericire, putem returna conținutul corpului de e-mail potrivit ca un șir pe care mai târziu ar trebui să îl analizăm pentru ca linkul de acțiune să revină la aplicația web pe care o controlăm și o deținem. Pluginul de activitate de mai jos caută prin căsuța de e-mail a unui utilizator un e-mail cu o linie de subiect potrivită și returnează conținutul corpului pentru ca noi să îl folosim mai târziu.

Ca o scurtă reamintire, nu am putea pur și simplu să creăm obiecte de pagină pentru paginile Squirrelmail, să vizităm Squirrelmail prin interfața de utilizare, să filtram pentru o linie de subiect care se potrivește, să deschidem e-mailul, să facem clic direct pe link-ul acționabil și să fim pe drumul nostru vesel înapoi la aplicația noastră web — pentru că nu putem vizita mai multe superdomenii în același test Cypress. De asemenea, este mai mult un antimodel să vizitați pagini și aplicații pe care nu le controlați sau nu le dețineți.

După ce găsim conținutul de e-mail potrivit pe care l-am declanșat în test, trebuie să analizăm conținutul HTML, să găsim linkul de acțiune, să declanșăm o solicitare HTTP către link și apoi să urmăm redirecționarea înapoi la aplicația noastră web.

Pentru a analiza conținutul HTML al e-mailului și a găsi părțile link-urilor de acțiune, am folosit o altă bibliotecă numită „cheerio”, care încarcă șirul HTML și ne permite să apelăm funcții asemănătoare jQuery pentru a extrage butoanele de acțiune sau link-urile de care avem nevoie. După ce am analizat legăturile, facem o solicitare HTTP către link cu cy.request() , urmăm linkul de redirecționare înapoi către aplicația web pe care o controlăm și o deținem pe un singur superdomeniu și continuăm cu verificarea stărilor de succes pe pagina pe care o deținem. redirecționat către.

În cazul dvs., este posibil să nu fie nevoie să declanșați o solicitare HTTP către link și să urmați redirecționarea răspunsului dacă linkul dvs. indică deja locul potrivit. Dacă adresa URL a linkului indică deja direct aplicația dvs. web, nimic nu vă împiedică să extrageți calea linkului și să faceți un cy.visit(linkPath) pentru a redirecționa înapoi la aplicația dvs. În cazul link-urilor Twilio SendGrid, linkurile pot arăta ca „...sendgrid.net?…” dacă aveți urmărirea linkurilor pentru e-mailurile dvs. sau „brandedlink.com” dacă aveți marcarea link-urilor activată. De aceea, ar trebui să facem o solicitare HTTP și să extragem calea de redirecționare pentru a face un cy.visit(redirectPath) , deoarece „href” imediat al link-urilor nu se potrivește cu aplicația noastră web.

Mai jos este un exemplu de găsire a linkului cu cheerio, de a face o solicitare HTTP către link și de a urmări redirecționarea.

Concluzie

V-am prezentat numeroasele funcții de plugin cy.task() pe care le-am implementat pentru a face mai multe acțiuni de citire și ștergere cu e-mailuri potrivite în căsuțele noastre de e-mail. Am creat aceste funcții pentru a reseta corect starea căsuței de e-mail a utilizatorului înainte de a declanșa aceste fluxuri de e-mail în paginile web, pentru a aștepta ca e-mailurile să ajungă în căsuța de e-mail și, în cele din urmă, să urmăm linkurile înapoi la stările lor de succes. Rezumam pașii cheie pentru testele dumneavoastră Cypress mai jos:

• Demontați toate e-mailurile cu un anumit subiect pentru a evita falsele pozitive cu cy.task(“teardownMatchingEmails”) .
• Conectați-vă la un utilizator prin API și apoi parcurgeți un set de pași prin interfața de utilizare pentru a genera acel e-mail care să fie trimis în căsuța de e-mail a utilizatorului.
• Sondaj pentru căsuța de e-mail a utilizatorului pentru a primi e-mailul cu linia de subiect potrivită prin cy.task(“awaitEmailInSquirrelmailInbox”) .
• Citiți conținutul e-mailului cu subiectul potrivit utilizând cy.task(“squirrelmailSearchBySubject”) .
• Analizați linkul de acțiune adecvat cu biblioteca cheerio, trecând șirul HTML al corpului de e-mail și căutând prin elemente cu o sintaxă asemănătoare jQuery.
• Faceți o solicitare HTTP pe linkurile de e-mail analizate prin cy.request(“link”) și urmați răspunsul de redirecționare înapoi la aplicația web sau vizitați calea dacă linkurile se potrivesc deja cu superdomeniul dvs. cu cy.visit(“emailLinkToWebApp”) .
• Verificați apariția stărilor de succes sau urmați cu mai mulți pași de interfață pe pagina pe care o dețineți.

Sperăm că această postare pe blog vă încurajează să începeți să testați temeinic de la început până la sfârșit. Obișnuiam să evităm să scriem teste E2E cu fluxuri de e-mail, dar, din fericire, am găsit o modalitate cu aceste teste Cypress de a ne economisi mult timp pe care l-am fi petrecut testând manual totul. Am învățat că este mult mai valoros să automatizăm și să testam întregul flux al căii fericite, mai degrabă decât părți ale fluxului, cu excepția cazului în care mulți pași se bazează pe servicii terțe pe care nu le dețineți sau nu le controlați sau nu este posibil să resetați utilizatorul la un anumită stare în mod fiabil.

Dacă sunteți interesat de mai multe postări de blog legate de ceea ce am învățat despre scrierea testelor Cypress pentru aplicațiile noastre web, consultați următoarele articole:

• Ce să țineți cont atunci când scrieți teste E2E
• Prezentare generală de 1.000 de picioare despre scrierea testelor de chiparoși
• TypeScript Toate lucrurile din testele tale Cypress
• Idei pentru configurarea, organizarea și consolidarea testelor dvs. de Cypress
• Integrarea testelor Cypress cu Docker, Buildkite și CICD