الاختبارات التلقائية على السرو
واجهت الانطباعات والمشاكل الأولى
Dmitry Kochergin ، كبير مطوري البرامج Luxoft بادئ ذي بدء
، أود أن أشير إلى أنني لست مؤلفًا محترفًا ، ولكنني مبرمج Java. ولكن في أحد الأيام جاءت المهمة لإجراء اختبارات الدخان للتحقق الأساسي من الوظائف الرئيسية للتطبيق الذي تم كسره مؤخرًا من خلال تغيير في واجهة برمجة التطبيقات للخدمة التابعة دون سابق إنذار.
ستكون المقالة محل اهتمام كل من كان مهتمًا بالاختبار التلقائي من الصفر في JS ، ولكن كان يخشى طرحه.
بادئ ذي بدء ، لم أقرأ أي شيء عن الاختبار التلقائي. كان التصور المسبق الرئيسي هو أن الاختبارات التلقائية صعبة ، لأنه وفقًا للمراجعات ، يمكنك إعداد السيلينيوم هذا ... بالإضافة إلى أنك تحتاج إلى تعلم XPath و PageObject ، وهو ما لم ترغب في القيام به على الإطلاق.
أسفر البحث السريع على الإنترنت عن أدوات أحدث وأكثر واعدة: WebDriver.IO و Pupeteer (والآن أصبح الكاتب المسرحي أفضل) و Cypress. اخترت هذا الأخير ، واشتريت بوعود جميلة وبضع تعليقات من Holivars على أفضل الأدوات للاختبارات التلقائية.
هذا ما تبدو عليه نافذة المتصفح لاختبار قيد التشغيل. على اليسار توجد أوامر الاختبار المنفذة والحالة ، وعلى اليمين يوجد عرض التطبيق أثناء تنفيذ الاختبار:
هكذا يبدو رمز الاختبار (في Cypress ، كل الكود في JS ، والمحددات هي محددات CSS عادية):
في وقت التشغيل يبدو كما يلي:
بينما كنت أبحث عن أداة للاختبارات التلقائية - كان لدي في رأسي صورة يمكن إنشاء الاختبارات مباشرة في المتصفح ، بحيث أنني ببساطة "نقرت على سجل البرنامج النصي" - سجل النظام أفعالي (محددات CSS للعناصر التي نقرت عليها). ثم ألقي نظرة على الاختبار الذي تم إنشاؤه ، وقم بتعديل المحددات إذا لزم الأمر ، وحفظها في Test Suite. إيه ...
تبين أن الحكاية كانت بعيدة المنال حينها ولم أجد مثل هذه الأدوات (ربما سيخبرك شخص ما بالطريقة الصحيحة في التعليقات). لكن تم رشوة Cypress من حقيقة أن الاختبارات يتم تنفيذها في متصفح حقيقي ، ويمكنك حتى استكشاف DOM بالتوازي مع تنفيذ الاختبار باستخدام أدوات مطور Chrome المفضلة لديك (على سبيل المثال ، إذا لم يعمل المحدد ، يمكنك فتح وحدة التحكم ومعرفة السبب على الفور عند تنفيذ الاختبار).
من بين المعلمات الأخرى التي كانت مهمة بالنسبة لي ، لم أرغب في قضاء الكثير من الوقت سواء في الكتابة (مرة أخرى ، حول كتابة اختبار في المتصفح) أو في الحفاظ على الاختبارات. كان هذا كافيا لأهدافي. فقط للحصول على معلومات حول Cypress: استغرق الأمر ساعة واحدة من اللحظة التي فتحت فيها موقع Cypress لأول مرة إلى الاختبار الأول الذي يسجل الدخول إلى التطبيق.
إذن Cypress ، الصفحة الأولى من إطار العمل تخبرنا أن هذا هو JavaScript End to End Testing Framework ( cypress.io ). بعد ذلك ، قرأنا الوثائق بسرعة ، وهي مكتملة حقًا ، ويمكنك العثور على إجابات لجميع الأسئلة تقريبًا (سرعان ما وجدت كل شيء آخر على StackOverflow):
بالإضافة إلى قائمة الميزات من الموقع:
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- لقطات الشاشة ومقاطع الفيديو - يسجل Cypress مقطع فيديو لشاشة المتصفح (MP4) أثناء الاختبار ، إلى جانب الإرشادات الموجودة في النافذة.
كل هذه الأشياء ، بالطبع ، يمكن تشغيلها بدون متصفح مفتوح في CI ، يتم استخدام Chrome بدون رأس أو Electron.
ولكن كانت هناك أيضًا بعض المشكلات.
في البداية ، لم أكن أعرف أنه يمكنني انتظار انتهاء طلبات XHR إلى الخادم ، وإدراج المهلات بدلاً من ذلك ، وستنخفض الاختبارات بشكل عشوائي. مصحح.
ثم عملت Hot Reload في كل مرة ، وكان علي باستمرار إعادة تشغيل Cypress بالكامل ، لأنني لم أكن متأكدًا من تطبيق التغييرات التي أجريتها. اتضح أنه في IDE الخاص بي (IntelliJ IDEA) توجد مربعات اختيار سيئة ، والتي يتم تمكينها أيضًا بشكل افتراضي ، وبسبب ذلك اتضح أن حفظ الملف لا يؤدي إلى الحفظ ، ولكن الحفظ في النهاية.
كانت المشكلة التالية هي أن تطبيقي كان يستخدم ميزة جلب النوافذ للطلبات إلى الخادم ، ولا يرى Cypress سوى طلبات XHR. ساعد الاختراق القذر من StackOverflow (أتفهم أن طريقة الجلب تمت إزالتها من النافذة بحيث يقوم المتصفح بعمل احتياطي على XHR بدلاً من الجلب):
بعد ذلك ، كانت هناك مشكلة في محاكاة متصفح الجوال ، لم ينجح الأمر في كود الاختبار الخاص بوكيل المستخدم ، ولكن في ملف خاص منفصل - كل شيء على ما يرام.
ثم تم حل مشكلة CORS:
بعد ذلك ، تم تحميل الملف ، ولم ينجح الأمر ، ولم تنجح الحلول القياسية ، لكن مكتبة تحميل ملف السرو ساعدت:
كانت المشكلة الوحيدة التي لم أتمكن من حلها هي تكرار الاختبار. وهي البيانات الأولية الثابتة والمتطابقة لتشغيل الاختبار (التركيبات) ، فهذه مهمة تكوين وليست Cypress ، ولكنها لا تزال دون حل.
نتيجة لذلك ، تبدو Cypress كأداة رائعة لإدخال الاختبار التلقائي في المشروع إذا:
- لديك معرفة JS
- لا حاجة للاختبار في جميع أنواع المتصفحات منذ IE6 ( يدعم Cypress حاليًا Chrome و Chromium و Edge و Electron و Firefox). هنا مناقشة الموضوع . لكن يمكنني القول أنه قبل عام ، عندما بدأت العمل مع Cypress ، كان يدعم فقط أحدث إصدار من Chrome و Electron للإطلاق بدون واجهة مستخدم.
- تريد إجراء الاختبارات بسرعة ونسيانها حتى يقوم شخص ما بكسر التطبيق :)
السرو: خذها واستخدمها!