Menangani Aliran Email dalam Tes Cypress #frontend@twiliosendgrid

Twilio SendGrid mengirim banyak email. Untuk mengirim semua email transaksi kami—mulai dari pengaturan ulang kata sandi hingga verifikasi email akun hingga ekspor email CSV—kami menggunakan layanan backend kami sendiri.

Kami baru-baru ini melewati tonggak sejarah besar dengan lebih dari 3 triliun email terkirim.

Dalam lingkungan pengujian kami, kami mengirim email kami untuk menguji kotak masuk email di server Squirrelmail yang dihosting sendiri untuk menghindari pengiriman email pengujian ke penyedia layanan kotak masuk email yang sebenarnya seperti Gmail. Banyak alur penting yang mengharuskan pengguna untuk memeriksa email mereka, mengeklik tautan yang dapat ditindaklanjuti, mengarahkan kembali ke aplikasi web, dan kemudian melanjutkan di beberapa halaman keberhasilan unduhan atau verifikasi.

Kami menguji fitur-fitur ini secara manual dengan memasukkan alamat email Squirrelmail kami di formulir yang diperlukan, mengklik beberapa tombol, dan mengikuti tautan email untuk memvalidasi semuanya berfungsi seperti yang diharapkan. Kita dapat melakukan ini setiap kali ada perubahan kode baru untuk memastikan kita tidak mengalami regresi di mana pun, tetapi alangkah baiknya jika langkah-langkah ini diotomatiskan dalam pengujian end-to-end (E2E) yang dapat kita jalankan lagi kapan pun kita mau. Secara khusus, kami ingin menulis tes E2E dengan Cypress, jadi kami tidak perlu menguji aliran email yang berpotensi lambat dan membingungkan ini secara manual di browser web kami sendiri setiap saat.

Sebelum kita masuk ke posting, berikut adalah beberapa artikel yang mungkin menarik untuk Anda baca terlebih dahulu.

• Jika Anda belum pernah menulis tes E2E sebelumnya atau ingin penyegaran tentang cara berpikir saat menulis tes E2E, Anda mungkin ingin melihat posting blog ini sebelum kita mulai.
• Jika Anda tidak terbiasa menggunakan Cypress untuk menulis pengujian E2E secara umum, kami sangat menyarankan Anda memeriksa ikhtisar seribu kaki kami tentang penerapan pengujian Cypress untuk aplikasi web Anda—ini akan memberi Anda gambaran yang lebih baik tentang Cypress API.

Posting ini mengasumsikan Anda mengetahui beberapa fungsi Cypress seperti cy.task() untuk menjalankan kode arbitrer yang kami definisikan di server Node untuk membantu kami menangani email. Juga, jika potongan kode selanjutnya dengan TypeScript agak membingungkan, mungkin akan memperjelas posting blog kami tentang bagaimana kami mengetik tes Cypress kami. Anda masih dapat memodifikasi kode dalam pengujian Cypress Anda sendiri dengan menghapus definisi tipe dan tetap menggunakan sintaks khusus JavaScript.

Kami tidak akan membahas cara mengatur server kotak masuk email percobaan Anda sendiri (seperti Squirrelmail), tetapi kami akan fokus pada mengotomatiskan langkah-langkah ini terkait dengan mencari email, menguraikan konten email yang cocok, dan mengikuti tautan email. Ini akan memberi Anda gambaran yang lebih baik tentang jenis fungsi apa yang digunakan dan diterapkan untuk menangani aliran email ini, dengan asumsi Anda memiliki server kotak masuk email uji dan kredensial Anda sendiri untuk terhubung.

Bagaimana kita menangani aliran email dalam pengujian Cypress?

Agar kami dapat menguji seluruh alur email, kami membuat plugin cy.task() untuk:

• Berurusan dengan menghubungkan dan memfilter melalui kotak masuk email untuk email dengan baris subjek tertentu
• Mengambil isi isi email yang cocok
• Menghapus email dari kotak masuk pengguna tanpa harus masuk melalui UI Squirrelmail

Kami juga menempuh rute ini karena kami tidak memiliki atau memiliki kendali atas UI Squirrelmail, dan tidak mungkin mengunjungi lebih dari satu superdomain dalam pengujian Cypress karena URL untuk UI Squirrelmail berada di superdomain terpisah dari aplikasi frontend yang kami terapkan .

Kami pertama kali menginstal perpustakaan yang disebut "emailjs-imap-client" untuk membantu kami menyiapkan klien IMAP untuk terhubung ke kotak masuk Squirrelmail kami melalui beberapa kredensial dan konfigurasi host. Dengan menggunakan pustaka ini, kami merangkum semua hal terkait Squirrelmail di dalam modul bernama squirrelmail.ts yang nantinya akan kami impor di plugins/index.ts kami untuk definisi fungsi cy.task() kami.

Sebelum pengujian yang melibatkan email dijalankan, kami harus menghapus semua email dengan baris subjek yang sama untuk menghindari kesalahan positif yang secara tidak sengaja merujuk ke email lama yang dipicu pada pengujian sebelumnya. Untuk menangani kasus penggunaan ini, kami menerapkan tugas ini untuk menghapus semua email dengan baris subjek yang cocok di kotak masuk pengguna sebagai berikut.

Selama pengujian kami, kami memicu tindakan yang akan menyebabkan email dikirim ke alamat email Squirrelmail pengguna dan sering kali harus menunggu email dengan baris subjek yang cocok tiba di kotak masuk email pengguna. Proses ini memakan waktu mulai dari detik hingga menit, tergantung seberapa terlibat proses backend. Kami perlu memastikan untuk polling sampai tiba atau memberikan kesalahan batas waktu dalam pengujian untuk memberi tahu kami jika ada sesuatu yang tidak berfungsi atau tertunda di bagian pengiriman surat. Karena kami telah menghapus email dengan baris subjek yang cocok sebelumnya, sebagian besar kami dapat yakin bahwa itu dipicu dari uji coba kami jika berhasil kembali.

Berikut adalah cara kami mengembangkan fungsionalitas untuk menunggu email dengan baris subjek tertentu seperti "Ekspor aktivitas email Anda" atau "Verifikasi pengirim" untuk tiba di kotak masuk email pengguna.

Sangat jauh:

• Kami menghapus kotak masuk email pengguna
• Tes berjalan dan memicu email untuk dikirim ke kotak masuk email pengguna
• Kami berhasil menunggu email masuk ke inbox email pengguna

Sekarang, kita perlu mendapatkan isi isi email tertentu.

Untungnya, kami dapat mengembalikan konten isi email yang cocok sebagai string yang nantinya harus kami uraikan agar tautan tindakan kembali ke aplikasi web yang kami kontrol dan miliki. Plugin tugas di bawah mencari melalui kotak masuk pengguna untuk email dengan baris subjek yang cocok dan mengembalikan konten isi untuk kita gunakan nanti.

Sebagai pengingat singkat, kami tidak bisa begitu saja membuat objek halaman untuk halaman Squirrelmail, mengunjungi Squirrelmail melalui UI, memfilter baris subjek yang cocok, membuka email, mengklik tautan yang dapat ditindaklanjuti secara langsung, dan kembali ke aplikasi web kami—karena kami tidak dapat mengunjungi beberapa superdomain dalam pengujian Cypress yang sama. Ini juga lebih merupakan antipola untuk mengunjungi halaman dan aplikasi yang tidak Anda kendalikan atau miliki.

Setelah menemukan isi badan email yang cocok yang kami picu dalam pengujian, kami harus menguraikan konten HTML, menemukan tautan tindakan, memicu permintaan HTTP ke tautan, dan kemudian mengikuti pengalihan kembali ke aplikasi web kami.

Untuk menguraikan isi HTML email dan menemukan bagian tautan tindakan, kami menggunakan pustaka lain yang disebut "cheerio", yang memuat string HTML dan memungkinkan kami memanggil fungsi mirip jQuery untuk mengekstrak tombol tindakan atau tautan yang kami butuhkan. Setelah kami menguraikan tautan, kami membuat permintaan HTTP ke tautan dengan cy.request() , ikuti tautan pengalihan kembali ke aplikasi web yang kami kendalikan dan miliki di satu superdomain, dan lanjutkan dengan memverifikasi status sukses pada halaman yang kami diarahkan ke.

Dalam kasus Anda, Anda mungkin tidak perlu memicu permintaan HTTP ke tautan dan mengikuti pengalihan respons jika tautan Anda sudah mengarah ke tempat yang tepat. Jika URL tautan sudah mengarah ke aplikasi web Anda secara langsung, tidak ada yang menghentikan Anda untuk mengekstrak jalur tautan dan melakukan cy.visit(linkPath) untuk mengarahkan kembali ke aplikasi Anda. Dalam kasus tautan Twilio SendGrid, tautan tersebut mungkin terlihat seperti “…sendgrid.net?…” jika Anda memiliki pelacakan tautan untuk email Anda atau “brandedlink.com” jika Anda memiliki branding tautan. Itulah mengapa kita perlu membuat permintaan HTTP dan mengekstrak jalur pengalihan untuk melakukan cy.visit(redirectPath) karena "href" langsung dari tautan tidak cocok dengan aplikasi web kita.

Di bawah ini adalah contoh menemukan tautan dengan cheerio, membuat permintaan HTTP ke tautan, dan mengikuti pengalihan.

Kesimpulan

Kami memandu Anda melalui banyak fungsi plugin cy.task() yang kami terapkan untuk melakukan lebih banyak tindakan membaca dan menghapus dengan email yang cocok di kotak masuk kami. Kami membuat fungsi ini untuk menyetel ulang status kotak masuk email pengguna dengan benar sebelum kami memicu aliran email ini di halaman web, menunggu email masuk ke kotak masuk, dan terakhir mengikuti tautan kembali ke status suksesnya. Kami merangkum langkah-langkah kunci untuk pengujian Cypress Anda di bawah ini:

• Hancurkan semua email dengan baris subjek tertentu untuk menghindari kesalahan positif dengan cy.task(“teardownMatchingEmails”) .
• Masuk ke pengguna melalui API dan kemudian kerjakan serangkaian langkah melalui UI untuk menghasilkan email yang akan dikirim ke kotak masuk email pengguna.
• Jajak pendapat untuk kotak masuk email pengguna untuk menerima email dengan baris subjek yang cocok melalui cy.task(“awaitEmailInSquirrelmailInbox”) .
• Baca isi isi email dengan baris subjek yang cocok menggunakan cy.task(“squirrelmailSearchBySubject”) .
• Parsing tautan tindakan yang tepat dengan pustaka cheerio dengan meneruskan string HTML badan email dan menelusuri elemen dengan sintaks seperti jQuery.
• Buat permintaan HTTP pada tautan email yang diuraikan melalui cy.request(“link”) dan ikuti respons pengalihan kembali ke aplikasi web atau kunjungi jalur jika tautan sudah cocok dengan superdomain Anda dengan cy.visit(“emailLinkToWebApp”) .
• Verifikasi status keberhasilan terjadi atau tindak lanjuti dengan lebih banyak langkah UI di halaman yang Anda miliki.

Kami berharap posting blog ini mendorong Anda untuk memulai pengujian secara menyeluruh dari awal hingga akhir. Kami dulu menghindari menulis tes E2E dengan aliran email, tetapi untungnya, kami menemukan cara dengan tes Cypress ini untuk menghemat banyak waktu yang akan kami habiskan dalam pengujian regresi manual semuanya. Kami belajar bahwa jauh lebih berharga untuk mengotomatisasi dan menguji seluruh alur jalur bahagia daripada sebagian alur—kecuali banyak langkah bergantung pada layanan pihak ketiga yang tidak Anda miliki atau kendalikan atau tidak mungkin untuk menyetel ulang pengguna kembali ke negara tertentu dengan andal.

Jika Anda tertarik dengan lebih banyak posting blog terkait dengan apa yang kami pelajari tentang menulis tes Cypress untuk aplikasi web kami, lihat artikel berikut:

• Apa yang Harus Dipertimbangkan Saat Menulis Tes E2E
• 1.000 Kaki Ikhtisar Menulis Tes Cypress
• TypeScript Semua Hal dalam Tes Cypress Anda
• Ide untuk Mengonfigurasi, Mengatur, dan Mengonsolidasikan Tes Cypress Anda
• Mengintegrasikan Pengujian Cypress Dengan Docker, Buildkite, dan CICD