في المقالة السابقة ، تحدثت عن اختبارات الوحدة لـ NG. اليوم سأتحدث عن اختبار E2E (نهاية إلى طرف).
عندما نختبر نقطة وظيفية واحدة لوحدة معينة ، يكون اختبار الوحدة أكثر ملاءمة. ومع ذلك ، عندما يحدث خطأ عندما يتفاعل المستخدم مع صفحات متعددة ، لن يعمل اختبار الوحدة. في هذا الوقت ، يجب استخدام E2E لمحاكاة عمليات المستخدم واستعادة موقع المشكلة. بالطبع ، يمكن استخدام اختبار E2E أيضًا اختبار متانة البرنامج. لا يمكن إجراء العديد من الأشياء التي اختبار الوحدة عن طريق اختبارات E2E.
في السابق ، استخدم NG عداء السيناريو الزاوي لتشغيل اختبارات E2E ، والآن تم استبداله بمنقلة لتشغيل E2E.
منقلة
المنقلة هي إطار مستخدم في AngularJS لاختبار E2E. إنها في حد ذاتها وحدة NPM ومبنية على webdriverjs. يمكن أن يمكّن المنقلة حقًا حالات الاختبار من التشغيل على المتصفح ومحاكاة السلوك الحقيقي للمستخدمين تمامًا.
فيما يلي بعض عناوين مواردها:
1. اختبار واجهة برمجة التطبيقات التي توفرها المنقلة
2. استخدام بسيط مثال على المنقلة
3. دليل WebDriverjs ، هذا هو جوهر التبعية المنقلة ، تسمى وحدة NPM Selenium-Webdriver
مبدأ تشغيل المنقلة
يعتمد المنقلة على الأشياء التالية لتشغيل اختبارات E2E:
1. واجهات برمجة تطبيقات WebDriver ، التي هي WebDriverJs المذكورة أعلاه ، هي واجهات برمجة تطبيقات JS التي توفرها السيلينيوم للاختبار الأمامي.
2. يتم استخدام Selenium Server ، حزمة جرة الخلفية ، للتواصل مع برنامج تشغيل المتصفح
3. يتم استخدام برامج تشغيل متصفح WebDriver لعرض محتوى الموقع الحقيقي والتواصل مع Selenium Server. هذا هو المكان المناسب لتمرير عمليات المتصفح الحقيقية.
عملية التشغيل بأكملها على النحو التالي
إذا كنت تريد معرفة المزيد عن التفاعلات السابقة لهذه المكونات ، يرجى النقر هنا
استخدم مشروع NG Seed لشرح E2E
نستخدم مشروع البذور المقدم من NG لشرح مثال E2E حقيقي. أولاً ، استخدم الأمر التالي للحصول على مشروع البذور
نسخة الكود كما يلي:
git clone https://github.com/angular/angular-ised.git
ثم ركض
نسخة الكود كما يلي:
تثبيت NPM
تثبيت جميع التبعيات المتعلقة
سنتحدث هنا أولاً عن ملف التكوين المطلوب لتشغيل اختبار E2E. يمكنك أن ترى أن ملف الاختبار/المنقار- conf.js يستخدم لتكوين الوظائف ذات الصلة. دعونا نركز على عدة سمات
1. تمثل specs مسار ملف الاختبار المراد تشغيله ، والمكتوبة هنا هي e2e/*. js
2. يمثل baseurl عنوان الجذر للقفز بين المتصفحات في ملف الاختبار
3. تمثل القدرات المستعرض الذي يجب استخدامه لتشغيل حالات الاختبار ، مثل استخدام Chrome ، يمكنك ضبطه على هذا النحو
نسخة الكود كما يلي:
القدرات: {
"browsername": 'Chrome'
}
يمثل الإطار أي إطار اختبار لاستخدامه ، وهنا ياسمين
إذا كنت تريد معرفة المزيد حول ملف التكوين هذا ، يرجى النقر هنا لعرضه.
بعد الحديث عن ملف التكوين ، دعنا نلقي نظرة على طريقة كتابة حالات الاختبار ونشر مثالًا على الموقع الرسمي أولاً.
نسخة الكود كما يلي:
"استخدام صارم" ؛
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
وصف ('my app' ، function () {
Browser.get ('index.html') ؛
(يجب إعادة توجيه تلقائيًا إلى /عرض 1 عندما يكون تجزئة الموقع /الشظية فارغة "، وظيفة () {
توقع (browser.getLocationabsurl ()). Tomatch ("/view1") ؛
}) ؛
وصف ('view1' ، function () {
قبل الوظيفة () {
browser.get ('index.html#/view1') ؛
}) ؛
(يجب تقديم عرض 1 عندما يتنقل المستخدم إلى /view1 '، function () {
توقع (element.all (by.css ('[ng-view] p')). first (). getText ()).
توماتش (/جزئي للعرض 1/) ؛
}) ؛
}) ؛
وصف ('view2' ، function () {
قبل الوظيفة () {
Browser.get ('index.html#/view2') ؛
}) ؛
(يجب تقديم عرض 2 عندما يتنقل المستخدم إلى /view2 '، function () {
توقع (element.all (by.css ('[ng-view] p')). first (). getText ()).
توماتش (/جزئي للعرض 2/) ؛
}) ؛
}) ؛
}) ؛
بادئ ذي بدء ، بناء الجملة أعلاه هو طريقة الكتابة التي يدعمها إطار الياسمين. إذا كنت لا تفهم استخدامه ، فيمكنك النقر هنا
سنتحدث هنا فقط عن بعض الأساليب والخصائص الشائعة التي يوفرها المنقلة في المثال أعلاه
1. Browser ، وهو كائن عالمي ، يمثل مثيلًا للمتصفح الحالي. يتم استخدام طريقة GET شائعة الاستخدام لتنفيذ تغيير عنوان المتصفح.
2. العنصر ، الكائن العالمي ، يوفر وظائف مثل jQuery المسؤولة عن العثور على عناصر المستندات ، وغالبًا ما تستخدم في استخدام المفاصل بواسطة الكائنات.
3. By ، كائن عالمي ، يوفر نوعًا من المحددات ، على سبيل المثال ، يمكنك العثور على عنصر من خلال CSS ، نموذج ، BIND والميزات الأخرى.
لطريقة العنصر ومن خلال ، يرجى الرجوع إلى وثائق API المنقلة أعلاه
بعد قوله كثيرًا ، حان الوقت لتشغيل حالات الاختبار أعلاه ، فإن الأمر بسيط نسبيًا
نسخة الكود كما يلي:
NPM Run تحديث webdriver
هذا مسؤول عن تنزيل برامج تشغيل المتصفح ذات الصلة وحزم الجرة المحلية السيلينية. بشكل عام ، سيفشل هذا لأن كلا الموارد موجودة على خادم Google ، بحيث يمكنك استخدام المتصفح لتصفح الجدار لتنزيله بشكل منفصل. العنوان كما يلي:
1. عنوان برنامج تشغيل Chrome ، قم بتنزيل ملف chromedriver_2.9.zip بشكل عام.
2. قم بتنزيل حزمة الجرة المحلية من Selenium-Server ، بشكل عام قم بتنزيل ملف Selenium-Server-Standalone-2.40.0.jar.
ثم انسخ خادم السيلينيوم إلى مجلد السيلينيوم في حزمة المنقلة. إذا تم توقيت الأمر أعلاه ، فسيظهر الملف هنا ، لكنه سيكون فارغًا ، فقط استبدله مباشرة. تحتاج أيضًا إلى نسخ الملف بعد إزالة الضغط من ChromedRiver_2.9.zip إلى هنا.
أخيرًا ، قم بتشغيل الأمر التالي لمعرفة نتائج الاختبار
نسخة الكود كما يلي:
NPM تشغيل المنقلة
إذا كنت تريد معرفة المزيد عن سطر الأوامر في مشروع NG Seed ، فيمكنك النقر هنا لعرضه
لخص
يعد اختبار NG E2E أكثر تعقيدًا من تكوين اختبار الوحدة ، ولكن يمكنه القيام بالكثير من الأشياء. إذا كنت تستحق ذلك ، يمكنك أيضًا تجربته. إذا كان لديك أي أسئلة ، فيمكنك الرد على التعليقات.