من بروتراكتور

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

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

الإعداد

واجهة برمجة تطبيقات بروتراكتور و WebdriverIO متشابهة جدًا في الواقع، إلى درجة أن غالبية الأوامر يمكن إعادة كتابتها بطريقة آلية من خلال codemod.

لتثبيت codemod، قم بتشغيل:

npm install jscodeshift @wdio/codemod

الاستراتيجية

هناك العديد من استراتيجيات الترحيل. اعتمادًا على حجم فريقك، وكمية ملفات الاختبار وإلحاح الترحيل، يمكنك محاولة تحويل جميع الاختبارات دفعة واحدة أو ملفًا تلو الآخر. نظرًا لأن بروتراكتور سيستمر في صيانته حتى Angular الإصدار 15 (نهاية 2022)، لا يزال لديك وقت كافٍ. يمكنك تشغيل اختبارات بروتراكتور و WebdriverIO في نفس الوقت والبدء في كتابة اختبارات جديدة في WebdriverIO. بناءً على ميزانية الوقت المتاحة لديك، يمكنك البدء في ترحيل حالات الاختبار المهمة أولاً والعمل على الاختبارات التي قد تتمكن حتى من حذفها.

أولاً ملف التكوين

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

للترحيل الأول نقوم بتحويل ملف التكوين فقط ونشغل:

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./conf.ts

معلومات

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

تثبيت تبعيات WebdriverIO

الخطوة التالية هي تكوين إعداد WebdriverIO الأساسي الذي نبدأ في بنائه عند الانتقال من إطار عمل إلى آخر. أولاً نقوم بتثبيت واجهة سطر أوامر WebdriverIO عبر:

npm install --save-dev @wdio/cli

ثم نقوم بتشغيل معالج التكوين:

npx wdio config

سيقودك هذا خلال مجموعة من الأسئلة. لسيناريو الترحيل هذا:

• اختر الخيارات الافتراضية
• نوصي بعدم إنشاء ملفات مثال تلقائيًا
• اختر مجلدًا مختلفًا لملفات WebdriverIO
• واختيار Mocha بدلاً من Jasmine.

لماذا Mocha؟

على الرغم من أنك ربما كنت تستخدم بروتراكتور مع Jasmine من قبل، إلا أن Mocha يوفر آليات إعادة محاولة أفضل. الخيار لك!

بعد الاستبيان الصغير، سيقوم المعالج بتثبيت جميع الحزم الضرورية وتخزينها في package.json الخاص بك.

ترحيل ملف التكوين

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

سنواصل الآن مع ملف wdio.conf.ts فقط وبالتالي لن نحتاج إلى أي تغييرات في تكوين بروتراكتور الأصلي بعد الآن. يمكننا التراجع عن هذه التغييرات بحيث يمكن تشغيل كلا الإطارين جنبًا إلى جنب ويمكننا نقل ملف واحد في كل مرة.

ترحيل ملف الاختبار

نحن الآن جاهزون لنقل ملف الاختبار الأول. للبدء ببساطة، دعنا نبدأ بملف ليس لديه العديد من التبعيات لحزم الطرف الثالث أو ملفات أخرى مثل PageObjects. في مثالنا، الملف الأول للترحيل هو first-test.spec.ts. أولاً قم بإنشاء الدليل حيث يتوقع تكوين WebdriverIO الجديد ملفاته ثم انقله:

mv mkdir -p ./test/specs/
mv test-suites/first-test.spec.ts ./test/specs

الآن دعنا نحول هذا الملف:

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/first-test.spec.ts

هذا كل شيء! هذا الملف بسيط لدرجة أننا لا نحتاج إلى أي تغييرات إضافية بعد الآن ويمكننا مباشرة محاولة تشغيل WebdriverIO عبر:

npx wdio run wdio.conf.ts

تهانينا 🥳 لقد قمت للتو بترحيل الملف الأول!

الخطوات التالية

من هذه النقطة تستمر في تحويل اختبار تلو الآخر وكائن صفحة تلو الآخر. هناك فرص أن يفشل codemod لبعض الملفات مع خطأ مثل:

ERR /path/to/project/test/testdata/failing_submit.js Transformation error (Error transforming /test/testdata/failing_submit.js:2)
Error transforming /test/testdata/failing_submit.js:2

> login_form.submit()
  ^

The command "submit" is not supported in WebdriverIO. We advise to use the click command to click on the submit button instead. For more information on this configuration, see https://webdriver.io/docs/api/element/click.
  at /path/to/project/test/testdata/failing_submit.js:132:0

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

الختام

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