كيفية رفع مستوى اختبار السرو الخاص بك

في انتظار طلبات الشبكة ، والأوامر المخصصة ، وسجلات وحدة التحكم في الأنابيب إلى إخراج المحطة الطرفية ، واختبارات الفشل عندما يكون هناك خطأ في وحدة التحكم

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

سنستعرض خمس تقنيات

  1. استخدم مكتبة اختبار السرو
  2. انتظر صراحة لطلبات الشبكة
  3. حوِّل الإجراءات الشائعة إلى أوامر
  4. سجل تحذيرات وأخطاء المتصفح في الناتج النهائي
  5. اختبارات الفشل عند وجود خطأ غير معروف في وحدة التحكم

قم بإعداد مشروع الاختبار

قم بإنشاء مشروع React جديد باستخدام create-response-app وقرص مضغوط فيه.

npx إنشاء-رد فعل-تطبيق cypress-tutorial cd cypress-tutorial

تثبيت السرو.

npm i -D cypress

قم بتهيئة Cypress في مشروعك من خلال فتح واجهة المستخدم الرسومية للتطوير لأول مرة.

npx السرو مفتوح

احذف مثال دليل الاختبار.

rm -R ./cypress/كامل/examples

قم بتشغيل التطبيق في نافذة طرفية واستمر في تشغيله على http: // localhost: 3000 طوال البرنامج التعليمي.

بدء npm

أضف ESLint وقواعد Linting Cypress

لتجنب مشاكل الاقتباس المزعجة مع Cypress في IDE الخاص بك ، دعنا ننشئ linting حتى يفهم كائن cyress العالمي.

npm i -D eslint eslint-plugin-cypress

قم بإنشاء .eslintrc.json.

المس .slintrc.json

قم بلصق هذا الكود في ملف .eslintrc.json الخاص بك حتى يتمكن IDE من فهم كود Cypress و JavaScript الحديث.

{"plugins": ["cypress"]، "env": {"es6": true}}

اكتب اختبارًا أساسيًا

للحصول على نقطة بداية لتطبيق تقنيات أكثر تقدمًا ، دعنا نكتب اختبارًا أساسيًا للغاية.

قم بإنشاء ملف اختبار جديد يسمى tutorial.spec.js.

المس ./cypress/كامل/tutorial.spec.js

قم بلصق كود اختبار السرو التالي في ملف tutorial.spec.js. كل هذا الاختبار هو التأكد من عمل التطبيق من خلال البحث عن رابط CRA boilerplate "Learn React".

ملاحظة: عادةً ، ستقوم بتعيين baseUrl في cypress.json!

شغّل الاختبار عن طريق فتح واجهة المستخدم الرسومية مع فتح npx cypress ومعرفة أن الاختبار يمر.

الأسلوب 1: استخدام مكتبة اختبار السرو

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

قم بتثبيت المكتبة.

npm install -D @ testing-library / cypress

وفقًا للمستندات ، نحتاج إلى استيراد المكتبة إلى cypress / support / commands.js لكي تعمل. لذا قم بتحديث هذا الملف بما يلي ...

استيراد "@ testing-library / cypress / add-commands" ؛

الآن لدينا إمكانية الوصول إلى الأوامر الرائعة من مكتبة اختبار السرو مباشرة من الكائن cy تمامًا مثل الأوامر العادية. دعنا نستخدم واحدًا في اختبارنا التعليمي التعليمي الحالي. spec.js.

لم يتغير كثيرًا ، ولكننا لا نبحث عن علامة بعد الآن ، فقط أي شيء على الصفحة يحتوي على Learn React. هذه الطريقة في البحث عنها أقرب إلى كيفية قراءة المستخدم والتفاعل مع الشاشة. يمكنك قراءة المزيد عن هذا المفهوم هنا.

وللتأكد من أن اختبارنا يعمل بالفعل ويتعطل عندما يفترض أن يفعل ذلك ، قم بتغيير النص للبحث عن Learn Vue ورؤية فاصل الاختبار في واجهة المستخدم الرسومية.

التقنية 2: انتظر صراحةً طلبات الشبكة

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

أضف طلب شبكة إلى تطبيق React

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

npm i axios

الآن قم بلصق هذا في App.js.

مع التحديثات أعلاه ، لا يعرض التطبيق الآن رابط "Learn React" حتى ينتهي طلب الشبكة بعد خمس ثوانٍ. تحقق منه بنفسك من خلال إعادة تحميل تطبيقك على http: // localhost: 3000.

نظرًا لأن الارتباط "Learn React" لا يظهر لمدة خمس ثوانٍ ، وهو أطول من المهلة الافتراضية لـ Cypress ، يفشل الاختبار الآن.

الإصلاح السيئ: زيادة المهلة

تتمثل إحدى الطرق دون المستوى الأمثل "لإصلاح" الاختبار في زيادة المهلة الافتراضية لأمر findByText ، كما هو موضح أدناه.

وصف ("Cypress Tutorial"، function () {it ("Makes تأكد من أن التطبيق يعمل" ، الوظيفة () {cy.visit ("http: // localhost: 3000")؛ cy.findByText ("Learn React" ، {timeout: 10000})؛})؛}) ؛

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

الحل الأفضل: الاسم المستعار والانتظار

يحتوي Cypress على شيء يسمى الأسماء المستعارة التي تتيح لك الإشارة صراحة إلى أشياء مختلفة في اختباراتك مثل العناصر والتركيبات ، وفي حالتنا ، طلبات الشبكة!

دعنا نحسن اختبارنا من خلال اسم مستعار لطلب الشبكة وانتظاره قبل البحث عن رابط "Learn Text".

بعض التفسيرات / الأشياء التي يجب ملاحظتها حول ما سبق:

  • يتيح لك cy.server "بدء خادم لبدء توجيه الاستجابات إلى cy.route () وتغيير سلوك طلبات الشبكة."
  • يتيح لك cy.route إدارة سلوك الشبكة ويأخذ عنوان url صريحًا أو كرويًا لمطابقة بعض أنماط الطلبات. يمكنك أيضًا أن تكون أكثر تحديدًا مع كائن التكوين ، وهو ما اخترت القيام به أعلاه.

الآن يمر اختبارنا وينتظر فقط طالما أنه يحتاج إلى ذلك ، حتى إذا قمت بزيادة الثواني إلى الانتظار في App.js!

التقنية 3: تحويل الإجراءات المشتركة إلى أوامر

أثناء كتابة المزيد والمزيد من الاختبارات ، ستجد أنك تعيد استخدام الكثير من نفس المنطق للقيام بالتفاعلات الشائعة مثل ...

  • تسجيل الدخول إلى تطبيقك
  • اختيار عناصر غريبة
  • التنقل إلى صفحة
  • تحضير بعض البيانات / الحالة على الصفحة
  • أكثر بكثير…

تطبيقنا التعليمي واختبارنا بسيطان حقًا - لكن هذا لن يكون برنامجًا تعليميًا بدون مثال معقد لإظهار بعض التكنولوجيا!

لذا دعنا نكتب اختبارًا جديدًا يتحقق من أن "Learn React" href هو "https://reactjs.org." في هذا الاختبار ، سنستخدم بعض الأوامر القابلة لإعادة الاستخدام التي نقوم بإنشائها.

اكتب الاختبارات الجديدة ، لا توجد أوامر حتى الآن

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

قم بإجراء هذا الاختبار في واجهة المستخدم الرسومية للتأكد من اجتيازه.

أمرنا الأول

قد يكون لدينا سبب للتحقق من صحة الروابط في الاختبارات الأخرى ، والتي يمكننا استخراجها إلى أمر Cypress لطيف ومخصص.

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

افتح cypress / support / commands.js وأضف الرمز أدناه - ويعرف أيضًا بالأمر المخصص لدينا.

استيراد "@ testing-library / cypress / add-commands" ؛ // نفس ما كان عليه الحال سابقًا في مكتبة cypress-testing-library Cypress.Commands.add ("checkLink"، (linkText، href) => {cy.findByText (linkText) .should ("have.attr"، "href"، href) ؛}) ؛

لذلك قمنا للتو بإضافة أمر تحقق من الرابط يأخذ مسجلين - linkText للبحث عنه و href يجب أن يكون الرابط.

ارجع إلى tutorial.spec.js واستخدم الأمر!

المكافأة: استخدم beforeEach لإعادة استخدام رمز الاختبار داخل نفس مجموعة الاختبار

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

هنا في tutorial.spec.js ، سنستفيد قبل كل. فيما يلي أحدث إصدار من مجموعة الاختبار الخاصة بنا.

التقنية 4: تسجيل تحذيرات وأخطاء المتصفح في المخرج بدون طرف طرفية

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

إضافة تحذير وخطأ في وحدة التحكم إلى التطبيق

أولاً ، سنحتاج إلى أخطاء وتحذيرات لتمرير إلى المحطة. لذا قم بتحديث App.js بالكود التالي:

تحقق في وحدة تحكم المتصفح الخاص بك لتلك الرسائل الثلاث.

قم بإجراء الاختبارات في وضع بلا رأس

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

npx السرو المدى

تسجيل إخراج وحدة التحكم

سيبدو هذا مفصلاً نوعًا ما لشيء بسيط للغاية ، ولكنه يستحق ذلك ويكشف عن بعض الاحتمالات في Cypress بشكل عام.

افتح cypress / commands / index.js وأضف الكود التالي إلى أسفل الملف.

هناك شيء لائق يحدث هنا - دعونا نحللها.

  • Cypress.on هي طريقة للاستماع إلى أحداث السرو.
  • نقوم بتشغيل وظيفة على النافذة: قبل: حدث التحميل (بشكل أساسي قبل تشغيل الاختبارات).
  • لاعتراض طرق وحدة التحكم ، نرميها.
  • cy.now هو شيء تعلمته عن هنا وهنا ، ويبدو أنه يتجنب مشكلة مع مهمة. وعود لا يحبها السرو. أتمنى لو كانت هناك طريقة أفضل ، لذا إذا كنت تعرف أيًا منها ، فأخبرني بذلك!

نحتاج إلى تحديث ملف آخر ، cypress / plugins / index.js ، حتى نتمكن من العمل. إليك الكود الذي ستحتاجه في هذا الملف ، والذي يستمع للمهام التي قمنا بإعدادها للتو في cypress / commands / index.js وسجلات عملية السرو الداخلية (بما في ذلك الإخراج النهائي بألوان جميلة).

الآن قم بتشغيل الاختبارات في وضع بدون رأس مع تشغيل npx cypress ويجب أن تشاهد السجلات في الإخراج الطرفي الخاص بك!

التقنية 5: اختبارات الفشل عند وجود خطأ غير معروف في وحدة التحكم

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

لحسن الحظ ، يمكننا بسهولة إضافة هذا السلوك إلى اختبارات السرو الخاصة بنا مع إضافة صغيرة للرمز من قسم المعاينة. افتح cypress / support / index وقم بتحديث كتلة مستمع Cypress.on لتطابق أدناه ، والتي تحتوي على سطر إضافي واحد فقط.

الآن أعد تشغيل مجموعة الاختبار ونرى أنها فشلت!

المكافأة - تجاهل الأخطاء المعروفة

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

أعد تشغيل مجموعة الاختبار ولن يخطئ خطأ وحدة التحكم في اختباراتك بعد الآن!

وهذا كل شيء!

لدي المزيد من تقنيات Cypress (مثل جعلها تعمل مع تطبيقات / أدوات SPA الحديثة مثل جهاز التوجيه التفاعلي والإضافة إلى CI / CD pipeline) لم يكن لدي مساحة في هذا البرنامج التعليمي ، لذلك ستأتي قريبًا!