مفاهيم اختبار الانحدار البصري

يكتشف اختبار الانحدار البصري (VRT) تلقائيًا التغيّرات المرئية غير المقصودة بين إصدارات الشيفرة من خلال مقارنة لقطات الشاشة الناتجة بكسلًا ببكسل. ويكشف تراجعات CSS — مثل تغيّرات التخطيط والألوان وتكسّر المسافات — التي لا تلتقطها اختبارات الوحدات إطلاقًا.

يلتقط VRT لقطات شاشة مرجعية للمكونات أو الصفحات، ثم يلتقط لقطات جديدة بعد تغييرات الشيفرة ويقارن بينها. وتُبرز الفروقات في صورة للفروقات. يراجع المطورون الفروقات، ثم يعتمدون التغيّرات المقصودة أو يصلحون التراجعات غير المقصودة.

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

تصبح لقطات الشاشة المعتمدة المرجع الجديد. خزّن المراجع في نظام التحكم بالإصدارات (استخدم Git LFS للصور الكبيرة) أو في خدمة سحابية مخصصة. يعرض كل PR الفروقات مقارنةً بالمرجع، ويعتمد المسؤولون التغيّرات المرئية أو يرفضونها ضمن عملية المراجعة.

تختبر اختبارات VRT على مستوى المكوّنات مكونات واجهة المستخدم الفردية بمعزل عن غيرها (عبر Storybook). أما اختبارات VRT على مستوى الصفحة فتختبر صفحات كاملة في متصفح حقيقي. وتكون اختبارات المكونات أسرع وأكثر استهدافًا، بينما تكشف اختبارات الصفحات مشكلات التخطيط على مستوى التكامل بين المكونات.

اختبر جميع الحالات المرئية: الافتراضية، والتحويم، والتركيز، والنشطة، والمعطلة، والتحميل، والخطأ، والفارغة، والممتلئة. تتطلب حالات التحويم محاكاة JavaScript ‏(`page.hover()` في Playwright). يؤدي نقص تغطية الحالات إلى نقاط عمياء تسمح بمرور التراجعات في الحالات التفاعلية.

اعرض لقطات الشاشة في متصفحات متعددة (Chrome وFirefox وSafari) وأحجام إطارات عرض متعددة (الهاتف المحمول واللوحي وسطح المكتب). قد تسبب اختلافات عرض المتصفحات إيجابيات كاذبة، لذا استخدم مراجع خاصة بكل متصفح واضبط حدود الفروقات للتسامح مع اختلافات العرض المعروفة.

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

يسبب المحتوى الديناميكي — مثل الطوابع الزمنية وصور المستخدمين الرمزية والإعلانات والبيانات العشوائية — إيجابيات كاذبة. أخفِ المناطق الديناميكية بتراكب بلون موحد قبل التقاط لقطة الشاشة. تدعم معظم أدوات VRT محددات العناصر المستخدمة للإخفاء.

شغّل VRT في CI مع كل PR. اجعل عملية البناء تفشل عند اكتشاف فروقات مرئية غير معتمدة. وجّه الفروقات المرئية إلى مراجعي التصميم، لا إلى فريق الهندسة وحده، فالتغيّرات المرئية مسألة تصميم بقدر ما هي مسألة هندسية.

يحقق VRT أعلى عائد على الاستثمار في مكتبات المكونات وأنظمة التصميم، حيث يمثل الاتساق المرئي ميزة من ميزات المنتج. أما في صفحات التسويق التي تتغير باستمرار، فقد تتجاوز تكلفة صيانة المراجع قيمة اكتشاف التراجعات.

لماذا تنتج اختبارات الانحدار البصري إيجابيات كاذبة بسبب اختلافات عرض الخطوط؟

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