20 حالة اختبار

تغييرات دقيقة

أخطر الانحدارات هي تلك التي لا يمكن رؤيتها بالعين المجردة. اختلافات العرض دون البكسل وتغيرات الألوان شبه المتطابقة يمكن أن تفلت من فحص الجودة اليدوي. Delta-QA يعمل على مستوى البكسل.

ما نكتشفه

1

تحولات ألوان شبه متطابقة

يكتشف تغييرات ألوان صغيرة بقدر 1-2 قيمة RGB (مثل #666666 مقابل #626262)، غير مرئية بالعين المجردة.

2

اختلافات مكافحة التعرج

يلتقط تغيرات مكافحة التعرج للخطوط والحواف التي تنتج أنماط تنعيم مختلفة.

3

عرض دون البكسل

يراقب الموضع الكسري للبكسلات واختلافات العرض الناتجة عن transforms أو التحجيم بالنسب المئوية.

4

تغيرات تنعيم الخط

يكتشف تغييرات -webkit-font-smoothing وعرض الخطوط التي تؤثر على الوضوح وإدراك الوزن.

مثال تفاعلي

شاهد بالضبط ما يكتشفه Delta-QA. قارن النسختين جنبًا إلى جنب.

قبل
بعد

سيناريوهات واقعية

🎯

تأثير التمرير الذي يختفي من الأزرار

يضيف مطوّر إعادة تعيين CSS عامة تحذف أنماط hover على الروابط والأزرار. عند التمرير، الأزرار لم تعد تغيّر لونها أو ظلّها — تبقى بالضبط كما في حالة السكون. الزوّار لم يعد لديهم أي استجابة بصرية لمعرفة أن العنصر قابل للنقر. معدّل النقر ينخفض ولا أحد يفهم لماذا. التغيير كان جزءًا من إعادة هيكلة CSS كبيرة، لم يتحقّق أحد من حالات hover. Delta-QA يلتقط العناصر في حالة hover ويقارن اللقطات: الأزرار التي لم تعد تتغيّر عند التمرير تظهر فورًا في diff.

⚠️

الروابط التي تندمج في النص

يعدّل مطوّر الأنماط العامة للروابط، وكأثر جانبي تفقد الروابط في نص المحتوى تسطيرها ولونها المميّز. تبدو الآن كالنص العادي — نفس اللون ونفس الأسلوب. زوّارك لم يعودوا يعرفون أين ينقرون في مقالاتك وصفحات المحتوى. المطوّر تحقّق من التنقّل الرئيسي (الذي يستخدم فئات خاصة)، لكن ليس من الروابط في المحتوى. Delta-QA يقارن لقطات الشاشة ويبرز الروابط التي لم تعد تتميّز عن النص — غياب التسطير واللون المميّز يظهر في diff.

💡

شريط التمرير الذي يغيّر أسلوبه

تغيير CSS يمحو أنماط شريط التمرير المخصّصة. الشريط الرفيع الأنيق يُستبدل بشريط التمرير الافتراضي للمتصفّح — سميك ورمادي. الموقع يفقد لمسته النهائية ومنطقة المحتوى تضيق بصريًا. هذا النوع من الانحدار لا يبحث عنه أحد بنشاط — يُلاحَظ بشكل غامض دون تحديد السبب. Delta-QA يقارن لقطات الشاشة ويبرز التغيير — الشريط السميك الذي حلّ محل التصميم المخصّص يظهر عند التراكب.

💡

تنعيم الحروف الذي يتغيّر

يُدخل مطوّر إعادة تعيين CSS جديدة تغيّر -webkit-font-smoothing من antialiased إلى auto. على macOS، كل نص الموقع يبدو أسمك وأقل وضوحًا — كأن شخصًا طمس الطباعة قليلًا. مستخدمو Mac يرون الموقع «أقل عناية» دون أن يحدّدوا السبب. في بيئة الاختبار كان كل شيء طبيعيًا لأنها تعمل على Linux بتصيير مختلف. Delta-QA يقارن لقطات الشاشة ويكتشف تغيّر التصيير — الحروف الأسمك والأقل وضوحًا تظهر عند التراكب.

مستعد لاكتشاف كل انحدار بصري؟

حمّل Delta-QA وابدأ باكتشاف تغييرات CSS في صفحات الويب — بدون كود.