Radzenie sobie z przepływami poczty e-mail w testach cyprysowych #frontend@twiliosendgrid

Twilio SendGrid wysyła wiele wiadomości e-mail. Aby wysyłać wszystkie nasze e-maile dotyczące transakcji — od resetowania hasła po weryfikację adresu e-mail konta i eksportowanie wiadomości e-mail w formacie CSV — korzystamy z naszych własnych usług zaplecza.

Niedawno przeszliśmy ogromny kamień milowy w postaci ponad 3 bilionów wysłanych e-maili.

W naszych środowiskach testowych wysyłamy nasze e-maile w celu przetestowania skrzynek pocztowych na samoobsługowych serwerach Squirrelmail , aby uniknąć wysyłania testowych wiadomości e-mail do rzeczywistych dostawców usług poczty e-mail, takich jak Gmail. Wiele ważnych przepływów wymaga od użytkownika sprawdzenia poczty e-mail, kliknięcia linku umożliwiającego działanie, przekierowania z powrotem do aplikacji internetowej, a następnie kontynuowania na jakiejś stronie powodzenia pobierania lub weryfikacji.

Testujemy te funkcje ręcznie, wpisując nasze adresy e-mail Squirrelmail w niezbędnych formularzach, klikając niektóre przyciski i klikając łącza e-mail, aby sprawdzić, czy wszystko działa zgodnie z oczekiwaniami. Możemy to zrobić za każdym razem po wprowadzeniu nowych zmian w kodzie, aby upewnić się, że nigdzie się nie cofamy, ale byłoby miło zautomatyzować te kroki w teście end-to-end (E2E), który możemy uruchomić ponownie, kiedy tylko zechcemy. W szczególności chcielibyśmy pisać testy E2E za pomocą Cypress, dzięki czemu nie musimy za każdym razem ręcznie testować tych potencjalnie powolnych i mylących przepływów poczty e-mail w naszej własnej przeglądarce internetowej.

Zanim przejdziemy do postu, oto kilka artykułów, które możesz najpierw przeczytać.

• Jeśli nigdy wcześniej nie pisałeś testów E2E lub chciałbyś przypomnieć sobie, jak myśleć podczas pisania testów E2E, możesz chcieć zapoznać się z tym wpisem na blogu, zanim zaczniemy.
• Jeśli nie jesteś zaznajomiony z używaniem Cypress do pisania testów E2E w ogóle, zdecydowanie zalecamy zapoznanie się z naszym trzymetrowym przeglądem implementacji testów Cypress w aplikacjach internetowych — dzięki temu uzyskasz lepsze pojęcie o Cypress API.

Ten post zakłada, że ​​znasz niektóre funkcje Cypress, takie jak cy.task() do uruchamiania dowolnego kodu, który definiujemy na serwerze Node, aby pomóc nam w radzeniu sobie z e-mailami. Ponadto, jeśli późniejsze fragmenty kodu z TypeScript są nieco mylące, może to wyjaśnić, aby zobaczyć nasz wpis na blogu o tym, jak pisaliśmy nasze testy Cypress. Nadal możesz modyfikować kod we własnych testach Cypress, usuwając definicje typów i trzymając się składni tylko JavaScript.

Nie będziemy omawiać, jak skonfigurować własny testowy serwer skrzynki odbiorczej poczty e-mail (np. Squirrelmail), ale skupimy się na zautomatyzowaniu tych kroków związanych z wyszukiwaniem wiadomości e-mail, analizowaniem pasującej treści wiadomości e-mail i śledzeniem linków do wiadomości e-mail. Powinno to dać lepszy obraz tego, jakiego rodzaju funkcji należy użyć i zaimplementować do obsługi tych przepływów poczty e-mail, zakładając, że masz serwer testowej skrzynki odbiorczej i własne dane uwierzytelniające, z którymi możesz się połączyć.

Jak radzimy sobie z przepływami e-maili w testach Cypress?

Abyśmy mogli przetestować cały przepływ wiadomości e-mail, stworzyliśmy wtyczki cy.task() , aby:

• Zajmować się łączeniem i filtrowaniem skrzynek e-mail dla wiadomości e-mail z określonym tematem
• Pobieranie zawartości pasującej wiadomości e-mail
• Usuwanie wiadomości e-mail ze skrzynki odbiorczej użytkownika bez konieczności logowania się przez interfejs użytkownika Squirrelmail

Poszliśmy również tą drogą, ponieważ nie posiadamy ani nie mamy kontroli nad interfejsem użytkownika Squirrelmail i nie jest możliwe odwiedzenie więcej niż jednej superdomeny w teście Cypress, ponieważ adresy URL interfejsu użytkownika Squirrelmail znajdują się w oddzielnej superdomenie niż nasza wdrożona aplikacja frontendowa .

Najpierw zainstalowaliśmy bibliotekę o nazwie „emailjs-imap-client” , aby pomóc nam skonfigurować klienta IMAP do łączenia się z naszą skrzynką odbiorczą Squirrelmail za pomocą niektórych danych logowania i konfiguracji hosta. Korzystając z tej biblioteki, zamknęliśmy wszystkie rzeczy związane z Squirrelmail w module o nazwie squirrelmail.ts , który później zaimportujemy do naszych plugins/index.ts dla definicji funkcji cy.task() .

Przed uruchomieniem testów obejmujących wiadomości e-mail powinniśmy usunąć wszystkie wiadomości e-mail z tym samym tematem, aby uniknąć fałszywych trafień w przypadku przypadkowego odniesienia się do starszej wiadomości e-mail wyzwolonej w poprzednim teście. Aby poradzić sobie z tym przypadkiem użycia, wdrożyliśmy to zadanie, aby usunąć wszystkie e-maile z pasującym wierszem tematu w skrzynce odbiorczej użytkownika w następujący sposób.

Podczas naszych testów uruchamiamy akcję, która prowadzi do wysłania wiadomości e-mail na adres e-mail użytkownika Squirrelmail i często musimy czekać na wiadomość e-mail z pasującym tematem, która dotrze do skrzynki odbiorczej użytkownika. Ten proces trwa od sekund do minut, w zależności od zaangażowania procesów zaplecza. Musimy upewnić się, że sonda dotrze do nadejścia lub podać błąd limitu czasu w teście, aby poinformować nas, że coś nie działa lub jest opóźnione w części wysyłania poczty. Ponieważ już wcześniej usunęliśmy wiadomości e-mail z pasującymi wierszami tematu, możemy być prawie pewni, że zostały one wywołane podczas naszego testu, jeśli zwrócą pomyślnie.

Oto jak opracowaliśmy funkcję oczekiwania na wiadomość e-mail z określonym wierszem tematu, takim jak „Eksport Twojej aktywności w wiadomościach e-mail” lub „Weryfikacja nadawcy”, która dotrze do skrzynki odbiorczej użytkownika.

Dotychczas:

• Wyczyściliśmy skrzynkę e-mail użytkownika
• Test uruchamia się i uruchamia wiadomość e-mail do wysłania na skrzynkę e-mail użytkownika
• Pomyślnie zaczekaliśmy, aż e-mail dotrze do skrzynki odbiorczej użytkownika

Teraz musimy uzyskać zawartość treści tego konkretnego e-maila.

Na szczęście możemy zwrócić zawartość treści pasującej wiadomości e-mail jako ciąg, który będziemy musieli później przeanalizować, aby łącze akcji powróciło do kontrolowanej i posiadanej przez nas aplikacji internetowej. Poniższa wtyczka zadania przeszukuje skrzynkę odbiorczą użytkownika w poszukiwaniu wiadomości e-mail z pasującym tematem i zwraca zawartość treści do późniejszego wykorzystania.

Krótko mówiąc, nie mogliśmy po prostu utworzyć obiektów stron dla stron Squirrelmail, odwiedzić Squirrelmail za pośrednictwem interfejsu użytkownika, przefiltrować pasujący wiersz tematu, otworzyć wiadomość e-mail, kliknąć bezpośrednio link do działania i być w naszej wesołej drodze powrotnej do naszą aplikację internetową — ponieważ nie możemy odwiedzić wielu superdomen w tym samym teście Cypress. Odwiedzanie stron i aplikacji, których nie kontrolujesz lub których nie posiadasz, jest również bardziej antywzorcem.

Po znalezieniu pasującej treści wiadomości e-mail, którą wywołaliśmy w teście, musimy przeanalizować zawartość HTML, znaleźć łącze akcji, wywołać żądanie HTTP do łącza, a następnie wykonać przekierowanie z powrotem do naszej aplikacji internetowej.

Do analizowania zawartości HTML wiadomości e-mail i znajdowania części linków do akcji wykorzystaliśmy inną bibliotekę o nazwie „cheerio”, która ładuje ciąg HTML i pozwala nam wywoływać funkcje podobne do jQuery w celu wyodrębnienia przycisków akcji lub linków, których potrzebujemy. Po przeanalizowaniu linków wykonujemy żądanie HTTP do linku za pomocą cy.request() , podążamy za linkiem przekierowującym z powrotem do aplikacji internetowej, którą kontrolujemy i jesteśmy właścicielami jednej superdomeny, i kontynuujemy weryfikację stanów sukcesu na stronie, którą przekierowany do.

W Twoim przypadku może nie być konieczne uruchamianie żądania HTTP do linku i podążanie za przekierowaniem odpowiedzi, jeśli Twój link wskazuje już na właściwe miejsce. Jeśli adres URL linku wskazuje już bezpośrednio na Twoją aplikację internetową, nic nie stoi na przeszkodzie, aby wyodrębnić ścieżkę linku i wykonać cy.visit(linkPath) , aby przekierować z powrotem do Twojej aplikacji. W przypadku linków Twilio SendGrid linki mogą wyglądać jak „…sendgrid.net?…”, jeśli masz włączone śledzenie linków w swoich e-mailach lub „brandedlink.com”, jeśli masz włączone brandowanie linków. Dlatego musielibyśmy wykonać żądanie HTTP i wyodrębnić ścieżkę przekierowania, aby wykonać cy.visit(redirectPath) , ponieważ bezpośrednie „href” linków nie pasują do naszej aplikacji internetowej.

Poniżej znajduje się przykład znalezienia linku za pomocą cheerio, wykonania żądania HTTP do linku i podążania za przekierowaniem.

Wniosek

Przeprowadziliśmy Cię przez wiele funkcji wtyczek cy.task() , które wdrożyliśmy, aby wykonywać więcej czynności związanych z odczytywaniem i usuwaniem z pasującymi wiadomościami e-mail w naszych skrzynkach odbiorczych. Stworzyliśmy te funkcje, aby prawidłowo zresetować stan skrzynki odbiorczej użytkownika, zanim uruchomimy te przepływy wiadomości e-mail na stronach internetowych, poczekamy na dotarcie wiadomości e-mail do skrzynki odbiorczej, a na koniec klikniemy łącza z powrotem do ich stanów sukcesu. Poniżej podsumowujemy kluczowe etapy testów Cyprysa:

• Pozbądź się wszystkich e-maili z określonym tematem, aby uniknąć fałszywych trafień za pomocą cy.task(“teardownMatchingEmails”) .
• Zaloguj się do użytkownika za pomocą interfejsu API, a następnie wykonaj zestaw kroków w interfejsie użytkownika, aby wygenerować wiadomość e-mail, która zostanie wysłana do skrzynki odbiorczej użytkownika.
• Odszukaj skrzynkę e-mail użytkownika, aby otrzymać wiadomość e-mail z pasującym tematem za pośrednictwem cy.task(“awaitEmailInSquirrelmailInbox”) .
• Przeczytaj treść wiadomości e-mail z pasującym wierszem tematu, używając cy.task(“squirrelmailSearchBySubject”) .
• Przeanalizuj odpowiedni link akcji za pomocą biblioteki cheerio, przekazując ciąg HTML treści wiadomości e-mail i przeszukując elementy za pomocą składni podobnej do jQuery.
• Wykonaj żądanie HTTP na przeanalizowanych linkach e-mail za pomocą cy.request(“link”) i podążaj za odpowiedzią przekierowania z powrotem do aplikacji internetowej lub odwiedź ścieżkę, jeśli linki już pasują do Twojej superdomeny za pomocą cy.visit(“emailLinkToWebApp”) .
• Sprawdź, czy występują stany powodzenia lub wykonaj więcej kroków w interfejsie użytkownika na stronie, której jesteś właścicielem.

Mamy nadzieję, że ten post na blogu zachęci Cię do rozpoczęcia dokładnych testów od początku do końca. Kiedyś unikaliśmy pisania testów E2E z przepływami wiadomości e-mail, ale na szczęście wymyśliliśmy sposób z tymi testami Cypress, aby zaoszczędzić nam dużo czasu, który spędzilibyśmy na ręcznym testowaniu regresji wszystkiego. Dowiedzieliśmy się, że o wiele bardziej wartościowe jest zautomatyzowanie i przetestowanie całego przepływu szczęśliwej ścieżki niż jego części — chyba że wiele kroków opiera się na usługach stron trzecich, których nie jesteś właścicielem lub których nie kontrolujesz, lub nie jest możliwe zresetowanie użytkownika z powrotem do pewien stan niezawodnie.

Jeśli interesują Cię wpisy na blogu związane z tym, czego dowiedzieliśmy się o pisaniu testów Cypress dla naszych aplikacji internetowych, zapoznaj się z następującymi artykułami:

• Co wziąć pod uwagę podczas pisania testów E2E
• 1000 stóp Przegląd pisania testów na cyprys
• TypeScript Wszystkie rzeczy w twoich testach cyprysowych
• Pomysły na konfigurację, organizację i konsolidację testów cyprysowych
• Integracja testów Cypress z Docker, Buildkite i CICD