قائمة مرجعية عملية لاختبار توافق المتصفحات

قد يبدو التصميم مثاليًا في Chrome، ولكنه قد يتعطل على هاتف Android اقتصادي أو كمبيوتر محمول قديم مع تكبير بنسبة 125%.

لا تتعامل مع الاختبار كخطوة نهائية غامضة، بل تعامل معه كقائمة مرجعية قابلة للتكرار.

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

اختر هذه العناصر الأساسية:

  • متصفح Chromium واحد على سطح المكتب
  • بيئة Safari واحدة
  • بيئة Firefox واحدة
  • هاتف Android واحد
  • هاتف iPhone واحد

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

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

ابدأ بالهيكل:

  • افحص الصفحة الرئيسية، وصفحات المحتوى، والنماذج.
  • قم بتغيير الحجم من عرض سطح المكتب الواسع إلى عرض الهاتف المحمول الضيق.
  • قم بالتكبير للتحقق من التفاف الأزرار أو قص العناوين.
  • انتبه للتمرير الأفقي أو الرؤوس المثبتة (sticky headers) التي تغطي المحتوى.

بعد ذلك، اختبر التفاعلات:

  • قم بالتمرير من الأعلى إلى الأسفل.
  • افتح القوائم وقم بتشغيل النوافذ المنبثقة (modals).
  • تنقل عبر الصفحة باستخدام مفتاح Tab في لوحة المفاتيح.
  • اختبر النماذج التي تحتوي على حقول إدخال نصية، ومختارات التاريخ (date pickers)، ورفع الملفات.
  • تحقق مما إذا كانت ميزة الملء التلقائي (autofill) تؤدي إلى تخريب التصميم.

اختبر مكونات JavaScript:

  • تحقق من القوائم المنسدلة (accordions)، والتبويبات (tabs)، واقتراحات البحث.
  • انتبه لمشاكل التوقيت حيث يفشل السكريبت في الارتباط بزر ما.
  • اختبر إعادة تحميل الصفحة وسلوك زر الرجوع.

أخيرًا، اختبر الحدود تحت الضغط:

  • قم بتقليل سرعة الشبكة (throttle).
  • قم بتعطيل ذاكرة التخزين المؤقت (cache).
  • استخدم سلاسل نصية طويلة في حقول الإدخال.
  • تحقق من كيفية تأثير الجداول الكبيرة أو البطاقات الكثيرة على التصميم.

أفضل قائمة مرجعية هي تلك المملة؛ التي يمكن دمجها في عملية الإصدار الخاصة بك عبر مربعات بسيطة لـ "النجاح" أو "الفشل".

في كل مرة يتسلل فيها خطأ (bug) إلى بيئة الإنتاج، أضفه إلى قائمتك. تكتسب القائمة المرجعية قيمتها عندما تتذكر ما نسيه فريقك.

المصدر: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a