لا تخاف من كروم بلا رأس! تعلم لماذا وكيفية استخدامها لاختبار Ember

آخر تحديث 9/1/17 ، Ember CLI 2.15. شكر خاص لـ Scott Newcomer و Ben Demboski لمساعدتي في تصحيح الأخطاء ، وكارل بيكر للتحرير ، و Tobias Bieniek على بعض نصائح CLI!

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

ما هو حتى مقطوعة الرأس كروم؟

لدى مطوري Ember خيارات للمتصفحات التي يستخدمونها لتشغيل مجموعة الاختبار الخاصة بهم ، و Headless Chrome هو واحد منهم. ولكن ما هو؟ مدونة Google تقول:

إنها طريقة لتشغيل متصفح Chrome في بيئة مقطوعة الرأس. في الأساس ، تشغيل Chrome بدون كروم!
(البديل: ما هذا ، أنا لا حتى ...)

حق. إليك تعريف أفضل من ويكيبيديا:

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

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

لماذا تحتاج بيئة "مقطوعة الرأس"؟

تمامًا مثل المستعرض العادي ، يفهم المستعرض مقطوع الرأس HTML و CSS. يمكنه تنفيذ جافا سكريبت مثل طلبات أجاكس. فكر في اختبارات القبول في Ember. إذا حاول اختبار ما النقر فوق زر مخفي ، فيجب ألا يكون قابل للنقر ، ويجب أن يفشل الاختبار. ولكن كيف يعرف ذلك؟ لأن المتصفح يقوم بالتحميل الثقيل للجمع بين كل HTML و CSS و JavaScript في شيء مفيد. ونظرًا لعدم وجود صور يتم عرضها ، يكون الاختبار أسرع في بيئة مقطوعة الرأس. هناك العديد من أنواع المتصفحات مقطوعة الرأس. Chrome و PhantomJS مثالان فقط.

فلماذا لا تقوم فقط بإجراء الاختبارات مباشرة في متصفح Chrome العادي؟ إذا كان لديك تطبيق Ember ، وقم بتشغيل خدمة ember ، وزيارة http: // localhost: 4200 / اختبارات ، فيمكنك مشاهدة اختباراتك في الوقت الفعلي ، أو إيقافها مؤقتًا وإلقاء نظرة على حالة التطبيق بصريًا. ومع ذلك ، حيث تتألق المتصفحات مقطوعة الرأس فعليًا عند استخدامها لاختبار التكامل المستمر ، والذي يشار إليه عمومًا باسم CI. في تطبيقات الإنتاج ، من الشائع استخدام خدمة تقوم تلقائيًا بتشغيل مجموعة الاختبار الخاصة بك حيث يتم الالتزام بالكود. وبالنسبة للجزء الأكبر ، تعمل هذه الاختبارات على خادم ، وليس في المتصفحات "العادية". على سبيل المثال ، تحقق من "طلبات السحب" المفتوحة لجزء من موقع Ember ، خاصة أي علامة x باللون الأحمر بجانبها. عندما يتم فتح طلب سحب على GitHub ، يمكنك معرفة ما إذا كان اجتياز الاختبارات.

هذا ليس طلب السحب الخاص بي. أقسم على ذلك. (البديل: صورة توضح إخفاقات الاختبار المتعددة بناءً على طلب سحب GitHub)

لماذا لا تستخدم PhantomJS؟

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

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

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

لا بأس 1 PhantomJS 2.1 - خطأ عمومي: SyntaxError: الرمز المميز غير متوقع ‘} 'على http: // localhost: 7357 / الأصول / vendor.js ، السطر 120177
لا بأس 2 PhantomJS 2.1 - خطأ عمومي: خطأ: تعذر العثور على وحدة ember-metal المطلوبة بواسطة: ember-test / support على http: // localhost: 7357 / stocks / test-support.js ، السطر 58
لا بأس 3 PhantomJS 2.1 - خطأ عالمي: ReferenceError: لا يمكن العثور على متغير: define في http: // localhost: 7357 / الأصول / ember-bio-bright.js ، السطر 5
غير موافق 4 PhantomJS 2.1 - خطأ عام: ReferenceError: لا يمكن العثور على متغير: define في http: // localhost: 7357 / الأصول / tests.js ، السطر 3
لا بأس 5 PhantomJS 2.1 - خطأ عالمي: ReferenceError: لا يمكن العثور على المتغير: EmberENV على http: // localhost: 7357/4215 / tests / index.html؟ hidepassed ، السطر 38

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

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

لم تصبح الأخطاء أسهل في التصحيح.

الأخطاء اختفت ببساطة.

كيفية جعل التبديل

يوجد ملف في تطبيقات Ember يسمى testem.js ، وهو المكان الذي تقوم بتكوين أي أدوات اختبار لاستخدامه عند كتابة اختبار ember أو اختبار ember - الخادم. فيما يلي رابط لمحتوى testem.js الذي انتهى بي الأمر باستخدامه ونسخه ولصقه من مقالة Ryan Toronto. يمكنك عرض ملف testem المرفق مع EmberCLI على هذا الرابط على EmberCLI GitHub.

ما هو Testem؟

Testem هو عداء اختبار ، مما يعني أنه يقوم بتحميل وتشغيل اختبارات التطبيق ، باستخدام التكوين الذي حددته في testem.js. يمكنك أيضًا الحصول على واجهة سهلة الاستخدام للاطلاع على نتائج اختباراتك من سطر الأوامر. لقد فوجئت بمعرفة أن Testem ليس فريدًا بالنسبة إلى Ember. إنه يعمل مع العديد من أطر عمل JavaScript وأدوات الاختبار (مثل QUnit و Mocha و Jasmine) وبيئات المتصفح.

انظر الى هذا؟ هذا Testem قيد التنفيذ ، ناتج عن

ما هي الآثار السلبية التي يمكن أن يحدث لها Headless Chrome

حسنًا ، لسبب واحد ، Headless Chrome ليس مفتوح المصدر مثل PhantomJS. إيجابيات وسلبيات ذلك يمكن أن يكون مقالهم الخاص.

إنه أيضًا إيش جديد. تم شحنه مع Chrome 59 ، ولكن كان لدى المطورين طرق لاستخدام Chrome قبل ذلك. السؤال الكبير هو ، إذا كنت تقوم بالفعل بإجراء اختبار CI ، فما مدى دعم بائعك له؟ سارع الكثير من اللاعبين الكبار إلى تنفيذه ، لكن من المحتمل أنك قد تواجه بعض المشكلات.

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

عندما للتبديل

إذا كنت تشعر بأنك عالق ، أو ترغب ببساطة في معرفة أحدث وأكبر ما في اختبار Ember ، فجربه!

سعيد اختبار مقطوعة الرأس!

عمل فني بواسطة IrenHorrors ، تمت مشاركته بموجب ترخيص Creative Commons Attribution-Noncommercial-No Derivative Works 3.0