مقارن HTML بصري عبر الإنترنت: قارن بين صفحتين بكسل ببكسل
عندما تعدّل CSS أو تحدّث مكوناً، كيف تتحقق من أن شيئاً آخر لم يتحرك؟ أدوات الـ diff التقليدية تقارن الكود المصدري سطراً بسطر — لكن تغيير CSS قد يكون غير مرئي في الكود وكارثياً على الشاشة.
يقدم Delta-QA مقارن HTML بصري مجاني بنهج مختلف: يعرض كلا الإصدارين في متصفح Chromium حقيقي ويقارن النتيجة بكسل ببكسل. المهم ليس ما تغير في الكود — بل ما تغير على الشاشة.
الفرق بين diff نصي و diff بصري
الـ diff النصي يخبرك أن السطر 247 من ملف CSS تغير. يظهر لك margin-left: 16px مستبدلاً بـ margin-left: 12px. مفيد لمراجعة الكود، لكنه لا يجيب على السؤال الحقيقي: هل كسر هذا التغيير شيئاً بصرياً؟
الـ diff البصري يجيب على هذا السؤال مباشرة. يعرض كلا الإصدارين، يطابقهما، ويبرز كل فرق مرئي. ترى فوراً ما تحرك — عنصر منزاح، نص يتجاوز حدوده، تباعد معدّل — دون الحاجة لتخيل تأثير تغيير CSS.
هذا مفيد بشكل خاص عندما يكون لتغيير CSS تأثيرات متتالية. تعديل padding في مكون أب يمكن أن يزيح جميع العناصر الفرعية. الـ diff النصي يظهر سطراً واحداً تغير. الـ diff البصري يظهر التأثير الحقيقي على الصفحة بأكملها.
كيف يعمل مقارن Delta-QA
المقارن عبر الإنترنت يعمل في ثلاث خطوات:
الخطوة 1 — أدخل مصادرك. يمكنك لصق كود HTML مباشرة (كتلتان جنباً إلى جنب) أو إدخال عنواني URL. وضع URL يحمّل الصفحات في الوقت الفعلي في متصفح Chromium headless.
الخطوة 2 — العرض والتحليل التلقائي. يعرض المقارن كل إصدار في متصفح حقيقي، يستخرج DOM ولقطات الشاشة لكل عنصر، ثم ينفذ خوارزمية مطابقة هيكلية في 5 مراحل.
الخطوة 3 — تصور الفروقات. تُعرض النتيجة جنباً إلى جنب مع إبراز العناصر المعدّلة مباشرة في الصفحة. كل فرق مصنف حسب التأثير ومرفق بدرجة قوة (0-100%) للتمييز بين التغييرات الكبرى والتغيرات الطفيفة.
حالات استخدام ملموسة
قبل النشر: قارن بيئة staging بالإنتاج للتحقق من عدم وجود انحدار بصري قبل الدفع إلى الإنتاج.
بعد تحديث CSS: قمت للتو بإعادة هيكلة ملف SCSS. قارن الحالة قبل وبعد للتحقق من أن التعديلات المقصودة فقط هي المرئية.
مراجعة كود الواجهة الأمامية: مطور يقترح تعديل مكون. بدلاً من قراءة diff CSS وتخيل النتيجة، قارن بصرياً بين الإصدارين.
مقارنة بين البيئات: موقعك محلياً وفي staging والإنتاج لا يعرضون بنفس الطريقة تماماً؟ المقارن يظهر بالضبط ما يختلف.
تدقيق إعادة التصميم: أنت تعيد تصميم موقع. لكل صفحة، قارن الإصدار القديم بالجديد للتحقق من عدم نسيان أو كسر أي شيء عن غير قصد.
ما يكتشفه المقارن
تحدد الخوارزمية 5 أنواع من التغييرات:
العناصر المضافة — موجودة في الإصدار الجديد لكن ليس في القديم. العناصر المحذوفة — موجودة في الإصدار القديم لكن ليس في الجديد. العناصر المعدّلة بصرياً — نفس الموضع، مظهر مختلف (لون، حجم، خط). العناصر المنقولة — نفس المظهر، موضع مختلف. العناصر المنقولة والمعدّلة — تحركت وتغير مظهرها.
كل إشارة مرفقة بدرجة قوة لتصفية التغييرات الطفيفة والتركيز على الانحدارات الحقيقية.
لماذا هو مجاني
مقارن HTML عبر الإنترنت هو أداة استقطاب. يسمح لأي شخص باكتشاف تقنية المقارنة البصرية من Delta-QA دون تثبيت أي شيء.
إنه أيضاً طريقة ملموسة لفهم الفرق بين diff نصي و diff بصري. كثير من الفرق لا تدرك ما تفقده بمجرد diff للكود حتى ترى diff بصري قيد العمل.
تطبيق سطح المكتب Delta-QA يذهب أبعد: يضيف تسجيل المسارات، الإعادة، متعدد المتصفحات والتتبع عبر الزمن. لكن المقارن عبر الإنترنت يكفي للتحققات العرضية.
الأسئلة الشائعة
هل يتطلب المقارن عبر الإنترنت تسجيلاً؟
لا. مجاني بالكامل وبدون تسجيل. الصق HTML أو أدخل عناوين URL وابدأ المقارنة فوراً.
ما الفرق بين المقارن عبر الإنترنت وتطبيق سطح المكتب؟
المقارن عبر الإنترنت يقارن إصدارين بشكل عرضي (HTML أو URLs). تطبيق سطح المكتب يضيف تسجيل مسارات المستخدم، الإعادة التلقائية، تتبع خطوط الأساس عبر الزمن ومتعدد المتصفحات. المقارن مثالي للتحققات السريعة، التطبيق للمتابعة المستمرة.
هل يمكن مقارنة صفحتين في متصفحات مختلفة؟
المقارن عبر الإنترنت يستخدم Chromium. لمقارنة العرض بين Chrome و Firefox و Safari، يجب استخدام تطبيق سطح المكتب Delta-QA الذي يدعم الاختبار عبر المتصفحات.
هل تُرسل البيانات إلى خادم؟
يتم العرض على جانب الخادم في وضع URL (ضروري لتحميل الصفحات). إذا كانت السرية حرجة، استخدم تطبيق سطح المكتب الذي يعمل بالكامل محلياً.
كم عدد فئات CSS التي يكتشفها المقارن؟
تكتشف الخوارزمية أكثر من 38 فئة من تغييرات CSS: الألوان، الطباعة، التخطيط، الحدود، الظلال، الرسوم المتحركة، التجاوب وغير ذلك الكثير. كل فئة مفصلة في صفحة اكتشافات Delta-QA.
الـ diff النصي يظهر ما تغير في الكود. الـ diff البصري يظهر ما تغير على الشاشة. لكل ما يتعلق بالواجهة الأمامية — CSS، التخطيط، التجاوب — الـ diff البصري يعطي الإجابة الحقيقية.
المقال السابق: الاختبار البصري للتجارة الإلكترونية