بكسل ببكسل مقابل المقارنة الإدراكية: كيف يعمل الاكتشاف البصري

الاكتشاف البصري الآلي هو العملية التي تقارن بها أداة نسختين من صفحة ويب لتحديد ما تغيّر بصرياً — باستخدام خوارزميات رياضية بدلاً من العين البشرية. توجد ثلاث عائلات كبيرة من الخوارزميات، والاختيار بينها يحدد موثوقية اختباراتك.

خلف كل أداة اختبار بصري، توجد خوارزمية مقارنة. وليست كلها متساوية. فهم كيف تعمل هو فهم لماذا تولّد بعض الأدوات إيجابيات كاذبة والأخرى لا.

المقارنة بكسل ببكسل: الأبسط

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

تخيّل صورتين للوحة نفسها بفارق يوم. تضعهما فوق بعضهما وتنظر عبرهما. كل نقطة لا تتطابق بالضبط تُحدَّد بالأحمر. هذا هو pixel diff.

الميزة: بسيط، سريع، وحتمي. نفس زوج الصور ينتج دائماً نفس النتيجة.

المشكلة: حساس جداً. anti-aliasing نص قد يتفاوت ببكسل بين تشغيلين على نفس المتصفح. عرض خط مختلف قليلاً بين نسختين من Chrome ينتج آلاف "الاختلافات" غير المرئية للعين. الاختبار يفشل بينما في الواقع، لا شيء تغيّر للمستخدم.

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

المقارنة الإدراكية: محاكاة العين البشرية

المقارنة الإدراكية تحاول حل مشكلة الإيجابيات الكاذبة بمحاكاة الإدراك البشري. بدلاً من المقارنة بكسل ببكسل، تقارن البنية البصرية الإجمالية للصورة.

تقنيتان تُستخدمان عادة للمقارنة الإدراكية.

pHash (Perceptual Hash) يختزل الصورة إلى بصمة من بضع عشرات من البتات تلتقط بنيتها البصرية الإجمالية. صورتان متشابهتان ستكون لهما بصمات متقاربة، حتى لو اختلفتا ببضع بكسلات. كأنك تعرّف أغنية حتى لو عُزفت بنغمة مختلفة قليلاً.

SSIM (Structural Similarity Index) يقارن الإضاءة والتباين والبنية بين صورتين بالمناطق. ينتج درجة بين 0 و 1 تقيس التشابه المُدرَك. درجة 0.99 تعني "شبه متطابقتان لإنسان".

الميزة: إيجابيات كاذبة أقل. التغيرات الدقيقة لـ anti-aliasing وعرض الخطوط لا تُطلق تنبيهاً.

المشكلة: فقدان الدقة. تغيير دقيق لكنه حقيقي — تباعد مُعدّل بـ 2 بكسل، لون مُزاح قليلاً — قد يُحكم عليه "مقبولاً" بالخوارزمية بينما يشكّل انحداراً حقيقياً. الأداة تتجاهل الضوضاء، لكن قد تتجاهل الإشارة أيضاً.

المقارنة الهيكلية: تحليل الكود لا الصورة

النهج الثالث لا يقارن الصور. يقارن كود CSS وDOM مباشرة.

بدلاً من أخذ لقطتي شاشة ومقارنة البكسلات، تحلل الخوارزمية خصائص CSS المحسوبة لكل عنصر: الموضع، الأبعاد، الألوان، الخطوط، الهوامش، الحدود. إذا تغيرت خاصية، تعرف بالضبط ماذا، أين، وبكم.

هذا نهج Delta-QA بخوارزميتها في 5 تمريرات. لتحليل أكثر شمولاً، راجع مقالنا حول الذكاء الاصطناعي مقابل الخوارزمية الحتمية ودليلنا الكامل لاختبار الانحدار البصري. لا تقول "شيء تغيّر في هذه المنطقة". تقول "خاصية font-size لهذا العنصر انتقلت من 16px إلى 14px" أو "الهامش الأيسر لهذا الحاوي زاد بـ 8px".

الميزة: صفر إيجابيات كاذبة وتشخيص دقيق. لا ضوضاء anti-aliasing (نحن لا نقارن البكسلات). لا فقدان إشارة (نحن نقيس الخصائص الدقيقة).

المشكلة: أكثر تعقيداً للتنفيذ. على الخوارزمية أن تفهم DOM، CSSOM، box model، الخصائص المحسوبة. أدوات قليلة تذهب بعيداً هكذا.

لماذا يهم ذلك لفريقك

اختيار الخوارزمية له عواقب عملية مباشرة.

مع pixel diff خالص، فريقك سيقضي وقتاً في فرز الإيجابيات الكاذبة. هذا ثمن البساطة.

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

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

معظم أدوات المصدر المفتوح (Playwright، BackstopJS) تستخدم pixel diff. أدوات enterprise (Applitools) تضيف طبقة من الذكاء الاصطناعي الإدراكي. Delta-QA تستخدم النهج الهيكلي في 5 تمريرات. لمقارنة الأدوات، راجع تصنيفنا لأفضل الأدوات 2026.

حدود كل طريقة في حالات ملموسة

لتثبيت الأفكار جيداً، لنأخذ ثلاث حالات ملموسة ونرى كيف تتصرف كل خوارزمية.

الحالة 1: anti-aliasing لخط يتغير بين Chrome 130 وChrome 131.

Pixel diff: تنبيه أحمر على نصف نص الصفحة. إيجابي كاذب.
إدراكي: يتجاهل التفاوت. OK.
هيكلي: يتجاهل (font-size، font-family، color دون تغيير). OK.

الحالة 2: لون خلفية ينتقل من #1a1a1a إلى #1c1c1c (تفاوت 1% غير محسوس).

Pixel diff: تنبيه — آلاف البكسلات مختلفة قليلاً.
إدراكي: يتجاهل على الأرجح. OK… لكن هل هذا السلوك المرغوب؟
هيكلي: تنبيه — خاصية background-color تغيرت. تشخيص دقيق.

الحالة 3: زر مُحرَّك بـ 2 بكسل يميناً.

Pixel diff: تنبيه في منطقة الزر.
إدراكي: قد يتجاهل (تفاوت صغير جداً بالنسبة للبنية الإجمالية).
هيكلي: تنبيه — خاصية margin-left تغيرت بـ 2 بكسل.

الطريقة الهيكلية تعطي دائماً تشخيصاً دقيقاً. الأخريات تتأرجح بين إيجابي كاذب وسلبي كاذب.

كيف تختار

ليس لديك خيار آخر سوى الذي تسمح به الأداة المختارة. إليك المعايير لتوجيه هذا الاختيار:

إذا كنت تعطي الأولوية للبساطة وسرعة التنفيذ → أدوات pixel diff (Playwright، BackstopJS).
إذا كنت تريد إيجابيات كاذبة قليلة دون استثمار كبير → أدوات إدراكية (Applitools، Percy).
إذا كنت تريد تشخيصاً دقيقاً وصفر إيجابيات كاذبة → أدوات هيكلية (Delta-QA).

القاعدة هي إيجاد التوازن بين الوقت المُنفَق في فرز الإيجابيات الكاذبة والوقت الضائع على انحدارات غير مكتشفة.

الأسئلة الشائعة

أي طريقة تنتج أقل إيجابيات كاذبة؟

المقارنة الهيكلية (تحليل CSS/DOM) تنتج أقل إيجابيات كاذبة لأنها لا تعتمد على العرض الرسومي. المقارنة الإدراكية تنتج أقل من pixel diff الخالص.

هل pixel diff قديم؟

لا. يبقى مفيداً لحالات بسيطة وعندما لا تكون الدقة المطلقة حرجة. مع عتبات تسامح مضبوطة جيداً، يعمل pixel diff بشكل صحيح للعديد من الفرق.

ما هو pHash بالضبط؟

pHash (Perceptual Hash) هو بصمة رقمية لصورة تلتقط بنيتها البصرية الإجمالية. صورتان متشابهتان بصرياً ستكون لهما بصمات متقاربة، حتى لو اختلفتا على مستوى البكسلات الفردية.

لماذا لا يستخدم Delta-QA الذكاء الاصطناعي للمقارنة؟

لأن الذكاء الاصطناعي غير حتمي — يمكن أن يعطي نتائج مختلفة من تشغيل لآخر. في QA، إعادة الإنتاج ضرورية. النهج الهيكلي حتمي: نفس الكود ينتج دائماً نفس النتيجة.

هل يمكن دمج عدة طرق؟

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

ما الطريقة الأسرع؟

pixel diff أسرع لمقارنة واحدة. الهيكلي أسرع على المقياس، لأنه لا يتطلب عرضاً (يقارن خصائص، لا صور). الإدراكي بين الاثنين.

خوارزمية المقارنة هي قلب أداة الاختبار البصري. تحدد ما إذا كانت اختباراتك موثوقة أم تولّد ضوضاء سينتهي فريقك بتجاهلها. pixel diff بسيط لكن صاخب. الإدراكي مريح لكن غير دقيق. الهيكلي دقيق لكن نادر. اختر حسب تسامحك مع الضوضاء.

للمزيد من القراءة

جرّب Delta-QA مجاناً ←