قائمة فحص الاختبار البصري قبل الإصدار: 15 نقطة للتحقق قبل كل نشر
التحقق البصري قبل الإصدار: عملية منهجية للتحكم في مظهر التطبيق — التخطيط والألوان والطباعة والمسافات والتوافق بين المتصفحات والاستجابة — تُجرى قبل كل إطلاق إنتاجي لضمان عدم وصول أي انحدار بصري للمستخدمين.
احفظ هذه الصفحة في المفضلة. اطبعها. علّقها على جدار مكتبك (إن كان لديك واحد). وشمها على ساعدك إذا لزم الأمر. لأن هذه القائمة هي الفرق بين نشر هادئ وأمسية جمعة تقضيها في إصلاح زر دفع أصبح غير مرئي في الإنتاج.
كل نقطة في هذه القائمة اختيرت لأنها تمثل انحدارًا بصريًا حقيقيًا تركته فرق تمر إلى الإنتاج. ليست حالات نظرية. أخطاء فعلية بتذاكر دعم حقيقية وإصلاحات طوارئ. الهدف ليس إرهابك — رغم أن جرعة صحية من الخوف قبل النشر لم تضر أحدًا — بل إعطاؤك عملية قابلة للتكرار تلتقط المشاكل قبل مستخدميك.
قبل القائمة: العقلية
القائمة لا تنفع إذا طُبقت آليًا دون فهم سبب وجود كل نقطة. إليك المبدأ التوجيهي: الاختبار البصري قبل الإصدار يتحقق من أن ما يراه المستخدم يطابق ما صممه الفريق. ليس أن التطبيق "يعمل" — اختباراتك الوظيفية تغطي ذلك. ليس أن الكود نظيف — مراجعة الكود تغطي ذلك. أن التطبيق يبدو صحيحًا على كل شاشة وفي كل متصفح ومع كل نوع من المحتوى.
النقطة 1: التحقق من صفحات الزيارات العالية
الصفحات الأكثر زيارة هي حيث يكون تأثير الانحدار البصري أكبر. حدد أكثر 10 صفحات زيارة والتقط لقطة شاشة لكل منها في بيئة الاختبار وقارنها بالصورة المرجعية في الإنتاج.
النقطة 2: التحقق من صفحات التحويل
صفحات التحويل — التسجيل والشراء والاشتراك — هي حيث تتحقق إيراداتك. تحقق من كل خطوة في مسار التحويل.
النقطة 3: الاختبار على ثلاثة أحجام شاشة حرجة
ثلاث دقات تغطي 90% من الحالات: سطح المكتب (1920×1080)، الجهاز اللوحي (768×1024)، والجوال (375×812).
النقطة 4: التوافق بين المتصفحات Chrome وFirefox وSafari
اختبر أهم 5 صفحات على المتصفحات الثلاثة. هذه 15 مقارنة كافية لالتقاط أخطر مشاكل التوافق.
النقطة 5: التحقق من الصور المرجعية الحالية
تأكد من أن صورك المرجعية محدّثة. الصور المرجعية القديمة تولّد إنذارات كاذبة تقتل الثقة في العملية.
Delta-QA يسهّل هذا بسير عمل موافقة مدمج: عندما يكون التغيير مقصودًا، توافق عليه بنقرة واحدة.
النقطة 6: إدارة المحتوى الديناميكي
المحتوى الديناميكي — التواريخ والعدادات والصور الشخصية والإعلانات — يتغير بين كل لقطة. لكل منطقة ديناميكية، اضبط منطقة استبعاد. Delta-QA يتيح لك تحديد هذه المناطق بيانيًا.
النقطة 7: التحقق من تحميل خطوط الويب
خطوط الويب مصدر مُقلّل من قدره للانحدارات البصرية. التقط صفحاتك بعد اكتمال تحميل الخطوط. Delta-QA ينتظر تلقائيًا تحميل الخطوط قبل الالتقاط.
النقطة 8: اختبار النماذج في حالاتها المختلفة
النموذج له 4 حالات بصرية على الأقل: فارغ، مملوء، خطأ التحقق، وإرسال ناجح. التقط جميع الحالات الأربع لكل نموذج حرج.
النقطة 9: التحقق من مسار الشراء من البداية للنهاية
تحقق بصريًا من كل خطوة: صفحة المنتج، السلة، صفحة الدفع، صفحة التأكيد. الأسعار يجب أن تكون مقروءة، شارات الأمان مرئية، أزرار الإجراء في حالتها الصحيحة.
النقطة 10: التحقق من مكونات نظام التصميم
تحقق من أن المكونات الأساسية لم تتغير. تعديل متغير CSS في نظام التصميم يمكن أن يمتد لعشرات الصفحات.
النقطة 11: الاختبار بمحتوى طويل وقصير
المحتوى المتطرف يكشف أخطاء التخطيط التي يخفيها المحتوى "المتوسط". أنشئ حالات اختبار بمحتوى متطرف وقارن.
النقطة 12: التحقق من الحالات الفارغة وحالات الخطأ
التقط بصريًا: صفحات 404 و500، الحالات الفارغة لأقسامك الرئيسية، رسائل خطأ النماذج، لافتات التنبيه.
النقطة 13: التحقق من الوضع الداكن (إذا كان متاحًا)
إذا كان تطبيقك يوفر وضعًا داكنًا، يجب اختباره بنفس الصرامة. أكثر من 80% من مستخدمي Android يفعّلونه.
النقطة 14: مقارنة بيئة الاختبار والإنتاج بصريًا
التقط لقطة شاشة في بيئة الاختبار وفي الإنتاج. قارن بينهما. إذا لم تستطع تفسير كل فرق، فأنت لست مستعدًا للنشر.
النقطة 15: توثيق وأرشفة النتائج
أرشف النتائج: أي صفحات فُحصت، أي فروقات وُجدت، أيها وُوفق عليه، وأيها أعاق النشر. Delta-QA يحفظ تاريخ جميع المقارنات.
القائمة الملخصة
1. صفحات الزيارات العالية — أعلى 10 صفحات زيارة. 2. صفحات التحويل — كل خطوة في المسار. 3. ثلاث دقات — سطح المكتب، جهاز لوحي، جوال. 4. ثلاثة متصفحات — Chrome وFirefox وSafari على أهم 5 صفحات. 5. صور مرجعية محدّثة — تعكس الحالة المطلوبة. 6. محتوى ديناميكي — مناطق استبعاد مضبوطة. 7. خطوط الويب — تحميل مُتحقق منه. 8. النماذج (4 حالات) — فارغ، مملوء، خطأ، نجاح. 9. مسار الشراء — كل خطوة، أسعار مقروءة، أمان مرئي. 10. نظام التصميم — المكونات الأساسية مُتحقق منها. 11. محتوى متطرف — عناوين طويلة، أوصاف قصيرة. 12. حالات فارغة وأخطاء — صفحات 404/500، قوائم فارغة. 13. الوضع الداكن — نفس الفحوصات مثل الوضع الفاتح. 14. بيئة الاختبار مقابل الإنتاج — مقارنة مباشرة. 15. الأرشفة — نتائج موثّقة، فروقات موافق عليها أو مرفوضة.
كيفية أتمتة هذه القائمة
تطبيق هذه النقاط الخمس عشرة يدويًا يستغرق 2 إلى 4 ساعات. مع Delta-QA المؤتمت — 30 دقيقة. الإعداد الأولي (نصف يوم) يُسترد من الإصدار الثاني.
الأخطاء الأكثر شيوعًا
الاختبار على سطح المكتب فقط. الجوال يمثل أكثر من 50% من حركة الويب العالمية.
تجاهل Safari. Safari هو المتصفح الأكثر اختلافًا عن Chrome في عرض CSS.
عدم تحديث الصور المرجعية. صور قديمة → إنذارات كاذبة → فقدان الثقة → تجاهل التنبيهات → انحدارات في الإنتاج.
اختبار build التطوير بدلاً من build الإنتاج. تحسينات البناء يمكن أن تؤثر على العرض البصري.
عدم اختبار حالات الخطأ. حالة خطأ مكسورة بصريًا تدمر الثقة أكثر من خلل وظيفي مُعالج بشكل صحيح.
الأسئلة الشائعة
كم مرة يجب تطبيق هذه القائمة؟ قبل كل نشر في الإنتاج. كل نشر. بلا استثناء.
كم يستغرق الفحص الكامل؟ يدويًا 2-4 ساعات. مع Delta-QA، الالتقاط والمقارنة في دقائق والمراجعة في 15-30 دقيقة.
هل أمنع النشر بسبب خلل بصري بسيط؟ يعتمد على الخطورة والصفحة. زر غير مرئي في صفحة الدفع — بالتأكيد يمنع النشر.
هل تحل هذه القائمة محل الاختبارات الوظيفية؟ لا. تكملها. كلاهما ضروري.
كيف أرتّب الأولويات إذا لم يكن لدي وقت كافٍ؟ حسب تأثير الأعمال. النقاط 1 و2 و9 و3 تغطي الأقصى. 30 دقيقة — هذه النقاط الأربع.
هل يمكن لـ Delta-QA تنفيذ هذه القائمة تلقائيًا؟ نعم. تضبط الصفحات والدقات والمتصفحات ومناطق الاستبعاد مرة واحدة، ثم كل ما قبل الإصدار يعمل تلقائيًا.
الخاتمة: الجودة البصرية عملية وليست صدفة
التطبيقات التي تبدو مصقولة في كل إصدار لا تحققه بالحظ. تحققه لأن فريقًا وضع عملية منهجية للتحقق البصري ويطبقها بصرامة. هذه القائمة هي تلك العملية.
خمس عشرة نقطة. ثلاثون دقيقة إذا كانت مؤتمتة. الفرق بين "نأمل أن يسير الأمر" و"نعلم أنه جيد".