40 حالة اختبار

الألوان والسمات

يُعدّ اللون من أكثر الخصائص البصرية حملاً للمعنى داخل أيّ واجهة على شبكة الإنترنت: فهو يحمل الهوية البصرية للعلامة التجارية، ويُشير إلى الإجراءات الرئيسية، ويُنظّم التسلسل الهرمي للقراءة على الصفحة. حين تنحرف درجة لونية ببضع نقاط على زرّ تحويل، فإنّ ذلك يُمثّل انحداراً بصرياً غير مرئي تماماً للاختبارات الوظيفية، لكنّه يُدرك فوراً من قِبَل الزوّار كإشارة على تراجع جودة المنتج. على الواجهات المهنية — لوحات معلومات بنكية، نظم تخطيط موارد المؤسسة ERP، لوحات الإدارة الخلفية، شاشات مراقبة العمليات — قد يؤدّي عدم اتّساق رموز الألوان إلى أخطاء جسيمة في تفسير البيانات وقرارات تشغيلية خاطئة. عملياً، تظهر هذه الانحدارات دائماً تقريباً في السياقات نفسها: إعادة تصميم نظام التصميم design system، تغيير إطار عمل CSS، تحديث متغيّر عام مثل --brand-primary أو --color-accent، إدخال وضع dark mode غير مُنتشر بشكل صحيح على كلّ المكوّنات، أو التحويل الصامت من تنسيق لوني إلى آخر أثناء البناء. تُضاعف خصائص CSS المخصّصة المشكلة: تعديل رمز لوني واحد قد يؤثّر على عشرات المكوّنات الموزّعة عبر مئات الصفحات، ولا يستطيع أيّ مطوّر مهما كانت خبرته أن يحفظ ذهنياً الخريطة الكاملة للتبعيات داخل قاعدة شيفرة كبيرة. يُعالج Delta-QA هذا الموضوع عبر مقارنة لقطات الشاشة المرجعية واللقطات الجديدة بدقّة البكسل، ثمّ تطبيق تحليل إدراكي مُعايَر يتسامح مع ضوضاء العرض الطبيعية لكنّه ينبّه على أيّ انحراف لوني ذي دلالة. تتعرّف الأداة على تنسيقات RGB وHSL وOKLCH ومتغيّرات CSS الحديثة، وتُشير إلى التبديلات الكاملة للوحة الألوان وكذلك إلى الانحرافات الدقيقة ببضع نقاط داخل تدرّج قريب جداً من المرجع. يُحدّد التقرير البصري بدقّة المناطق المتأثّرة على كلّ لقطة مرجعية snapshot، ممّا يُتيح لفريق ضمان الجودة QA التحقّق من إعادة التصميم دون قراءة كلّ سطر من ملفّات الأنماط — وهذا هو جوهر الاختبار البصري الفعّال لكشف الانحدار البصري عبر مقارنة الصفحات بشكل آلي وموثوق.

ما نكتشفه

1

تغييرات Hex و RGB

يكتشف التعديلات في القيم السداسية عشرية و RGB، بما في ذلك التدوين المختصر وتغيرات قناة ألفا.

2

تغيرات HSL و HSLA

يلتقط تعديلات الصبغة والتشبع والإضاءة، حتى عندما يكون الفرق البصري دقيقاً للعين البشرية.

3

فضاءات الألوان الحديثة

يدعم OKLCH و LCH و Lab وفضاءات الألوان الواسعة الأخرى المستخدمة في أنظمة التصميم الحديثة.

4

خصائص CSS المخصصة

يتتبع التغييرات في متغيرات CSS (--brand-color, --bg-primary) التي تنتشر عبر نظام التصميم بأكمله.

5

التبديل بين الوضع الداكن / الفاتح

يكتشف انحدارات السمة حيث لا تتكيف العناصر بشكل صحيح بين الوضعين الداكن والفاتح.

6

التدرجات وقنوات ألفا

يحدد التغييرات في التدرجات الخطية والشعاعية والمخروطية، وكذلك تعديلات الشفافية.

مثال تفاعلي

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

قبل
بعد

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

🎯

متغيّر CSS الذي يغيّر كل شيء

يقوم مطوّر بتحديث نظام التصميم ويعدّل المتغيّر --brand-primary لتصحيح التباين في ذيل الصفحة. الأثر الجانبي: لون جميع الأزرار والروابط والعناوين في الموقع يتحوّل من أزرق داكن إلى أزرق باهت. زر «أضف إلى السلة» يكاد يندمج مع الخلفية البيضاء — الزوّار لم يعودوا يلاحظونه من النظرة الأولى. فريق QA تحقّق من الذيل (المنطقة المعدّلة)، لكن ليس من 40 صفحة أخرى تستخدم نفس المتغيّر. Delta-QA يقارن لقطات الشاشة قبل وبعد ويبرز تغيّر الدرجة اللونية على كل عنصر متأثّر في جميع الصفحات.

⚠️

الوضع الداكن الذي ينسى مكوّنًا

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

💡

التدرّج اللوني الذي يختفي

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

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

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