مقارنة لقطات الشاشة هي العملية الخوارزمية التي تحدد بها أداة اختبار بصري ما إذا كانت لقطتان لنفس صفحة ويب متطابقتين أم مختلفتين — وإن كانتا مختلفتين، إلى أي حد وأين.
خلف كل أداة اختبار بصري، توجد خوارزمية أو أكثر لمقارنة الصور. ثلاث طرق تهيمن على السوق. لكل واحدة فلسفة مختلفة، وفهم هذه الفروق سيساعدك على اختيار الأداة المناسبة — أو فهم لماذا تعطي أداتك الحالية نتائج محبطة.
Pixel Diff: عدّ النقاط
pixel diff هو النهج الأكثر مباشرة. تأخذ الخوارزمية صورتين بنفس الأبعاد، تمر على كل بكسل، وتقارن قيم اللون (أحمر، أخضر، أزرق، شفافية). إذا اختلفت القيم، يُحدَّد البكسل كـ"مختلف".
تخيل ورقتين مرسومتين بالميليمتر متطابقتين باستثناء أن أحدهم لوّن 3 مربعات بالأحمر على الثانية. pixel diff سيجد بالضبط هذه المربعات الثلاثة.
تنتج الخوارزمية أمرين: عدد (أو نسبة) البكسلات المختلفة، وصورة "diff" حيث مناطق الاختلاف ملوّنة بالأحمر.
إنه بسيط، سريع، حتمي. لكنه قاسٍ. تغيير طفيف في anti-aliasing على نص — غير مرئي للعين — قد يحدد مئات البكسلات كـ"مختلفة". الاختبار يفشل عبثاً. لفهم حدود pixel diff، راجع مقالنا بكسل ببكسل مقابل المقارنة الإدراكية ودليلنا حول تقليل الإيجابيات الكاذبة.
pHash: التوقيع البصري
pHash (Perceptual Hash) يأخذ نهجاً مختلفاً جذرياً. بدلاً من المقارنة بكسل ببكسل، يختزل كل صورة إلى "بصمة" قصيرة — نموذجياً 64 بت — تلتقط البنية البصرية الإجمالية.
فكر فيه كلحن أغنية. يمكنك التعرف على "موشح يا ليل" حتى لو عُزفت بالبيانو، الجيتار، أو غناها شخص بنشاز. اللحن نفسه — التفاصيل تتغير. pHash يعمل بالمثل مع الصور.
تختزل الخوارزمية الصورة إلى حجم صغير جداً (مثلاً 32x32 بكسل)، تحوّلها إلى تدرج رمادي، تطبق تحويلاً رياضياً يستخرج الترددات المنخفضة (البنية الإجمالية)، وتنتج تسلسلاً من البتات.
صورتان متشابهتان بصرياً ستكون لهما بصمات متقاربة. "المسافة" بين البصمات (عدد البتات المختلفة، تُسمى مسافة Hamming) تقيس التشابه.
الميزة: محصّن ضد التغيرات الدقيقة (anti-aliasing، ضغط خفيف، تغيير الحجم). المشكلة: قليل الدقة للتفاصيل. تغيير لون دقيق أو إزاحة 5 بكسلات قد تمر دون اكتشاف إذا بقيت البنية الإجمالية متشابهة.
SSIM: العين الرياضية
SSIM (Structural Similarity Index Measure) هو الطريقة الأكثر تطوراً من بين الثلاث. لا يقارن البكسلات فردياً ولا الصورة إجمالياً — يقارن مناطق الصورة وفق ثلاثة معايير إدراكية.
الإضاءة: هل المناطق مضيئة بنفس القدر؟ التباين: هل تنويعات السطوع متشابهة؟ البنية: هل أنماط البكسلات منظّمة بنفس الطريقة؟
تمر الخوارزمية على الصورة بنافذة منزلقة وتحسب هذه المقاييس الثلاثة لكل منطقة. النتيجة درجة بين 0 و1 — كلما اقتربت من 1، كلما تشابهت الصور إدراكياً.
درجة SSIM بـ 0.99 تعني "متطابقتان تقريباً لإنسان". درجة 0.95 تعني "اختلافات مرئية لكن طفيفة". دون 0.90، الاختلافات واضحة.
الميزة: إنها الطريقة الأقرب للإدراك البشري. تتسامح مع تغييرات العرض دون إخفاء التغييرات الحقيقية. المشكلة: أبطأ من pixel diff، وعتبة التسامح يجب معايرتها بعناية.
ما تفوت كل طريقة
pixel diff يفوت السياق. لا يعرف ما إذا كان البكسل المختلف مهماً أم لا. تغيير anti-aliasing وزر يختفي يولّدان نفس نوع التنبيه.
pHash يفوت التفاصيل. قوته (الرؤية الإجمالية) هي أيضاً ضعفه. التغييرات الدقيقة — خط أكبر قليلاً، تباعد مُعدّل بـ 2 بكسل — تمر تحت الرادار.
SSIM هو أفضل توافق، لكنه يحتاج معايرة دقيقة للعتبة. صارم جداً، يتصرف كـ pixel diff. متساهل جداً، يدع الانحدارات تمر.
النهج الهيكلي: ما وراء الصورة
يوجد نهج رابع لا يقارن الصور مطلقاً. التحليل الهيكلي يقارن خصائص CSS المحسوبة وDOM مباشرة. هذا ما تفعله Delta-QA بخوارزميتها في 5 تمريرات.
بدلاً من السؤال "هل البكسلات متطابقة؟"، تسأل "هل خصائص CSS لكل عنصر متطابقة؟". هل تغيّر font-size؟ هل تحرّك margin؟ هل اللون مختلف؟
إنها أكثر دقة (صفر إيجابيات كاذبة مرتبطة بالعرض) وأكثر إفادة (نعرف بالضبط ماذا تغيّر وبكم). لكنها أيضاً أكثر تعقيداً للتنفيذ.
كيف تختار بين الطرق الثلاث
اختيارك يعتمد أقل على الرياضيات وأكثر على السياق:
- هل تحتاج بساطة وسرعة؟ pixel diff. اقبل الإيجابيات الكاذبة كثمن البساطة.
- هل تريد تجاهل ضوضاء العرض؟ pHash أو SSIM، حسب الدقة المطلوبة.
- هل تريد تشخيصاً دقيقاً بدون إيجابيات كاذبة؟ نهج هيكلي (Delta-QA).
- لست متأكداً؟ ابدأ بـ SSIM بعتبة 0.98. إنه أفضل توافق افتراضي.
الأسئلة الشائعة
أي طريقة الأسرع؟
pixel diff الأسرع. pHash أبطأ قليلاً بسبب التحويل. SSIM الأبطأ لأنه يمر على الصورة بنافذة منزلقة.
أي طريقة تنتج أقل إيجابيات كاذبة؟
SSIM في وضع مُعاير جيداً. pHash جيد أيضاً لتجاهل الضوضاء لكنه قد يفوت التفاصيل. pixel diff ينتج أكثر إيجابيات كاذبة.
هل تستخدم الأدوات طريقة واحدة فقط؟
ليس دائماً. بعضها يدمج pixel diff + SSIM. أخرى تضيف طبقة ذكاء اصطناعي فوق. Delta-QA تستخدم نهجاً هيكلياً لا يعتمد على مقارنة الصور.
هل يمكن لـ pHash اكتشاف تغيير لون؟
فقط إذا كان التغيير ملحوظاً. انتقال من أزرق داكن إلى أزرق أفتح قليلاً سيُتجاهل على الأرجح. انتقال من أزرق إلى أحمر سيُكتشف.
أي عتبة SSIM استخدامها للاختبار البصري؟
لاختبار انحدار صارم: 0.99. للمراقبة بتسامح مع الضوضاء: 0.95-0.97. دون 0.95، تخاطر بفوات انحدارات حقيقية.
هل pixel diff قديم تماماً؟
لا. للحالات حيث الدقة البصرية المطلقة مهمة (شعارات، أيقونات، تصميم pixel-perfect)، pixel diff يبقى ذا صلة. للباقي، الطرق الإدراكية أو الهيكلية عادة أنسب.
pixel diff يخبرك أن شيئاً تغيّر. pHash يخبرك إن كان مختلفاً بصرياً إجمالاً. SSIM يخبرك إلى أي حد مختلف للعين البشرية. التحليل الهيكلي يخبرك بالضبط ماذا تغيّر ولماذا. أربعة نهج، أربعة مستويات إجابة. الاختيار الصحيح يعتمد على السؤال الذي تطرحه.
للمزيد من القراءة
- كيف تعمل مقارنة لقطات الشاشة: الدليل الشامل
- Screenshot Testing: الدليل الشامل لاختبار لقطات الشاشة في 2026
- الاختبار البصري وDocker: بدون بيئة قابلة للاستنساخ، لقطات الشاشة لا قيمة لها
- الاختبار البصري في الرعاية الصحية: HIPAA و HDS ولماذا لقطات الشاشة الخاصة بك تمثل خطراً
- 5 أفضل بدائل Sauce Labs في 2026: مقارنة شاملة