1
Object-fit والموضع
يكتشف تغييرات كيفية ملء الصور لحاوياتها: cover و contain و fill وتعديلات الموضع.
25 حالة اختبار
الصور وSVG
الصور والرسوميات المتجهة مركزية في تصميم الويب الحديث. فلتر مكسور أو مسار SVG معدل يمكن أن يغير الهوية البصرية. Delta-QA يقارن هذه العناصر بدقة البكسل.
ما نكتشفه
2
فلاتر CSS
يراقب فلاتر blur و brightness و contrast و grayscale و hue-rotate و saturate و sepia و drop-shadow.
3
تعديلات SVG
يلتقط تغييرات مسارات SVG وتعديلات ألوان fill/stroke وإعدادات viewBox.
4
تغييرات clip-path
يكتشف تعديلات أشكال clip-path باستخدام دوال circle() و ellipse() و polygon() و inset().
5
صور الخلفية
يتتبع تغييرات background-image و background-size و background-position و background-repeat.
مثال تفاعلي
شاهد بالضبط ما يكتشفه Delta-QA. قارن النسختين جنبًا إلى جنب.
قبل
بعد
سيناريوهات واقعية
🎯
صورة المنتج التي لا تُحمّل
يعيد مطوّر تنظيم بنية ملفات الأصول ويكسر مسار بعض صور المنتجات. المتصفّح يعرض أيقونة صورة معطوبة أو النص البديل بدل الصورة. عملاؤك يرون «photo-produit-123.jpg» بدلًا من المنتج — لا أحد يشتري ما لا يستطيع رؤيته. إعادة الهيكلة طالت بنية الملفات وليس الكود — لم يعد أحد يختبر بطاقات المنتجات بصريًا. Delta-QA يقارن لقطات الشاشة ويكتشف فورًا أيقونة الصورة المعطوبة مكان الصورة.
⚠️
الصورة التي تتجاوز الحدود
يعدّل مطوّر قاعدة max-width لحالة خاصة، وعبر التتابع في CSS تفقد جميع صور الموقع قيد الحجم. صورة بعرض 2000px تتجاوز حاويتها، يظهر شريط تمرير أفقي — التنسيق مكسور خصوصًا على الهاتف. المطوّر اختبر حالته الخاصة، لكن ليس 15 قالبًا آخر يستخدم نفس القاعدة. Delta-QA يقارن لقطات الشاشة ويبرز الصورة المتجاوزة وشريط التمرير الأفقي الذي ظهر.
💡
نسبة العرض إلى الارتفاع التي تتغيّر
يعدّل مطوّر أبعاد حاوية لافتة الصفحة الرئيسية وتنتقل نسبة الصورة من 16:9 إلى 4:3. الصورة ممدّدة: الوجوه مشوّهة، الشعار مضغوط — زوّارك يرون صورة هاوية بدل لافتة مصقولة. إنه تغيير في الحاوية وليس في الصورة — المطوّر لم يفكّر في التحقّق من النتيجة البصرية. Delta-QA يقارن لقطات الشاشة ويبرز التشوّه — النسب المتغيّرة تظهر بوضوح في diff.
مستعد لاكتشاف كل انحدار بصري؟
حمّل Delta-QA وابدأ باكتشاف تغييرات CSS في صفحات الويب — بدون كود.