1
خصائص Flexbox
يراقب flex-direction و justify-content و align-items و flex-wrap و gap وتغييرات الترتيب.
50 حالة اختبار
التخطيط
تغييرات التخطيط من أكثر الانحدارات البصرية إزعاجاً. عنصر منزاح أو شبكة مكسورة يمكن أن يغير تجربة المستخدم بالكامل. Delta-QA يحلل العلاقات المكانية بين العناصر.
ما نكتشفه
2
تغييرات CSS Grid
يكتشف تعديلات grid-template وتغييرات حجم المسارات وإعادة تعيين grid-area.
3
الموضع والتكديس
يلتقط تغييرات position (static، relative، absolute، fixed، sticky) وتأثيرها على الموضع.
4
الهوامش والحشو
يتتبع تغييرات التباعد، بما في ذلك سيناريوهات margin collapse التي تسبب انزياحات غير متوقعة.
5
نموذج الصندوق والأبعاد
يكتشف تغييرات width و height وقيود min/max و box-sizing التي تؤثر على الأبعاد.
6
Float و clear
يحدد تغييرات التخطيط القائمة على float وسلوك clearfix التي يمكن أن تسبب إعادة التدفق.
مثال تفاعلي
شاهد بالضبط ما يكتشفه Delta-QA. قارن النسختين جنبًا إلى جنب.
قبل
بعد
سيناريوهات واقعية
🎯
الحشوة التي تزيح كل شيء
يصلح مطوّر خلل محاذاة في نموذج التسجيل ويعدّل الحشوة العامة لحقول الإدخال. الأثر الجانبي: نموذج الدفع يحصل على حقول أكبر، وزر «ادفع» ينزل تحت حافة الشاشة. على الهاتف أسوأ — النموذج يتجاوز حدود الشاشة. فريق QA تحقّق من نموذج التسجيل (الذي تم تعديله)، لكن ليس من نموذج الدفع. Delta-QA يقارن لقطات الشاشة لجميع الصفحات ويبرز الإزاحة في نموذج الدفع — زر «ادفع» الذي اختفى من منطقة العرض يظهر فورًا في diff.
⚠️
Flexbox الذي يعكس الترتيب
يعيد مطوّر هيكلة CSS لصفحة الأسعار ويعكس بالخطأ ترتيب العرض. الخطط الثلاث تظهر الآن Enterprise ثم Pro ثم مجاني — من اليمين لليسار. الزوّار يرون العرض الأغلى أولًا، الترسيخ النفسي معكوس. الإطلاق كان عاجلًا، اختبروا الحد الأدنى: الخطط الثلاث موجودة، النقر يعمل، ننشر. Delta-QA يقارن لقطات الشاشة ويكتشف أن الكتل تبدّلت مواقعها — الانعكاس واضح في diff.
💡
انهيار الهوامش الصامت
يضيف مطوّر overflow: hidden على حاوية لإصلاح خلل تجاوز. النتيجة غير المتوقّعة: آلية دمج الهوامش في CSS تتعطّل والمسافة بين الأقسام تتضاعف فجأة. الصفحة تطول بمقدار 200px، الأقسام تبدو منفصلة عن بعضها. الفريق وثق بخط أنابيب الاختبارات الآلية الذي لا يغطّي الجانب البصري. Delta-QA يقارن لقطات الشاشة ويبرز تضاعف المسافة بين الأقسام — إزاحة كامل التنسيق تظهر في diff.
مستعد لاكتشاف كل انحدار بصري؟
حمّل Delta-QA وابدأ باكتشاف تغييرات CSS في صفحات الويب — بدون كود.