Cypress Testlerinde E-posta Akışlarıyla Başa Çıkmak #frontend@twiliosendgrid

Twilio SendGrid çok sayıda e-posta gönderir. Parola sıfırlamadan hesap e-posta doğrulamasına ve CSV e-postalarını dışa aktarmaya kadar tüm işlem e-postalarımızı göndermek için kendi arka uç hizmetlerimizi kullanıyoruz.

Kısa bir süre önce gönderilen 3 trilyondan fazla e-postadan oluşan büyük bir dönüm noktasını geçtik.

Test ortamlarımızda, Gmail gibi gerçek e-posta gelen kutusu servis sağlayıcılarına test e-postaları göndermekten kaçınmak için e- postalarımızı, kendi kendine barındırılan Squirrelmail sunucularındaki e-posta gelen kutularını test etmek için göndeririz. Birçok önemli akış, kullanıcının e-postasını kontrol etmesini, işlem yapılabilir bir bağlantıya tıklamasını, web uygulamasına yeniden yönlendirmesini ve ardından bazı indirme veya doğrulama başarı sayfalarında ilerlemeye devam etmesini gerektirir.

Squirrelmail e-posta adreslerimizi gerekli formlara girerek, bazı düğmelere tıklayarak ve işlerin beklendiği gibi çalıştığını doğrulamak için e-posta bağlantılarını izleyerek bu özellikleri manuel olarak test ederiz. Bunu, herhangi bir yerde gerilemediğimizden emin olmak için her yeni kod değişikliğinde yapabiliriz, ancak bu adımları, istediğimiz zaman tekrar çalıştırabileceğimiz uçtan uca (E2E) bir testte otomatikleştirmek güzel olurdu. Spesifik olarak, Cypress ile E2E testleri yazmak istiyoruz, bu nedenle bu potansiyel olarak yavaş ve kafa karıştırıcı e-posta akışlarını her seferinde kendi web tarayıcımızda manuel olarak test etmek zorunda değiliz.

Yazıya girmeden önce, burada ilk önce okumak isteyebileceğiniz birkaç makale var.

• Daha önce hiç E2E testi yazmadıysanız veya E2E testleri yazarken nasıl düşünmeniz gerektiği konusunda bilgi tazelemek istiyorsanız, başlamadan önce bu blog gönderisini görmek isteyebilirsiniz.
• Genel olarak E2E testleri yazmak için Cypress'i kullanmaya aşina değilseniz, web uygulamalarınız için Cypress testlerinin uygulanmasıyla ilgili bin fitlik genel bakışımıza göz atmanızı şiddetle tavsiye ederiz; bu size Cypress API hakkında daha iyi bir fikir verecektir.

Bu gönderi, e-postalarla uğraşırken bize yardımcı olması için bir Düğüm sunucusunda tanımladığımız keyfi kodu çalıştırmak için cy.task() gibi bazı Cypress işlevlerini bildiğinizi varsayar. Ayrıca, TypeScript ile sonraki kod parçacıkları biraz kafa karıştırıcıysa, Cypress testlerimizi nasıl yazdığımızla ilgili blog yazımızı görmek bazı şeyleri netleştirebilir. Tür tanımlarını kaldırarak ve yalnızca JavaScript sözdizimine bağlı kalarak kodu kendi Cypress testlerinizde değiştirebilirsiniz.

Kendi test e-posta gelen kutusu sunucunuzu (Squirrelmail gibi) nasıl kuracağınızı ele almayacağız, ancak e-posta arama, eşleşen e-posta içeriklerini ayrıştırma ve e-posta bağlantılarını takip etme ile ilgili bu adımları otomatikleştirmeye odaklanacağız. Bu, bir test e-posta gelen kutusu sunucunuz ve bağlanmak için kendi kimlik bilgileriniz olduğunu varsayarsak, bu e-posta akışlarını işlemek için ne tür işlevlerin kullanılacağına ve uygulanacağına dair daha iyi bir resim sağlamalıdır.

Cypress testlerinde e-posta akışlarıyla nasıl başa çıkıyoruz?

Tüm e-posta akışlarını test edebilmemiz için cy.task() eklentilerini şu amaçlarla oluşturduk:

• Belirli bir konu satırına sahip e-postalar için e-posta gelen kutularına bağlanma ve filtreleme ile ilgilenin
• Eşleşen bir e-postanın gövde içeriğini alma
• Squirrelmail UI aracılığıyla oturum açmak zorunda kalmadan bir kullanıcının gelen kutusundan e-postaları silme

Ayrıca, Squirrelmail UI'nin sahibi olmadığımız veya üzerinde kontrolümüz olmadığı için bu yola gittik ve Squirrelmail UI'nin URL'leri, konuşlandırılmış ön uç uygulamamızdan ayrı bir süper etki alanında yaşadığı için bir Cypress testinde birden fazla süper etki alanını ziyaret etmek mümkün değil. .

Bazı kimlik bilgileri ve ana bilgisayar yapılandırmaları aracılığıyla Squirrelmail gelen kutumuza bağlanmak için bir IMAP istemcisi kurmamıza yardımcı olması için önce "emailjs-imap-client" adlı bir kitaplık kurduk . Bu kitaplığı kullanarak, Squirrelmail ile ilgili tüm şeyleri, daha sonra cy.task() fonksiyon tanımlarımız için plugins/index.ts squirrelmail.ts adlı bir modül içine yerleştirdik.

E-postaları içeren testler çalıştırılmadan önce, bir önceki testte tetiklenen eski bir e-postaya yanlışlıkla atıfta bulunarak yanlış pozitiflerden kaçınmak için aynı konu satırına sahip tüm e-postaları yırtmalıyız. Bu kullanım durumunu ele almak için, bir kullanıcının gelen kutusunda eşleşen bir konu satırına sahip tüm e-postaları aşağıdaki gibi silmek için bu görevi uyguladık.

Testlerimiz sırasında, kullanıcının Squirrelmail e-posta adresine bir e-posta gönderilmesine yol açacak ve genellikle eşleşen konu satırına sahip e-postanın kullanıcının e-posta gelen kutusuna ulaşmasını beklememiz gereken bir eylemi tetikleriz. Bu işlem, arka uç işlemlerinin ne kadar dahil olduğuna bağlı olarak saniyelerden dakikalara kadar sürer. Posta gönderme bölümünde bir şeyin çalışmadığını veya gecikmediğini bize bildirmek için gelene kadar anket yaptığımızdan veya testte bir zaman aşımı hatası sağladığımızdan emin olmamız gerekiyor. Eşleşen konu satırlarına sahip e-postaları önceden sildiğimiz için, başarılı bir şekilde geri dönerse, test çalıştırmamızdan tetiklendiğinden çoğunlukla emin olabiliriz.

"E-posta etkinliği dışa aktarmanız" veya "Gönderen doğrulaması" gibi belirli bir konu satırına sahip bir e-postanın bir kullanıcının e-posta gelen kutusuna ulaşmasını bekleme işlevini burada nasıl geliştirdik.

Şimdiye kadar:

• Kullanıcının e-posta gelen kutusunu temizledik
• Test, kullanıcının e-posta gelen kutusuna gönderilecek bir e-postayı çalıştırır ve tetikler.
• E-postanın kullanıcının e-posta gelen kutusuna ulaşmasını başarıyla bekledik

Şimdi, o belirli e-postanın gövde içeriğini almamız gerekiyor.

Neyse ki, eşleşen e-postanın gövde içeriğini, daha sonra eylem bağlantısının kontrol ettiğimiz ve sahip olduğumuz web uygulamasına dönmesi için ayrıştırmamız gereken bir dize olarak döndürebiliriz. Aşağıdaki görev eklentisi, bir kullanıcının gelen kutusunda eşleşen bir konu satırına sahip bir e-posta arar ve daha sonra kullanmamız için gövde içeriğini döndürür.

Kısa bir hatırlatma olarak, Squirrelmail sayfaları için sayfa nesneleri oluşturamaz, UI aracılığıyla Squirrelmail'i ziyaret edemez, eşleşen bir konu satırı için filtre uygulayamaz, e-postayı açamaz, doğrudan eyleme dönüştürülebilir bağlantıya tıklayamaz ve mutlu yolumuza devam edemezdik. web uygulamamız—çünkü aynı Cypress testinde birden fazla süper alanı ziyaret edemiyoruz. Ayrıca, kontrol etmediğiniz veya sahibi olmadığınız sayfaları ve uygulamaları ziyaret etmek daha çok bir antipatterndir.

Testte tetiklediğimiz eşleşen e-posta gövdesi içeriğini bulduktan sonra, HTML içeriğini ayrıştırmalı, eylem bağlantısını bulmalı, bağlantıya bir HTTP isteği tetiklemeli ve ardından web uygulamamıza yönlendirmeyi izlemeliyiz.

E-posta HTML içeriğini ayrıştırmak ve eylem bağlantı parçalarını bulmak için, HTML dizesini yükleyen ve ihtiyacımız olan eylem düğmelerini veya bağlantılarını çıkarmak için jQuery benzeri işlevleri çağırmamıza izin veren “cheerio” adlı başka bir kitaplık kullandık. Bağlantıları ayrıştırdıktan sonra, cy.request() ile bağlantıya bir HTTP isteğinde bulunur, bir süper etki alanında kontrol ettiğimiz ve sahip olduğumuz web uygulamasına geri yönlendirme bağlantısını takip eder ve sayfadaki başarı durumlarını doğrulamaya devam ederiz. için yönlendirildi.

Sizin durumunuzda, bağlantınız zaten doğru yere işaret ediyorsa, bağlantıya bir HTTP isteği başlatmanız ve yanıtın yönlendirmesini izlemeniz gerekmeyebilir. Bağlantı URL'si zaten doğrudan web uygulamanıza işaret ediyorsa, bağlantı yolunu çıkarmanızı ve uygulamanıza geri yönlendirmek için bir cy.visit(linkPath) yapmanızı hiçbir şey engelleyemez. Twilio SendGrid bağlantıları söz konusu olduğunda, bağlantılar, e-postalarınız için bağlantı izleme açıksa “…sendgrid.net?…” veya bağlantı markalama açıksa “brandedlink.com” gibi görünebilir. Bu nedenle, bir cy.visit(redirectPath) yapmak için bir HTTP isteğinde bulunmamız ve yönlendirme yolunu çıkarmamız gerekir, çünkü bağlantıların anında "href"i web uygulamamızla eşleşmez.

Aşağıda, Cheerio ile bağlantıyı bulma, bağlantıya HTTP isteğinde bulunma ve yönlendirmeyi takip etme örneği verilmiştir.

Çözüm

Gelen kutularımızdaki eşleşen e-postalarla daha fazla okuma ve silme işlemi yapmak için uyguladığımız birçok cy.task() eklenti işlevinde size yol gösterdik. Bu işlevleri, web sayfalarında bu e-posta akışlarını tetiklemeden önce kullanıcının e-posta gelen kutusu durumunu düzgün bir şekilde sıfırlamak, e-postaların gelen kutusuna ulaşmasını beklemek ve son olarak başarı durumlarına giden bağlantıları takip etmek için oluşturduk. Cypress testleriniz için temel adımları aşağıda özetliyoruz:

• cy.task(“teardownMatchingEmails”) ile yanlış pozitiflerden kaçınmak için belirli bir konu satırına sahip tüm e-postaları yırtın.
• API aracılığıyla bir kullanıcıda oturum açın ve ardından kullanıcının e-posta gelen kutusuna gönderilecek e-postayı oluşturmak için kullanıcı arayüzü üzerinden bir dizi adım üzerinden çalışın.
• cy.task(“awaitEmailInSquirrelmailInbox”) aracılığıyla eşleşen konu satırına sahip e-postayı almak için kullanıcının e-posta gelen kutusu için anket yapın.
• E-postanın gövde içeriğini cy.task(“squirrelmailSearchBySubject”) kullanarak eşleşen konu satırıyla okuyun.
• E-posta gövdesi HTML dizesini ileterek ve jQuery benzeri bir sözdizimi ile öğeler arasında arama yaparak Cheerio kitaplığıyla uygun eylem bağlantısını ayrıştırın.
• Ayrıştırılan e-posta bağlantılarında cy.request(“link”) aracılığıyla bir HTTP isteği yapın ve web uygulamasına geri yönlendirme yanıtını izleyin veya bağlantılar zaten cy.visit(“emailLinkToWebApp”) ile süper alanınızla eşleşiyorsa yolu ziyaret edin) cy.visit(“emailLinkToWebApp”) .
• Başarı durumlarının gerçekleştiğini doğrulayın veya sahibi olduğunuz sayfada daha fazla UI adımı izleyin.

Bu blog gönderisinin sizi baştan sona kapsamlı bir şekilde test etmeye teşvik edeceğini umuyoruz. Eskiden e-posta akışlarıyla E2E testleri yazmaktan kaçınırdık, ama neyse ki bu Cypress testleriyle her şeyi manuel olarak regresyon testinde harcayacağımız zamandan tasarruf etmenin bir yolunu bulduk. Birçok adım, sahip olmadığınız veya kontrol etmediğiniz üçüncü taraf hizmetlerine dayanmadıkça veya kullanıcıyı tekrar bir belirli bir durum güvenilir.

Web uygulamalarımız için Cypress testleri yazma hakkında öğrendiklerimizle ilgili daha fazla blog yazısıyla ilgileniyorsanız, aşağıdaki makalelere göz atın:

• E2E Testleri Yazarken Nelere Dikkat Edilmelidir?
• Selvi Testleri Yazmaya 1.000 Ayak Genel Bakış
• TypeScript Cypress Testlerinizdeki Her Şey
• Cypress Testlerinizi Yapılandırma, Düzenleme ve Birleştirme Fikirleri
• Docker, Buildkite ve CICD ile Cypress Testlerini Entegre Etme