التعامل مع تدفقات البريد الإلكتروني في اختبارات Cypress # frontend @ twiliosendgrid

يرسل Twilio SendGrid الكثير من رسائل البريد الإلكتروني. لإرسال جميع رسائل البريد الإلكتروني الخاصة بالمعاملات - بدءًا من إعادة تعيين كلمة المرور إلى التحقق من البريد الإلكتروني للحساب لتصدير رسائل البريد الإلكتروني بتنسيق CSV - نستخدم خدمات الواجهة الخلفية الخاصة بنا.

لقد اجتزنا مؤخرًا إنجازًا ضخمًا بلغ أكثر من 3 تريليونات من رسائل البريد الإلكتروني المرسلة.

في بيئات الاختبار الخاصة بنا ، نرسل رسائل البريد الإلكتروني الخاصة بنا لاختبار صناديق البريد الإلكتروني في خوادم Squirrelmail ذاتية الاستضافة لتجنب إرسال رسائل بريد إلكتروني تجريبية إلى موفري خدمة البريد الإلكتروني الفعلي مثل Gmail. تتطلب العديد من التدفقات الهامة من المستخدم التحقق من بريده الإلكتروني ، والنقر فوق ارتباط قابل للتنفيذ ، وإعادة التوجيه مرة أخرى إلى تطبيق الويب ، ثم المتابعة إلى الأمام في بعض صفحات نجاح التنزيل أو التحقق.

نختبر هذه الميزات يدويًا عن طريق إدخال عناوين البريد الإلكتروني Squirrelmail في النماذج الضرورية ، والنقر فوق بعض الأزرار ، واتباع روابط البريد الإلكتروني للتحقق من عمل الأشياء كما هو متوقع. يمكننا القيام بذلك في كل مرة عند إجراء تغييرات جديدة في التعليمات البرمجية لضمان عدم تراجعنا في أي مكان ، ولكن سيكون من الجيد أتمتة هذه الخطوات في اختبار شامل (E2E) يمكننا تشغيله مرة أخرى متى أردنا ذلك. على وجه التحديد ، نود كتابة اختبارات E2E باستخدام Cypress ، لذلك لا يتعين علينا اختبار تدفقات البريد الإلكتروني التي يحتمل أن تكون بطيئة ومربكة يدويًا في متصفح الويب الخاص بنا في كل مرة.

قبل أن ندخل في المنشور ، إليك مقالتان قد تكون مهتمًا بقراءتهما أولاً.

• إذا لم تكن قد كتبت اختبارات E2E من قبل أو كنت ترغب في تجديد معلوماتك حول كيفية التفكير عند كتابة اختبارات E2E ، فقد ترغب في مشاهدة منشور المدونة هذا قبل أن نبدأ.
• إذا لم تكن معتادًا على استخدام Cypress لكتابة اختبارات E2E بشكل عام ، فإننا نوصيك بشدة بمراجعة نظرة عامة على ألف قدم حول تنفيذ اختبارات Cypress لتطبيقات الويب الخاصة بك - وهذا سيمنحك فكرة أفضل عن Cypress API.

يفترض هذا المنشور أنك تعرف بعض وظائف Cypress مثل cy.task() لتشغيل رمز تعسفي نحدده في خادم Node لمساعدتنا في التعامل مع رسائل البريد الإلكتروني. أيضًا ، إذا كانت مقتطفات التعليمات البرمجية اللاحقة مع TypeScript مربكة بعض الشيء ، فقد يوضح الأمر رؤية منشور المدونة الخاص بنا حول كيفية كتابة اختبارات Cypress الخاصة بنا. لا يزال بإمكانك تعديل الكود في اختبارات Cypress الخاصة بك عن طريق إزالة تعريفات النوع والالتزام ببنية JavaScript فقط.

لن نغطي كيفية إعداد خادم البريد الإلكتروني التجريبي الخاص بك (مثل Squirrelmail) ، لكننا سنركز على أتمتة هذه الخطوات المتعلقة بالبحث عن رسائل البريد الإلكتروني ، وتحليل محتويات البريد الإلكتروني المطابقة ، واتباع روابط البريد الإلكتروني. يجب أن يمنحك هذا صورة أفضل عن نوع الوظائف التي يجب استخدامها وتنفيذها للتعامل مع تدفقات البريد الإلكتروني هذه ، على افتراض أن لديك خادم بريد إلكتروني وارد تجريبي وبيانات اعتماد خاصة بك للاتصال بها.

كيف نتعامل مع تدفقات البريد الإلكتروني في اختبارات Cypress؟

بالنسبة لنا لاختبار تدفقات البريد الإلكتروني بالكامل ، قمنا ببناء ملحقات cy.task() من أجل:

• تعامل مع الاتصال بصناديق البريد الإلكتروني والتصفية من خلالها لرسائل البريد الإلكتروني التي تحتوي على سطر موضوع معين
• استرداد محتويات نص البريد الإلكتروني المطابق
• حذف رسائل البريد الإلكتروني من صندوق الوارد الخاص بالمستخدم دون الحاجة إلى تسجيل الدخول من خلال Squirrelmail UI

لقد سلكنا هذا المسار أيضًا لأننا لا نملك أو نتحكم في Squirrelmail UI ، ولا يمكن زيارة أكثر من نطاق خارق واحد في اختبار Cypress نظرًا لأن عناوين URL لواجهة مستخدم Squirrelmail تعيش في نطاق فائق منفصل عن تطبيق الواجهة الأمامية الذي تم نشره .

قمنا أولاً بتثبيت مكتبة تسمى "emailjs-imap-client" لمساعدتنا في إعداد عميل IMAP للاتصال بصندوق الوارد الخاص بنا من Squirrelmail من خلال بعض بيانات الاعتماد وتكوينات المضيف. باستخدام هذه المكتبة ، قمنا بتغليف جميع الأشياء المتعلقة بـ Squirrelmail داخل وحدة تسمى squirrelmail.ts والتي سنستوردها لاحقًا في plugins/index.ts لتعريفات وظائف cy.task() الخاصة بنا.

قبل إجراء الاختبارات التي تتضمن رسائل بريد إلكتروني ، يجب علينا هدم جميع رسائل البريد الإلكتروني التي تحمل نفس سطر الموضوع لتجنب الإيجابيات الخاطئة في الإشارة بطريق الخطأ إلى بريد إلكتروني قديم تم تشغيله في اختبار سابق. للتعامل مع حالة الاستخدام هذه ، قمنا بتنفيذ هذه المهمة لحذف جميع رسائل البريد الإلكتروني التي تحتوي على سطر موضوع مطابق في صندوق الوارد للمستخدم على النحو التالي.

أثناء اختباراتنا ، نطلق إجراء يؤدي إلى إرسال بريد إلكتروني إلى عنوان البريد الإلكتروني Squirrelmail الخاص بالمستخدم وغالبًا ما نحتاج إلى انتظار وصول البريد الإلكتروني الذي يحتوي على سطر موضوع مطابق إلى صندوق البريد الإلكتروني للمستخدم. تستغرق هذه العملية من ثوانٍ إلى دقائق ، اعتمادًا على مدى مشاركة عمليات الواجهة الخلفية. نحتاج إلى التأكد من إجراء الاستطلاع حتى وصوله أو تقديم خطأ انتهاء المهلة في الاختبار لإعلامنا إذا كان هناك شيء لا يعمل أو يتأخر في جزء إرسال البريد. نظرًا لأننا قمنا بالفعل بحذف رسائل البريد الإلكتروني مع مطابقة سطور الموضوع مسبقًا ، فيمكننا أن نكون على يقين من أنه تم تشغيلها من تشغيلنا التجريبي إذا تم إرجاعها بنجاح.

إليك كيفية تطويرنا لوظيفة انتظار بريد إلكتروني بسطر موضوع محدد مثل "تصدير نشاط البريد الإلكتروني" أو "التحقق من المرسل" للوصول إلى صندوق البريد الإلكتروني للمستخدم.

بعيد جدا:

• مسحنا البريد الوارد للبريد الإلكتروني للمستخدم
• يتم تشغيل الاختبار ويطلق رسالة بريد إلكتروني ليتم إرسالها إلى صندوق البريد الإلكتروني للمستخدم
• لقد انتظرنا بنجاح وصول البريد الإلكتروني إلى صندوق البريد الإلكتروني للمستخدم

الآن ، نحتاج إلى الحصول على محتويات جسم هذا البريد الإلكتروني المحدد.

لحسن الحظ ، يمكننا إرجاع محتويات نص البريد الإلكتروني المطابق كسلسلة سنضطر لاحقًا إلى تحليلها من أجل رابط الإجراء للعودة إلى تطبيق الويب الذي نتحكم فيه ونمتلكه. يبحث المكون الإضافي للمهام أدناه في البريد الوارد للمستخدم عن رسالة بريد إلكتروني مع سطر موضوع مطابق ويعيد محتويات الجسم لنا لاستخدامها لاحقًا.

كتذكير موجز ، لم نتمكن ببساطة من إنشاء كائنات صفحة لصفحات Squirrelmail ، وزيارة Squirrelmail من خلال واجهة المستخدم ، وتصفية سطر الموضوع المطابق ، وفتح البريد الإلكتروني ، والنقر على الرابط القابل للتنفيذ مباشرةً ، والعودة إلى طريق مرح للعودة إلى تطبيق الويب الخاص بنا - لأننا لا نستطيع زيارة نطاقات خارقة متعددة في نفس اختبار Cypress. كما يعد زيارة الصفحات والتطبيقات التي لا تتحكم فيها أو تمتلكها بمثابة وسيلة مضادة.

بعد العثور على محتويات نص البريد الإلكتروني المطابقة التي أطلقناها في الاختبار ، يتعين علينا تحليل محتوى HTML ، والعثور على رابط الإجراء ، وتشغيل طلب HTTP للرابط ، ثم اتباع إعادة التوجيه مرة أخرى إلى تطبيق الويب الخاص بنا.

لتحليل محتويات HTML للبريد الإلكتروني والعثور على أجزاء ارتباط الإجراء ، استخدمنا مكتبة أخرى تسمى "cheerio" ، والتي تقوم بتحميل سلسلة HTML وتسمح لنا باستدعاء وظائف تشبه jQuery لاستخراج أزرار الإجراءات أو الروابط التي نحتاجها. بمجرد تحليل الروابط ، نقوم بتقديم طلب HTTP للرابط باستخدام cy.request() ، ثم نتبع رابط إعادة التوجيه مرة أخرى إلى تطبيق الويب الذي نتحكم فيه ونمتلكه على النطاق الرئيسي الواحد ، ثم نتابع في التحقق من حالات النجاح على الصفحة التي نتحكم فيها. إعادة توجيه إلى.

في حالتك ، قد لا تحتاج إلى تشغيل طلب HTTP للرابط واتباع إعادة توجيه الاستجابة إذا كان الارتباط يشير بالفعل إلى المكان المناسب. إذا كان عنوان URL يشير بالفعل إلى تطبيق الويب الخاص بك مباشرةً ، فلا شيء يمنعك من استخراج مسار الرابط والقيام بـ cy.visit(linkPath) لإعادة التوجيه إلى تطبيقك. في حالة روابط Twilio SendGrid ، قد تبدو الروابط مثل "… sendgrid.net؟ ..." إذا كان لديك تتبع رابط لرسائل البريد الإلكتروني أو "brandedlink.com" إذا كان لديك رابط علامة تجارية. لهذا السبب سنحتاج إلى تقديم طلب HTTP واستخراج مسار إعادة التوجيه للقيام cy.visit(redirectPath) لأن "href" الفوري للروابط لا يتطابق مع تطبيق الويب الخاص بنا.

يوجد أدناه مثال على العثور على الرابط مع cheerio ، وتقديم طلب HTTP للرابط ، واتباع إعادة التوجيه.

خاتمة

لقد قمنا بإرشادك عبر العديد من وظائف المكون الإضافي cy.task() التي قمنا بتنفيذها للقيام بالمزيد من إجراءات القراءة والحذف مع رسائل البريد الإلكتروني المطابقة في صناديق البريد الوارد الخاصة بنا. لقد أنشأنا هذه الوظائف لإعادة تعيين حالة صندوق البريد الإلكتروني للمستخدم بشكل صحيح قبل أن نقوم بتشغيل تدفقات البريد الإلكتروني هذه في صفحات الويب ، وانتظر وصول رسائل البريد الإلكتروني إلى البريد الوارد ، وأخيرًا اتبع الروابط للعودة إلى حالات نجاحها. نلخص الخطوات الرئيسية لاختبارات السرو أدناه:

• قم بتفكيك جميع رسائل البريد الإلكتروني التي تحتوي على سطر موضوع معين لتجنب الإيجابيات الخاطئة باستخدام cy.task(“teardownMatchingEmails”) .
• سجّل الدخول إلى مستخدم من خلال واجهة برمجة التطبيقات ، ثم اعمل من خلال مجموعة من الخطوات من خلال واجهة المستخدم لإنشاء هذا البريد الإلكتروني لإرساله إلى صندوق البريد الإلكتروني للمستخدم.
• استطلع رأي صندوق البريد الإلكتروني الخاص بالمستخدم لتلقي البريد الإلكتروني مع سطر الموضوع المطابق من خلال cy.task(“awaitEmailInSquirrelmailInbox”) .
• اقرأ محتويات نص البريد الإلكتروني مع سطر الموضوع المطابق باستخدام cy.task(“squirrelmailSearchBySubject”) .
• حلل ارتباط الإجراء المناسب بمكتبة cheerio عن طريق تمرير سلسلة HTML الخاصة بجسم البريد الإلكتروني والبحث في العناصر باستخدام بناء جملة يشبه jQuery.
• قم بإجراء طلب HTTP على روابط البريد الإلكتروني الموزعة من خلال cy.request(“link”) واتبع استجابة إعادة التوجيه مرة أخرى إلى تطبيق الويب أو قم بزيارة المسار إذا كانت الروابط تتطابق بالفعل مع نطاقك الفائق مع cy.visit(“emailLinkToWebApp”) .
• تحقق من حدوث حالات النجاح أو تابع بخطوات أكثر لواجهة المستخدم على الصفحة التي تمتلكها.

نأمل أن تشجعك هذه المدونة على بدء الاختبار بدقة من البداية إلى النهاية. اعتدنا تجنب كتابة اختبارات E2E مع تدفقات البريد الإلكتروني ، ولكن لحسن الحظ ، توصلنا إلى طريقة باستخدام اختبارات Cypress هذه لتوفير الكثير من الوقت الذي كنا نقضيه في اختبار الانحدار يدويًا لكل شيء. لقد تعلمنا أنه من المفيد جدًا أتمتة واختبار تدفق المسار السعيد بالكامل بدلاً من أجزاء من التدفق - ما لم تعتمد العديد من الخطوات على خدمات جهات خارجية لا تمتلكها أو تتحكم فيها أو لا يمكن إعادة تعيين المستخدم إلى دولة معينة بشكل موثوق.

إذا كنت مهتمًا بمزيد من منشورات المدونة المتعلقة بما تعلمناه عن كتابة اختبارات Cypress لتطبيقات الويب الخاصة بنا ، فراجع المقالات التالية:

• ما يجب مراعاته عند كتابة اختبارات E2E
• نظرة عامة على 1000 قدم لكتابة اختبارات السرو
• TypeScript كل الأشياء في اختبارات السرو الخاصة بك
• أفكار لتكوين وتنظيم وتوحيد اختبارات السرو الخاصة بك
• دمج اختبارات السرو مع Docker و Buildkite و CICD