الانحدار البصري: لماذا تُفلِت المقارنة بكسل ببكسل تغييرات حقيقية

تعتمد معظم أدوات الانحدار البصري مفتوحة المصدر — BackstopJS وWraith أو فحوص لقطات الشاشة في Playwright وCypress — على الفكرة نفسها: التقاط لقطة شاشة قبل وبعد، ثم عدّ البكسلات التي تغيّرت. والمحرّك هو نفسه دائماً تقريباً: مقارنة الصورتين بكسلاً ببكسل.

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

إعدادان يجب ألا يُخلطا

الالتباس في كل مكان، فلنوضّح. لهذا النوع من الأدوات إعدادان مختلفان:

التسامح لكل بكسل: من أيّ فرق لوني يُعتبر أن البكسل قد تغيّر «فعلاً». إنه مقبض لحساسية اللون، يُطبَّق بكسلاً ببكسل.
عتبة القرار: بعد عدّ البكسلات المختلفة، يُنظر إلى أيّ نسبة من الصورة تغيّرت لتقرير ما إذا كان الاختبار ينجح أم يفشل. تضبطها الأداة المرجعية BackstopJS افتراضياً عند 0.1% من البكسلات.

يتّبع اختبارنا هذا المنطق بالضبط: نعدّ البكسلات المختلفة (الأداة على حساسيتها الافتراضية)، ثم نطبّق عتبة القرار البالغة 0.1% لنقول ينجح أم يفشل.

معضلة العتبة

تحبس هذه العتبة النسبية مقارنة الصورة الكاملة في مقايضة لا يمكنها الفوز بها:

بعتبة نسبية (الإعداد الافتراضي، 0.1%) → تُفلِت التغييرات الصغيرة الحقيقية. زر يغيّر لونه، حدّ يستدير، حالة خلية «OK» → «ERROR»: كل هذا يزن جزءاً ضئيلاً من البكسلات. تحت 0.1% يصبح الاختبار أخضر رغم أن الصفحة تغيّرت بوضوح. تغيير حقيقي يمرّ دون أن يُلاحَظ.
دون أيّ تسامح (الطرف الآخر، الإعداد الافتراضي لـ Playwright) → تفشل عند أدنى بكسل فرق، بما في ذلك مجرّد تنعيم الحواف — تلك البكسلات نصف الشفافة عند حواف الحروف والأشكال، التي تتغيّر قليلاً من عرض لآخر. النتيجة: إنذارات كاذبة بالجملة، وينتهي الفريق بتجاهل الأداة.

تقدّم الأدوات الحقيقية ضمانات — إخفاء مناطق، تجاهل مناطق، اقتصاص. وهي تعمل، لكن يجب ضبطها مسبقاً، يدوياً، منطقة بمنطقة. الحساسية الموضعية ليست تلقائية.

الاختبار في ظروف واقعية

قارنّا، على نفس الصفحة تماماً (مُصيَّرة بمتصفح، مُجمَّدة بشكل قابل للتكرار، عرض الشاشة 1280 px، التقاط الصفحة كاملة)، نهجين:

Delta-QA: مقارِننا الذي يقارن عنصراً بعنصر (يربط العناصر بين النسختين ولا يقارن البكسلات إلا على المستوى الأدقّ)؛
مقارنة الصورة الكاملة: نقارن اللقطتين بكسلاً ببكسل، ثم نطبّق عتبة القرار البالغة 0.1%.

خمس حالات اختيرت لكشف النقطة العمياء:

الحالة	التغيير	Delta-QA (عنصراً بعنصر)	مقارنة الصورة الكاملة (% البكسلات المتغيّرة، الحكم عند عتبة 0.1%)
إزاحة	مثلث يتحرك داخل الصفحة	إشارتان: `اختفى` + `ظهر` على العنصر	0.005% ← غير مُكتشَف
إعادة ترتيب	بطاقات وقائمة أُعيد ترتيبها	13 إشارة موضعية (أي بطاقات، أي عناصر)	0.63% ← يفشل، لكن كتلة منتشرة، دون تحديد أي شيء
تغيير دقيق	حدّ مستدير من 12 px إلى 30 px	إشارة واحدة على البطاقة المعنية	0.011% ← غير مُكتشَف
لون موضعي	رأس بطاقة أخضر ← بنفسجي	الرأس الصحيح (شدّة 0.996) + إشارتان أبويتان ضعيفتان	5.03% ← يفشل، لكن كتلة منتشرة، دون تحديد أي شيء
خلية جدول	حالة صف FAIL ← WARN	إشارتان قويتان على الصفوف الصحيحة	0.036% ← غير مُكتشَف

في هذه الحالات الخمس، تقع ثلاثة تغييرات حقيقية — إزاحة عنصر، استدارة حدّ، حالة خلية — تحت عتبة القرار القياسية البالغة 0.1%. أداة مضبوطة افتراضياً تعلنها «بلا تغيير». ومع ذلك فهذه بالضبط هي الانحدارات التي يُفترض أن يلتقطها الاختبار البصري.

أما في الحالتين اللتين «تكتشفهما» المقارنة بكسل ببكسل (إعادة الترتيب، اللون)، فهي لا تقول إلا شيئاً واحداً: «تغيّر X% من البكسلات في مكان ما». لا فكرة عن أيّ عنصر، ولا عن أيّ طبيعة. أما Delta-QA فيسمّي العنصر بالضبط ويصف التغيير (مُزاح، مُضاف، مُزال، مُعدّل).

لماذا يغيّر مستوى العنصر كل شيء

لا يقارن Delta-QA صورة كبيرة. بل إنه:

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

النتيجة: يمكنه أن يكون شديد الحساسية (يلتقط حدّاً بسماكة 1 px على كتلة كبيرة) دون أن يغرق في تغيّرات التنعيم، لأن تلك الضوضاء تُستبعد وكل إشارة مرتبطة بعنصر محدد. الإزاحة ليست «كتلة حمراء»: إنها عنصر يُشار إليه بأنه اختفى في الموضع القديم وظهر في الجديد. الحساسية الموضعية تلقائية، دون أقنعة تُحضَّر مسبقاً.

المنهجية — وحدودها

نحرص على الدقّة، فإليك المنطقة الرمادية:

نفس الصفحة للاثنين. ينطلق النهجان من نفس الصفحة المُصيَّرة والمُجمَّدة تماماً — دون انحياز في العرض.
أرقام مُتحقَّق منها مقابل الأداة المرجعية. يعيد مختبرنا حساب فرق اللون بنفس طريقة أكثر أدوات المقارنة بكسل ببكسل استخداماً. وقد قارنّا الحالات الخمس مع هذه الأداة الرسمية: على تغيير اللون الصريح، يعطي الاثنان 5.036% مقابل 5.034% — متطابقان تقريباً. في الحالات الأخرى، تعدّ الأداة المرجعية بكسلات أقل (تتجاهل تنعيم الحواف) — فهي أكثر ميلاً إلى إفلات التغييرات الصغيرة. أرقام الجدول هي أرقامها.
Delta-QA يُفرط في الإشارة (ونحن نتحمّل ذلك). على تغيير اللون، يصدر 3 إشارات: الحقيقية (الرأس، شدّة 0.996) + إشارتين أبويتين ضعيفتين جداً (0.005 و0.001). هذا متعمَّد: نرفع كل شيء، ومؤشر الحساسية في الواجهة يخفي هذه الإشارات الضعيفة افتراضياً. لكن لنكن واضحين: العدّ الخام ليس «تغيير واحد = إشارة واحدة».
سياق اختبار واحد. أُجريت هذه القياسات على حجم شاشة واحد، صفحة في حالة سكون، على صفحات اختبار مضبوطة. لا ندّعي شيئاً عن أحجام شاشات متعددة، أو الحالات التفاعلية (التحويم، التركيز)، أو الصفحات المزعجة فعلاً — أوراش أخرى.
إعادة الترتيب. صنّف Delta-QA البطاقات المُعاد ترتيبها كـ «مُعدَّلة» بدل «مُزاحة»، لكن موضعية حسب العنصر — وهو ما يبقى أعلى بكثير من كتلة منتشرة.

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

ما ينبغي تذكّره

إذا كان اختبار الانحدار البصري لديك يعتمد على مقارنة الصورة الكاملة بعتبة نسبية في الإعداد الافتراضي، فهو على الأرجح يُفلِت تغييرات يراها مستخدموك — إزاحات، ألوان موضعية، تغييرات نمط دقيقة. خفض العتبة يلتقطها، لكنه يوقظ الإنذارات الكاذبة؛ والأقنعة تساعد، لكنها تُضبط منطقة بمنطقة، مسبقاً.

المقارنة عنصراً بعنصر ليست إعداداً: إنها بنية أخرى تعيد في آن الحساسية والدقّة — مع، كمكافأة، اسم العنصر وطبيعة التغيير.

لمزيد من العمق

اختبار قابل للتكرار: أُنتجت مقارنة «الصورة الكاملة» بالأداة المرجعية مفتوحة المصدر (حزمة pixelmatch، Node/npm) على حساسيتها الافتراضية، ثم بعتبة قرار 0.1% مثل BackstopJS — على نفس الصفحة المُجمَّدة تماماً التي يستخدمها Delta-QA.