تخطيط اختبارات واجهة المستخدم

مكتمل

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

تشغيل اختبارات واجهة المستخدم يدويا

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

أندي: مرحبا. أنت لا تبدو سعيدا.

أميتا: لست سعيدا. أحاول معرفة كيفية كتابة اختبار تلقائي، لكنني لا أعرف من أين أبدأ. أنا لا أبرمج. أشعر أنني قديم.

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

أعتقد أن أفضل طريقة للبدء هي أتمتة شيء تقوم به يدويا بشكل منتظم. اختر اختبار واجهة المستخدم. ثم دعونا نتصفحه ونكتب الخطوات. بعد ذلك سنكتشف كيفية أتمتة هذه الخطوات. ما الاختبار الذي يجب أن نختاره؟

أميتا تأخذ نفسا عميقا.

أميتا: دعونا نأتمتة اختبارات النافذة المشروطة. عند النقر فوق أشياء معينة، مثل زر تنزيل اللعبة على سبيل المثال، أريد التحقق من ظهور النافذة المشروطة الصحيحة. ثم عندما أنقر بعيدا عن النافذة المشروطة، أريد التحقق من اختفاء النافذة المشروطة ومن أن النافذة الرئيسية نشطة مرة أخرى.

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

تفتح أميتا كمبيوتر محمول يعمل بنظام Windows وتطلق Google Chrome. تنتقل إلى تطبيق الويب وتتحقق من فتح الصفحة الرئيسية.

تلميح

إذا كنت ترغب في المتابعة مع اختبارات أميتا اليدوية، يمكنك تشغيل نسخة محلية من موقع Space Game على الويب. في محطة Visual Studio Code الطرفية، قم بتشغيل الأوامر التالية ثم انقر فوق الارتباط الذي يبدو مثل Now listening on: http://localhost:5000.

git fetch upstream selenium
git checkout -B selenium upstream/selenium
dotnet build --configuration Release
dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

أندي: موافق. ماذا تتحقق بعد ذلك؟

أميتا: أتحقق من أنه عند النقر فوق الزر تنزيل اللعبة ، تظهر النافذة المشروطة الصحيحة.

تنقر أميتا فوق الزر تنزيل اللعبة . تظهر النافذة المشروطة.

أندي: عظيم. ما هي النوافذ المشروطة التي تتحقق منها بعد ذلك؟

أميتا: بعد ذلك أتحقق من شاشات اللعبة الأربع. بعد ذلك، انقر فوق أفضل لاعب على لوحة المتصدرين. أتحقق من ظهور ملف تعريف اللاعب.

تنقر أميتا فوق كل صورة من الصور المصغرة الأربعة لإظهار شاشات اللعبة النموذجية.

بعد ذلك، تنقر أميتا فوق أفضل لاعب على لوحة المتصدرين. يظهر ملف تعريف اللاعب.

أميتا: يغطي ذلك اختبارات النافذة المشروطة. أقوم بإجراء هذه الاختبارات على Windows لأن هذا ما يستخدمه معظم اللاعبين لزيارة موقعنا. أقوم بإجراء الاختبارات على Chrome، وعندما يكون لدي الوقت، أقوم بتشغيلها أيضا على Firefox وMicrosoft Edge.

إذا كان لدي الوقت، وأود أن تشغيل جميع الاختبارات مرة أخرى على macOS وLinux، فقط للتأكد من أننا متوافقون مع أي نظام تشغيل يستخدمه اللاعبون لزيارة الموقع. لكنني بحاجة لإجراء العديد من الاختبارات الأخرى.

ما هي محددات المواقع في Selenium؟

في اختبار Selenium، يحدد محدد موقع عنصر HTML من DOM (نموذج عنصر المستند) للعمل عليه. فكر في DOM كتمثيل شجرة أو رسم بياني لمستند HTML. تمثل كل عقدة في DOM جزءا من المستند.

في اختبار Selenium، يمكنك تحديد موقع عنصر HTML من خلال:

• سمة id.
• سمة name.
• تعبير XPath.
• ربط نص أو نص ارتباط جزئي.
• اسم العلامة، مثل body أو h1.
• اسم فئة CSS.
• محدد CSS.

يعتمد محدد الموقع الذي تستخدمه على الطريقة التي تتم بها كتابة تعليمات HTML البرمجية وأنواع الاستعلامات التي تريد تنفيذها.

في مستند HTML، تحدد السمة id معرفا فريدا لعنصر HTML. هنا، ستستخدم السمة id للاستعلام عن العناصر الموجودة على الصفحة لأن كل معرف يجب أن يكون فريدا. وهذا يجعل السمة id واحدة من أسهل الطرق للاستعلام عن العناصر في اختبار Selenium.

الحصول على المعرف لكل عنصر HTML

هنا، يمكنك المتابعة مع أميتا وأندي أثناء جمعهما للمعرف لكل زر تنقر عليه أميتا ولكل نافذة مشروطة ناتجة.

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

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

لنبدأ بالحصول على سمة id للزر Download game.

إشعار

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

1. في Google Chrome، انتقل إلى صفحة Space Game الرئيسية.

2. انقر بزر الماوس الأيمن فوق الزر تنزيل اللعبة ، ثم حدد فحص.

   يتم فتح نافذة أدوات المطور. يتم تمييز التعليمات البرمجية HTML لزر تنزيل اللعبة .

3. افحص التعليمات البرمجية المميزة ولاحظ السمة id . انسخ id ل في وقت لاحق.

   

4. حدد زر تنزيل اللعبة. ثم كرر الخطوتين 2 و3 للحصول على السمة id للنافذة المشروطة التي تظهر.

5. كرر العملية لشاشات اللعبة الأربع وأعلى لاعب على لوحة المتصدرين.

تفتح أميتا Microsoft Word وتضيف جدولا. يحتوي الجدول على السمة id لكل ارتباط وسمة id النافذة المشروطة المقابلة. للاحتفاظ بالجدول الأساسي، سجلات أميتا:

• زر تنزيل اللعبة.
• واحدة فقط من شاشات اللعبة.
• أفضل لاعب على لوحة المتصدرين.

إليك ما يبدو عليه جدول أميتا:

ميزة	الارتباط id	مشروط id
زر تنزيل اللعبة	download-btn	pretend-modal
شاشة اللعبة الأولى	screen-01	screen-modal
أفضل لاعب في لوحة المتصدرين	profile-1	profile-modal-1

تخطيط الاختبارات التلقائية

أميتا: موافق. لدينا السمة id لكل زر أقوم بالنقر فوقه. لدينا أيضا النافذة المشروطة الناتجة. وماذا بعد؟

أندي: أعتقد أننا مستعدون لكتابة اختباراتنا. إليك ما سنفعله:

1. إنشاء مشروع NUnit يتضمن Selenium. سيتم تخزين المشروع في الدليل جنبا إلى جنب مع التعليمات البرمجية المصدر للتطبيق.
2. اكتب حالة اختبار تستخدم التشغيل التلقائي للنقر فوق الارتباط المحدد. تتحقق حالة الاختبار من ظهور النافذة المشروطة المتوقعة.
3. استخدم السمة التي id حفظناها لتحديد المعلمات لأسلوب حالة الاختبار. تنشئ هذه المهمة تسلسلا أو سلسلة من الاختبارات.
4. تكوين الاختبارات لتشغيلها على Chrome وFirefox وMicrosoft Edge. تنشئ هذه المهمة مصفوفة من الاختبارات.
5. قم بإجراء الاختبارات وشاهد كل مستعرض ويب يظهر تلقائيا.
6. شاهد Selenium يعمل تلقائيا من خلال سلسلة الاختبارات لكل متصفح.
7. في نافذة وحدة التحكم، تحقق من اجتياز جميع الاختبارات.

أميتا: سأكون متحمسا لمعرفة مدى سرعة تشغيل الاختبارات. هل يمكننا تجربة الاختبارات الآن؟

أندي: بالتأكيد. دعونا ننتقل إلى جهاز الكمبيوتر المحمول الخاص بي. لدي رمز التطبيق جاهز.