قائمة مرجعية عملية لاختبار التوافق بين المتصفحات
قد يبدو التنسيق مثاليًا في متصفح ما، بينما ينهار في متصفح آخر. هاتف Android اقتصادي بشاشة ضيقة أو كمبيوتر محمول قديم بمستوى تكبير 125% يمكن أن يفسد تصميمك.
لا تتعامل مع الاختبار كمجرد مراجعة نهائية غامضة، بل تعامل معه كقائمة مرجعية محددة.
ركز على المناطق عالية المخاطر:
- النماذج وحقول الإدخال
- قوائم التنقل
- إزاحة التنسيق
- تحميل الخطوط
- تفاعلات JavaScript
توقف عن محاولة اختبار كل متصفح على حدة، فهذا يضيع الوقت. استخدم مصفوفة رشيقة بدلاً من ذلك:
- متصفح Chromium واحد على سطح المكتب
- بيئة Safari واحدة
- بيئة Firefox واحدة
- هاتف Android واحد
- هاتف iPhone واحد
اربط اختباراتك بكيفية استخدام الناس لمنتجك فعليًا. لا تحتاج الصفحة لأن تبدو متطابقة في كل مكان، بل يجب أن تكون قابلة للاستخدام، وسهلة القراءة، ومستقرة.
يجب أن تتضمن قائمتك المرجعية ما يلي:
- المتصفح ونظام التشغيل
- عرض نافذة العرض (Viewport width)
- مستوى التكبير
- تدفقات مستخدم محددة
اجعل القائمة قصيرة. إذا استغرق الاختبار نصف يوم، فسيتجاهله فريقك. يجب أن تستغرق المراجعة الشاملة الجيدة أقل من ساعة واحدة.
ابدأ بالهيكل. تحقق من الصفحة الرئيسية، وصفحات المحتوى، والنماذج. قم بتغيير حجم نافذتك من عرض سطح المكتب إلى عرض الهاتف المحمول. قم بالتكبير، وانتبه للمشكلات التالية:
- الأزرار التي تلتف بشكل غير متناسق
- العناوين التي يتم قطعها
- التمرير الأفقي
- الرؤوس المثبتة (Sticky headers) التي تغطي المحتوى
- النوافذ المنبثقة (Modals) التي تخفي عناصر التحكم المهمة
بعد ذلك، اختبر التفاعلات. تتعامل المتصفحات مع النماذج بشكل مختلف. اختبر حقول إدخال النص، ومديري كلمات المرور، ومختارات التاريخ، ورفع الملفات. تحقق من كيفية تأثير ميزة التعبئة التلقائية (autofill) على التنسيق الخاص بك.
اختبر المكونات التي تعتمد بكثافة على JavaScript مثل التبويبات (tabs)، والقوائم المنسدلة (accordions)، واقتراحات البحث. قد لا تظهر الصفحة أي أخطاء في وحدة التحكم (console) ولكن قد يظل هناك زر معطل.
أخيرًا، قم بإجراء اختبار جهد (stress test) لموقعك:
- تقليل سرعة الشبكة (Throttle)
- تعطيل ذاكرة التخزين المؤقت (cache)
- استخدام نصوص طويلة جدًا في حقول الإدخال
- تحميل عناصر أكثر من المعتاد للتحقق من تجاوز المحتوى (overflow)
أفضل قائمة مرجعية هي القائمة المملة. يجب أن تكون قائمة بسيطة تعتمد على "النجاح" أو "الفشل". استخدمها في كل مرة تقوم فيها بالإصدار. عندما يتسلل خطأ إلى بيئة الإنتاج (production)، أضف ذلك الفشل المحدد إلى قائمتك المرجعية.
القائمة المرجعية تكون مفيدة فقط إذا كانت تذكر ما نسيه فريقك.
Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a