بروtracبرنامج تعليمي لاختبار تور: إطار عمل أدوات الأتمتة

⚠️ إشعار بالتوقف عن الاستخدام: بروtracتور هو تم إيقاف استخدامها وأرشفتهاانتهى الدعم في أغسطس 2023، وتوقف دعم Angular CLI Pro.tracأداة بناء التور بعد Angular 15. اختر الكاتب المسرحي, Cypressأو WebdriverIO أو TestCafe للمبتدئين اختبار شاملينطبق الشرح الموضح أدناه على الأجنحة القديمة.

لماذا نحتاج إلى محترفينtracإطار عمل تور؟

Javaتُستخدم البرمجة النصية في جميع تطبيقات الويب تقريبًا. ومع نمو هذه التطبيقات، Javaسيناريو كما يزداد حجمها وتعقيدها. في هذه الحالة، يصبح من الصعب على المختبرين اختبار تطبيق الويب في مختلف السيناريوهات.

في بعض الأحيان يكون من الصعب التقاط عناصر الويب في تطبيقات AngularJS باستخدام JUnit or Selenium برنامج تشغيل الويب.

بروtracبرنامج tor هو برنامج Node.js مكتوب بلغة Javaيتم تشغيل البرنامج النصي مع Node لتحديد عناصر الويب في تطبيقات AngularJS، كما يستخدم WebDriver للتحكم في المتصفح باستخدام إجراءات المستخدم.

إذن، ما هو تطبيق AngularJS تحديداً؟

AngularJS تطبيقات AngularJS هي تطبيقات ويب تستخدم صيغة HTML الموسعة للتعبير عن مكونات تطبيقات الويب. تُستخدم هذه التطبيقات بشكل أساسي لتطبيقات الويب الديناميكية. تتميز هذه التطبيقات باستخدامها لرمز أقل وأكثر مرونة مقارنةً بتطبيقات الويب العادية. تجدر الإشارة إلى أن دعم AngularJS 1.x طويل الأمد قد انتهى في 31 ديسمبر 2021، لذا تُعتبر هذه التطبيقات قديمة اليوم.

لماذا لا يمكننا العثور على عناصر الويب في AngularJS باستخدام الوضع العادي؟ Selenium برنامج تشغيل الويب؟

تحتوي تطبيقات AngularJS على بعض سمات HTML الإضافية مثل ng-repeater و ng-controller و ng-model وما إلى ذلك، والتي لا يتم تضمينها في Selenium محددات المواقع. Selenium غير قادر على تحديد عناصر الويب تلك باستخدام Selenium الكود. لذا، بروtracبرج في أعلى Selenium يمكنه التعامل مع هذه السمات والتحكم بها في تطبيقات الويب.

بروtracيُعدّ Tor إطار عمل لاختبار التطبيقات المبنية على AngularJS من البداية إلى النهاية. بينما تركز معظم أطر العمل على إجراء الاختبارات. اختبارات الوحدة لتطبيقات AngularJS، Protracيركز برنامج tor على اختبار الوظائف الفعلية للتطبيق.

قبل أن نبدأ الاحترافtracبالنسبة لبرنامج تور، نحتاج إلى تثبيت ما يلي:

1. Selenium: يمكنك العثور على Selenium خطوات التثبيت في Selenium دليل تثبيت WebDriver.
2. NPM (Node.js): نحتاج إلى تثبيت Node.js لتثبيت Protracيمكنك العثور على خطوات التثبيت هذه في دليل تنزيل وتثبيت Node.js.

بروtracتركيب التور

الخطوة 1) افتح موجه الأوامر واكتب "npm install -g pro"tracتور" واضغط على Enter.

سيقوم الأمر أعلاه بتنزيل الملفات اللازمة وتثبيت برنامج Protractor على نظام العميل، كما هو موضح أدناه.

الخطوة 2) تحقق من التثبيت والإصدار باستخدام مؤيدtracإصدار تور". في حالة نجاحه، سيظهر الإصدار كما هو موضح في لقطة الشاشة أدناه. إذا لم يكن الأمر كذلك، قم بتنفيذ الخطوة 1 مرة أخرى.

(الخطوتان 3 و4 اختياريتان ولكن يوصى بهما لممارسة أفضل)

الخطوة 3) قم بتحديث مدير WebDriver. يُستخدم مدير WebDriver لتشغيل الاختبارات على تطبيق الويب Angular في متصفح محدد. بعد الإصدار الاحترافيtracبعد تثبيت برنامج Tor، يجب تحديث مدير WebDriver إلى أحدث إصدار. يمكن القيام بذلك عن طريق تشغيل الأمر التالي في موجه الأوامر.

webdriver-manager update

يتم تنزيل ملفات تعريف التشغيل الثنائية كما هو موضح أدناه.

الخطوة 4) ابدأ تشغيل مدير WebDriver. ستعمل هذه الخطوة على تشغيل مدير WebDriver في الخلفية، وستستمع إلى أي اختبارات يتم تشغيلها عبر Pro.tracتور.

بمجرد تشغيل الاختبار، يقوم برنامج تشغيل الويب بتحميله تلقائيًا في المتصفح المناسب. ابدأ تشغيل المدير باستخدام الأمر أدناه.

webdriver-manager start

تعرض وحدة التحكم عنوان الاستماع.

الآن، إذا ذهبت إلى ما يلي URL (http://localhost:4444/wd/hub/static/resource/hub.html) في متصفحك، سترى بالفعل مدير WebDriver يعمل في الخلفية.

اختبار تطبيق AngularJS تجريبي باستخدام Protracتور

مع تشغيل مدير برامج التشغيل، Protracيحتاج برنامج تور إلى ملفين للتشغيل، وهما: أ المواصفات ملف و ترتيب ملف.

1. ملف الضبطهذا الملف يساعد المحترفينtracللوصول إلى مكان وجود ملفات الاختبار (specs.js) والتواصل معها Selenium الخادم (Selenium العنوان). متصفح Chrome هو المتصفح الافتراضي لـ Protracتور.
2. ملف المواصفات: يحتوي هذا الملف على المنطق ومحددات المواقع للتفاعل مع التطبيق.

الخطوة 1) علينا أن نفتح https://angularjs.org وأدخل النص "GURU99" في مربع النص "أدخل اسمًا هنا".

الخطوة 2) في هذه الخطوة،

1. أدخل الاسم "Guru99 "
2. في نص الإخراج "مرحباً" Guruيظهر الرقم 99.

الخطوة 3) يتعين علينا الآن التقاط النص من صفحة الويب بعد إدخال الاسم ونحتاج إلى التحقق من النص المتوقع.

Code:

علينا إعداد ملف التكوين (conf.js) وملف المواصفات (المواصفات.js) كما ذكر أعلاه.

منطق المواصفات.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

Code شرح ملف spec.js:

1. وصف('أدخل اسم GURU99', function() صيغة الوصف مأخوذة من إطار عمل جاسمين. هنا، يشير "describe" ('Enter GURU99 Name') عادةً إلى مكونات التطبيق، والتي يمكن أن تكون فئة أو دالة وما إلى ذلك. في مجموعة التعليمات البرمجية المسماة "Enter GURU99"، فهي مجرد سلسلة نصية وليست رمزًا.
2. it('يجب إضافة اسم كـ GURU99'، الوظيفة ()
3. browser.get('https://angularjs.org')كما هو الحال في Selenium سيقوم WebDriver browser.get بفتح نافذة متصفح جديدة مع ما ذُكر. URL.
4. العنصر(by.model('اسمك')).sendKeys('GURU99') هنا نجد عنصر الويب باستخدام اسم النموذج "yourName"، وهو قيمة "نانوغرام نموذج"على صفحة الويب. انظر لقطة الشاشة أدناه-"

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) هنا نجد عنصر الويب باستخدام كسباث وتخزين قيمتها في "المعلم" المتغير.
6. توقع(guru.getText ()).لتساوي('Hello GURU99!') أخيرًا نقوم بالتحقق من النص الذي حصلنا عليه من صفحة الويب (باستخدام gettext() ) بالنص المتوقع.

منطق conf.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

Code شرح ملف conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub' يخبر ملف التكوين Protracلتحديد موقع Selenium عنوان للتحدث معه Selenium برنامج تشغيل الويب.
2. المواصفات: ['spec.js'] يخبر هذا السطر برنامج Protracلتحديد موقع ملفات الاختبار spec.js

تنفيذ Code

أولاً، انتقل إلى المجلد الذي يحتوي على ملفي conf.js و spec.js، ثم اتبع الخطوات التالية.

الخطوة 1) افتح موجه الأوامر.

الخطوة 2) تأكد Selenium مدير WebDriver يعمل الآن. لتشغيله، اكتب الأمر "webdriver-manager start" ثم اضغط على مفتاح الإدخال (Enter)..

(إذا Selenium برنامج WebDriver غير مُفعّل، لذا لا يمكننا المتابعة في الاختبار بصفتنا محترفين.trac(لا يمكن لـ Tor العثور على WebDriver للتعامل مع تطبيق الويب)

الخطوة 3) افتح موجه أوامر جديد وقم بإعطاء الأمر كـ مؤيدtractor conf.js” لتشغيل ملف التكوين. ينتهي التشغيل كما هو موضح أدناه.

التفسير:

• هنا محترفtracسيقوم برنامج تور بتنفيذ ملف التكوين الذي يحتوي على ملف المواصفات المحدد.
• يمكننا أن نرى Selenium الخادم يعمل على "http://localhost:4444/wd/hub"الذي قدمناه في ملف conf.js.
• أيضًا، هنا يمكنك رؤية النتيجة، وعدد مرات النجاح والإخفاق كما في لقطة الشاشة أعلاه.

تم التحقق من نتيجة النجاح. الآن، انظر إلى نتيجة الفشل.

الخطوة 1) من المتوقع أن يؤدي فتح ملف spec.js وتغييره إلى "'Hello change GURU99' كما هو موضح أدناه.

بعد التغيير في spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

الخطوة 2) احفظ ملف spec.js وكرر الخطوات المذكورة أعلاه من قسم "تنفيذ Code" الجزء

الآن، قم بتنفيذ الخطوات المذكورة أعلاه.

النتيجة:

يمكننا أن نرى النتيجة على أنها فشل موضحًا بـ "F" في لقطة الشاشة مع السبب "من المتوقع "مرحبًا GURU99!" لتكون "مرحبًا بتغيير GURU99!". كما يوضح عدد حالات الفشل التي تتم مواجهتها عند تنفيذ التعليمات البرمجية.

هل يمكننا تحقيق نفس الشيء مع Selenium برنامج تشغيل الويب؟

في بعض الأحيان، يمكن تحديد مواقع عناصر AngularJS باستخدام XPath أو محددات CSS من Selenium WebDriver. ومع ذلك، يتم إنشاء هذه العناصر وإعادة ربطها ديناميكيًا، لذا Protracكان برنامج tor الخيار الأكثر أمانًا لمجموعات AngularJS.

إنشاء التقارير باستخدام Jasmine Reporters

بروtracيدعم موقع تور مراسلي ياسمين. يستخدم هذا القسم JUnitXmlReporter لإنشاء تقارير تنفيذ الاختبار تلقائيًا بتنسيق XML، باتباع الخطوات التالية.

تركيب مراسل الياسمين

هناك خياران، محلي أو عالمي

1. افتح موجه الأوامر وقم بتنفيذ الأمر التالي للتثبيت محليًا

npm install --save-dev jasmine-reporters@^2.0.0

يقوم الأمر أعلاه بتثبيت jasmine-reporters محليًا، داخل الدليل الذي يتم تشغيله فيه.

2. افتح موجه الأوامر وقم بتنفيذ الأمر التالي للتثبيت العالمي

npm install –g jasmine-reporters@^2.0.0

هنا، يتم تثبيت المراسلين محلياً..

الخطوة 1) نفذ الأمر.

npm install --save-dev jasmine-reporters@^2.0.0

من موجه الأوامر كما هو موضح أدناه.

الخطوة 2) تحقق من مجلدات التثبيت في الدليل. يجب أن تكون "Node_modules" متاحة إذا تم تثبيتها بنجاح كما هو موضح في اللقطة أدناه.

الخطوة 3) أضف الكود الملون التالي إلى ملف conf.js الموجود

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

شرح الكود:

في الكود، نقوم بإنشاء التقرير "JUnitXmlReporter"وإعطاء المسار مكان تخزين التقرير.

الخطوة 4) افتح موجه الأوامر وقم بتنفيذ الأمر إلىtractor conf.js.

الخطوة 5) عند تنفيذ الكود أعلاه، سيتم إنشاء junitresults.xml في المسار المذكور.

الخطوة 6) افتح ملف XML وتحقق من النتيجة. تظهر رسالة الفشل في ملف النتائج باسمنا حالة الاختبار فشلت حالة الاختبار. فشلت حالة الاختبار لأن النتيجة المتوقعة من "spec.js" لا تتطابق مع النتيجة الفعلية من صفحة الويب.

الخطوة 7) استخدم ملف junitresult.xml للحصول على الأدلة أو ملفات النتائج.

بروtracمقارنة بين Tor وبدائل أتمتة الاختبار الحديثة

منذ الاحترافtracلم يعد برنامج Tor يتلقى تحديثات، لذا تحتاج الفرق التي تخطط لحزم برامج جديدة إلى معرفة مدى توافقه مع الأطر التي تنتقل إليها مشاريع Angular حاليًا. يقارن الجدول أدناه بين إصداري Pro و Pro.tractor مع البدائل الثلاثة التي تظهر في أغلب الأحيان في الأسئلة الشائعة أدناه.

الفرق التي لديها محترف حاليtracتتحرك مجموعة تور بشكل أسرع عمومًا إلى WebdriverIO، نظراً لأسلوب أوامره و Seleniumإدارة السائقين القائمة على - تحافظ على قربها مما يقدمه Protracيعرف مختبرو Tor ذلك بالفعل. أما الفرق التي تبدأ من الصفر، أو التي تحتاج إلى أسرع عمليات اختبار، فغالباً ما تختار Cypress أو كاتب مسرحي بدلاً من ذلك.

الأسئلة الشائعة