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

من قبل: توماس هاميلتون توماس هاميلتون
Hours تحديث

⚡ ملخص ذكي

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

  • 🔘 النطاق أولاً: تُحدد الخطة المكتوبة المتصفحات وأنظمة التشغيل والأجهزة التي يتم تغطيتها قبل بدء كتابة البرامج النصية.
  • ☑️ ثلاثة محفزات: تراجع CSS، Javaتُعدّ أعطال البرامج النصية وفحوصات الأداء من العوامل الرئيسية التي تُشغّل معظم مجموعات برامج الواجهة الأمامية.
  • ✅ أجنحة متعددة الطبقات: تكشف فحوصات الوحدة والمكونات والفحص الشامل والتراجع البصري وفحوصات إمكانية الوصول عن فشل مختلف.
  • 🧪 مزيج الأدوات: ياسمين Seleniumوتتواجد أدوات CSSLint و BackstopJS جنبًا إلى جنب مع Jest. Cypress وكاتب مسرحي.
  • 🛠️ جولات أسرع: المتصفحات بدون واجهة رسومية، وتقليل عرض DOM، وحالات الاختبار المعزولة تقصر كل دورة اختبار تراجعي.
  • 📈 التركيز على الأداء: تُظهر مؤشرات الأداء الرئيسية للويب التي تم قياسها باستخدام PageSpeed ​​Insights ما إذا كانت واجهة المستخدم تصل إلى المستخدمين بسرعة.
اقرأ المزيد

اختبار واجهة المستخدم الرسومية ووظائفها وسهولة استخدامها في تطبيق ويب

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

اختبار الواجهة الأمامية هي تقنية اختبار يتم فيها واجهة المستخدم الرسومية (واجهة المستخدم الرسومية)، ووظائفها وسهولة استخدامها تطبيق ويب يتم اختبارها. والهدف هو التأكد من أن طبقة العرض تظل خالية من العيوب من خلال التحديثات المتتالية.

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

إلى جانب ذلك، يتم إجراء اختبارات الواجهة الأمامية لما يلي:

  • اختبار الانحدار في CSS: تغييرات طفيفة في CSS تؤدي إلى تعطيل تصميم الواجهة الأمامية.
  • Javaتغييرات البرنامج النصي مما يجعل الواجهة الأمامية غير فعالة.
  • فحوصات الأداء حول مدى سرعة سهولة استخدام واجهة المستخدم.

كيفية إنشاء خطة اختبار موقع الواجهة الأمامية؟

إنشاء خطة اختبار الواجهة الأمامية هو عملية بسيطة تتكون من أربع خطوات.

الخطوة 1) اكتشف الأدوات اللازمة لإدارة خطة الاختبار الخاصة بك.

الخطوة 2) حدد ميزانية اختبار الواجهة الأمامية.

الخطوة 3) حدد الجدول الزمني للعملية بأكملها.

الخطوة 4) حدد نطاق المشروع. يشمل النطاق ما يلي:

  • Operaأنظمة التشغيل والمتصفحات التي يستخدمها المستخدمون
  • الأجهزة الشائعة التي يستخدمها الجمهور
  • الكفاءة التقنية للجمهور
  • سرعة اتصال الإنترنت لدى الجمهور

لماذا يجب إنشاء خطة اختبار الواجهة الأمامية؟

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

خطة اختبار الواجهة الأمامية التي تغطي المتصفحات وأنظمة التشغيل المشمولة

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

تُحقق الخطة ميزتين واضحتين:

  • فهو يوضح نطاق المشروع بشكل كامل.
  • يمنح ذلك الثقة عند تنفيذ المشروع.

نصائح لتحسين اختبار واجهة المستخدم

نصائح لبناء خطة اختبار أفضل للواجهة الأمامية:

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

ذات المواد

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

لا توجد أداة واحدة تغطي البرمجة النصية وأوراق الأنماط والرسومات، لذلك تقوم الفرق بدمج عدة أدوات.

أداة اختبار جافا سكريبت: جاسمين

الياسمين هو إطار عمل لتطوير الاختبارات يعتمد على السلوك Javaسيناريو يركز هذا النوع من البرمجة على القيمة التجارية بدلاً من التفاصيل التقنية، ويتميز ببنية نحوية واضحة، ولا يعتمد على أي إطار عمل آخر. وقد استُخدمت فيه أطر اختبار الوحدات مثل JSSpec وScrewUnit وJSpec وRSpec. أما Jest وVitest فهما البديلان الأكثر استخدامًا اليوم.

أداة الاختبار الوظيفي: Selenium

Selenium يُجري اختبارات شاملة عبر المتصفحات والمنصات مثل Windows, macOS ونظام لينكس، ويتيح لك كتابة الاختبارات في Java, Python، ولغة C# وغيرها من اللغات. Selenium IDE يضيف التسجيل والتشغيل، لذا فإن البرنامج النصي الأول لا يحتاج إلى أي كود. Cypress ويغطي الكاتب المسرحي نفس الموضوع مع انتظار مدمج و tracجي.

أدوات CSS والأدوات المرئية: CSSLint و BackstopJS

CSLint هو برنامج تدقيق مفتوح المصدر مكتوب بلغة Javaبرنامج نصي يعمل في المتصفح ومن سطر الأوامر. لم يعد يتم تحديثه بشكل فعال، لذا تستخدم الفرق الآن أدوات مثل Stylelint أو دعم CSS الخاص بـ ESLint لفحص أنماط CSS.

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

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

  • اختبار الأتمتة يتطلب الأمر الكثير من الجهد في المرحلة الأولية.
  • قد تواجه الأدوات مشاكل في التوافق مع أنظمة تشغيل معينة وإصدارات متصفحات محددة.

تحسين أداء الواجهة الأمامية

يجيب اختبار أداء الواجهة الأمامية على سؤال واحد: ما مدى سرعة تحميل الصفحة وسرعة استخدامها؟ يُعدّ ضبطها لمستخدم واحد ممارسة جيدة قبل أن يواجه التطبيق ضغطًا عاليًا. اختبار أداء.

ما أهمية تحسين أداء الواجهة الأمامية؟

كان تحسين الأداء يعني في السابق ضبط الخادم، لأن معظم مواقع الويب كانت ثابتة وكانت المعالجة تتم من جانب الخادم.

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

ما فائدة تحسين أداء الواجهة الأمامية؟

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

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

1. PageSpeed ​​Insights

PageSpeed ​​البصائر is Googleخدمة تحليل الصفحات المجانية من جوجل. تُجري هذه الخدمة تدقيقًا باستخدام Lighthouse، وتقدم تقارير عن مؤشرات الأداء الرئيسية للويب، بالإضافة إلى اقتراحات لتحسين وقت التحميل. كما يتوفر Lighthouse ضمن أدوات مطوري Chrome.

2. Pingdom

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

المميزات:

  • يفحص جميع أجزاء صفحة الويب
  • يقدم نظرة عامة على الأداء
  • Tracسجل أدائك
  • يسمح لك بالاختبار من مواقع متعددة

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

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

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

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

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

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

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

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

دع التحليلات تُقرر. غطِّ المتصفحات والإصدارات وأحجام الشاشات التي تحمل معظم الزيارات الفعلية، وأضف خط أساس قديم واحد، وتعامل مع الباقي كفحوصات عشوائية أثناء اختبار المحمول.

تلخيص هذه التدوينة بـ: