اختبار واجهة المستخدم الرسومية: حالات اختبار واجهة المستخدم وأمثلة

لفهم اختبار واجهة المستخدم الرسومية، دعونا أولاً نفهم ما هي واجهة المستخدم الرسومية.

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

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

فيما يلي عناصر واجهة المستخدم الرسومية التي يمكن استخدامها للتفاعل بين المستخدم والتطبيق:

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

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

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

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

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

• الروابط متاحة، وكل زر يعمل عند النقر عليه.
• لا يؤدي تغيير حجم الشاشة أبدًا إلى تقليص حجم الصور أو النصوص أو اقتصاصها أو تداخلها.
• لا ينهار أي شيء في التصميم عند تصغير نافذة المتصفح.

💡 نصيحة: قم بتشغيل نفس الصفحة بدقة 1920×1080 و1366×768 و375×812 قبل تسجيل أي عيب. العديد من تقارير "التصميم المعطل" هي ببساطة نقاط توقف غير مختبرة.

الحاجة إلى اختبار واجهة المستخدم الرسومية

الآن أصبح المفهوم الأساسي لاختبار واجهة المستخدم الرسومية واضحًا. ستتبادر إلى ذهنك بعض الأسئلة التالية:

• لماذا اختبار واجهة المستخدم الرسومية؟
• هل هناك حاجة حقا؟
• ألا يكفي اختبار وظائف ومنطق التطبيق بمفرده، ولماذا نقضي وقتاً إضافياً على واجهة المستخدم؟

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

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

أنواع اختبار واجهة المستخدم الرسومية

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

• اختبار واجهة المستخدم الرسومية الوظيفية: يؤكد أن كل عنصر تحكم يؤدي وظيفته كما هو مُعلن. يرتبط ارتباطًا وثيقًا بـ الاختبار الوظيفييسأل عما إذا كان الزر يقوم بالإرسال، والقائمة المنسدلة تقوم بالتصفية، والحقل يقبل مدخلات صحيحة.
• اختبار قابلية الاستخدام: يقيس مدى سهولة إنجاز شخص حقيقي لمهمة ما. اختبار قابلية الاستخدام يتناول هذا البحث عمق التنقل وسهولة القراءة وما إذا كانت رسائل الخطأ مفيدة بالفعل.
• اختبار التوافق: يكرر نفس الشاشات عبر المتصفحات وأنظمة التشغيل وأحجام الأجهزة. عبر اختبار المتصفح يكتشف أخطاء العرض التي تظهر فقط في محرك واحد.
• اختبار إمكانية الوصول: يتحقق من التنقل باستخدام لوحة المفاتيح، وتسميات قارئ الشاشة، وتباين الألوان وفقًا لمعايير WCAG. اختبار الوصول أصبح الآن شرطًا للامتثال في العديد من الأسواق، وليس أمرًا اختياريًا إضافيًا.
• الاختبارات البصرية واختبارات الأداء: يقارن لقطات الشاشة المُعالجة بخط أساسي ويقيس سرعة عرض واجهة المستخدم واستجابتها، مع مراعاة التداخل.ping مع اختبار أداء.

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

ما الذي تتحقق منه في اختبار واجهة المستخدم الرسومية؟

ستضمن القائمة التالية إجراء اختبار مفصل لواجهة المستخدم الرسومية في اختبار البرمجيات.

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

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

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

الاختبار القائم على الدليل

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

سجل واعادتها

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

الاختبار القائم على النموذج

النموذج هو وصف بياني لسلوك النظام. يساعدنا على فهم سلوك النظام والتنبؤ به. كما تُسهم النماذج في توليد حالات اختبار فعّالة بالاستناد إلى متطلبات النظام. يوضح الرسم البياني أدناه كيف يُسهم النموذج في توليد الاختبارات:

يجب مراعاة ما يلي في هذا الاختبار القائم على النموذج:

• قم ببناء النموذج
• تحديد المدخلات للنموذج
• احسب المخرجات المتوقعة للنموذج
• قم بإجراء الاختبارات
• قارن الناتج الفعلي مع الناتج المتوقع
• قرار بشأن مزيد من الإجراءات على النموذج

بعض تقنيات النمذجة التي يمكن استخلاص حالات الاختبار منها:

• الرسوم البيانية – تصور حالة النظام وتتحقق من الحالة بعد بعض الإدخال.
• جداول القرار - الجداول المستخدمة لتحديد النتائج لكل مدخلات مطبقة

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

اختبار واجهة المستخدم الرسومية يدويًا مقابل آليًا

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

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

عامل	اختبار واجهة المستخدم الرسومية يدويًا	اختبار واجهة المستخدم الرسومية الآلي
أفضل ل	شاشات جديدة، وفحوصات استكشافية، ومظهر جديد	مجموعات اختبار الانحدار المستقرة، عمليات التشغيل عبر المتصفحات
السرعة لكل دورة	بطيء، ومحدود بساعات الاختبار	سريع، ويعمل دون مراقبة طوال الليل
تكلفة مقدما	منخفض	مستوى عالٍ (كتابة البرامج النصية وإعداد الإطار)
الدورية	لا شيء يتجاوز تحديث قائمة التحقق	يُعدّ هذا الأمر بالغ الأهمية عند تغيير واجهة المستخدم.
يتناول القضايا الذاتية	نعم	لا

أمثلة على حالات اختبار اختبار واجهة المستخدم الرسومية

يتضمن اختبار واجهة المستخدم الرسومية بشكل أساسي

1. اختبار حجم العناصر وموضعها وعرضها وارتفاعها.
2. اختبار رسائل الخطأ التي يتم عرضها.
3. اختبار أقسام مختلفة من الشاشة.
4. اختبار الخط هل هو قابل للقراءة أم لا.
5. اختبار الشاشة بدقة مختلفة بمساعدة التكبير والتصغير مثل 640 × 480، 600 × 800، وما إلى ذلك.
6. اختبار محاذاة النصوص والعناصر الأخرى مثل الرموز والأزرار وما إلى ذلك في مكانها الصحيح أم لا.
7. اختبار ألوان الخطوط.
8. اختبار ألوان رسائل الخطأ والرسائل التحذيرية.
9. اختبار ما إذا كانت الصورة تتمتع بوضوح جيد أم لا.
10. اختبار محاذاة الصور.
11. اختبار الإملاء.
12. يجب ألا يشعر المستخدم بالإحباط أثناء استخدام واجهة النظام.
13. اختبار ما إذا كانت الواجهة فيtracفعال أم لا.
14. اختبار أشرطة التمرير حسب حجم الصفحة إن وجدت.
15. اختبار الحقول المعطلة إن وجدت.
16. اختبار حجم الصور.
17. اختبار العناوين هل تمت محاذاتها بشكل صحيح أم لا.
18. اختبار لون الارتباط التشعبي.

العرض التوضيحي: كيفية إجراء اختبار واجهة المستخدم الرسومية

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

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

حالة الاختبار 01 - تحقق من أن مربع النص الذي يحمل التسمية "المجلد المصدر" محاذاة بشكل صحيح.

حالة الاختبار 02 - تحقق من أن مربع النص الذي يحمل التسمية "فئة الإشتراك" محاذاة بشكل صحيح.

حالة الاختبار 03 - تحقق من الملصق الذي يحمل الاسم "تصفح" هو الزر الموجود في نهاية النصBox باسم "المجلد المصدر".

حالة الاختبار 04 - تحقق من الملصق الذي يحمل الاسم "تصفح" هو الزر الموجود في نهاية النصBox باسم "فئة الإشتراك".

حالة الاختبار 05 - تحقق من أن مربع النص الذي يحمل التسمية "الاسم" محاذاة بشكل صحيح.

حالة الاختبار 06 - تحقق من أن الملصق "الصفات التعريفية"يتكون من 4 أزرار اختيار تحمل الاسم عام، افتراضي، خاص، محمي.

حالة الاختبار 07 - تحقق من أن الملصق "الصفات التعريفية" يتكون من 4 أزرار اختيار تمت محاذاتها بشكل صحيح على التوالي.

حالة الاختبار 08 - تحقق من أن الملصق "الفئة الفائقة""تحت التسمية""الصفات التعريفية"يتكون من قائمة منسدلة يجب محاذاتها بشكل صحيح.

حالة الاختبار 09 - تحقق من أن الملصق "الفئة الفائقة" يتكون من زر يحمل التسمية "تصفح"عليها والتي يجب محاذاتها بشكل صحيح.

حالة الاختبار 10 – تحقق من أنه عند النقر على أي زر اختيار، يجب تغيير مؤشر الماوس الافتراضي إلى مؤشر الماوس على شكل يد.

حالة الاختبار 11 – تحقق من أنه لا يمكن للمستخدم الكتابة في القائمة المنسدلة لـ "الفئة الفائقة".

حالة الاختبار 12 - تحقق من وجود خطأ مناسب يتم إنشاؤه في حالة اختيار شيء ما عن طريق الخطأ.

حالة الاختبار 13 - تحقق من أنه يجب إنشاء الخطأ باللون الأحمر أينما كان ذلك ضرورياً.

حالة الاختبار 14 – تحقق من ضرورة استخدام التسميات المناسبة في رسائل الخطأ.

حالة الاختبار 15 – تحقق من أنه يجب تحديد أزرار الاختيار الفردية بشكل افتراضي في كل مرة.

حالة الاختبار 16 - تأكد من أن زر TAB يعمل بشكل صحيح أثناء القفزping في حقل آخر مجاور للحقل السابق.

حالة الاختبار 17 – تأكد من أن جميع الصفحات تحتوي على العنوان الصحيح.

حالة الاختبار 18 – تأكد من محاذاة نص الصفحة بشكل صحيح.

حالة الاختبار 19 – تحقق من أنه بعد تحديث أي حقل، يجب عرض رسالة تأكيد مناسبة.

حالة الاختبار 20 – تحقق من أنه يجب تحديد زر اختيار واحد فقط، ويمكن تحديد أكثر من مربع اختيار واحد.

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

كتابة تلك القضايا أمر بسيط؛ احتفظping لا يُعدّ استمرارها على مدى عدة إصدارات أمرًا ضروريًا. في هندسة البرمجيات، تكمن المشكلة الأكثر شيوعًا أثناء القيام بذلك. اختبار الانحدار هو أن واجهة المستخدم الرسومية للتطبيق تتغير بشكل متكرر. من الصعب جدًا اختبارها وتحديد ما إذا كانت مشكلة أم تحسينًا. تظهر المشكلة عندما لا يكون لديك أي مستندات تتعلق بتغييرات واجهة المستخدم الرسومية.

⚠️ تحذير: ستفشل البرامج النصية التي تحدد مواقع العناصر باستخدام إحداثيات الشاشة أو المعرفات المُنشأة تلقائيًا في الإصدار التالي. لذا، تعامل مع استراتيجية تحديد المواقع كجزء أساسي من التصميم، وليس كإضافة لاحقة.

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

تُساهم الأدوات المناسبة في تقليل الكثير من هذا الاضطراب. فيما يلي قائمة بالأدوات الشائعة أدوات اختبار واجهة المستخدم الرسومية :

1. Selenium
2. QTP
3. Cucumber
4. اختبار الحرير
5. TestComplete
6. إسحق اختبار واجهة المستخدم الرسومية

انقر هنا للتعلم Selenium, QTP & Cucumber.

فيما يلي أدوات مفتوحة المصدر متاحة لإجراء اختبار واجهة المستخدم التلقائي.

المنتج	مرخص بموجب
AutoHotkey	GPL
Selenium	Apache
Sikuli	معهد ماساتشوستس للتكنولوجيا
إطار الروبوت	Apache
مياه	BSD
مجموعة أدوات دوجو	BSD

Sikuli يعتمد على الصور، وهو مفيد عندما لا يكون لعنصر التحكم محدد موقع موثوق به؛ Selenium يبقى الوضع الافتراضي لـ اختبار تطبيقات الويب.

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