تنسيق حقول الإدخال
يكتشف تغييرات مظهر الحقول: الحدود والخلفيات والحشو وخصائص الخط.
تُركّز النماذج جزءاً غير متناسب من قيمة أيّ تطبيق رقمي: التسجيل، الدفع، البحث، التحقّق من العمليات البنكية، إدخال التذاكر في نظام تخطيط موارد المؤسسة ERP، تأكيد طلبات التجارة الإلكترونية. الانحدار البصري على حقل واحد قد يُسقط معدّل التحويل أو يُعطّل مشغّلاً مهنياً في منتصف عملية حرجة دون سابق إنذار. لا يقتصر الخطر على مظهر الحقل في حالة السكون، بل يمتدّ إلى حالاته المُشتقّة المتعدّدة: focus، hover، disabled، error، success، إضافةً إلى العناصر النائبة placeholders والنصوص المساعدة المرفقة. عندما يُزيل مطوّر outline «لمظهر أنظف وأكثر أناقة»، يتأثّر مستوى الوصول WCAG مباشرةً ويتيه مستخدم لوحة المفاتيح في الحقل الذي يكتب فيه. عندما يتغيّر النمط العامّ لرسائل المساعدة، قد تنتقل أخطاء التحقّق من الأحمر الواضح إلى الرمادي الفاتح فتصبح غير مقروءة على الخلفية البيضاء. تأتي الانحدارات الكلاسيكية من تغيير شبكة CSS يُقلّص شريط البحث في الرأس، أو إعادة تعيين تمحو الأنماط الأصلية لـcheckboxes وradios، أو تحديث إطار عمل UI يُعدّل الحدود وارتفاعات حقول input بشكل خفي. على لوحات معلومات بنكية ولوحات الإدارة وصفحات التجارة الإلكترونية، تُترجم هذه التفاصيل إلى مخاطر تشغيلية وتجارية مباشرة. يلتقط Delta-QA النماذج في حالاتها التفاعلية المختلفة ويُقارن هذه اللقطات بـbaseline البصرية المرجعية. يُبرز التحليل الإدراكي تغييرات لون الرسائل، مؤشّرات التركيز المفقودة، الحقول التي تغيّرت أبعادها، العناصر النائبة المُعدَّلة، وحالات الخطأ التي لم تعد تبرز بصرياً للزائر. تتجنّب هذه التغطية ضرورة اختبار كلّ سيناريو إدخال يدوياً على كلّ نموذج عند كلّ نشر، وتضمن بقاء مسارات التحويل الحرجة أو العمليات المهنية متّسقة بصرياً بين النسخ. هذا هو جوهر الاختبار البصري ومقارنة الصفحات اعتماداً على لقطة مرجعية snapshot لكشف الانحدار البصري ضمن نظام التصميم design system.
يكتشف تغييرات مظهر الحقول: الحدود والخلفيات والحشو وخصائص الخط.
يراقب التنسيق المخصص لمربعات الاختيار وأزرار الراديو، بما في ذلك حالات محدد/غير محدد.
يلتقط تغييرات تنسيق :valid و :invalid و :required وعرض رسائل الخطأ.
يتتبع تغييرات :focus و :focus-visible الحاسمة لإمكانية الوصول بلوحة المفاتيح.
يكتشف تغييرات العنصر الزائف ::placeholder في اللون والشفافية وخصائص الخط.
يراقب حالات hover و active و disabled والافتراضية للأزرار.
شاهد بالضبط ما يكتشفه Delta-QA. قارن النسختين جنبًا إلى جنب.
يعدّل مطوّر الأنماط العامة لنصوص المساعدة، وكأثر جانبي تتحوّل رسائل الخطأ في نموذج التسجيل من أحمر إلى رمادي فاتح. الزوّار يدخلون بريدًا إلكترونيًا غير صالح، يرون نصًا تحت الحقل... لا يستطيعون قراءته لأنه رمادي فاتح على خلفية بيضاء. يظنّون أن الموقع معطّل ويغادرون. لا أحد لديه وقت للتحقّق من كل حالة خطأ في كل نموذج عند كل نشر. Delta-QA يقارن لقطات الشاشة ويبرز تغيّر لون الرسالة — النص شبه المخفي يظهر في diff.
يعدّل مطوّر شبكة CSS للرأس لإضافة رابط تنقّل جديد. شريط البحث يتقلّص للنصف لإفساح المجال. على الهاتف، يصبح ضئيلًا — غير صالح للاستخدام. الزوّار لا يجدون منتجاتك لأن الكتابة في حقل بهذا الحجم الصغير محبطة. المطوّر تحقّق أن الرابط الجديد يظهر، لكنه لم يلاحظ أن حقل البحث تقلّص بجانبه. Delta-QA يقارن لقطات الشاشة ويبرز تقلّص الشريط — تغيّر الحجم واضح عند التراكب.
يضيف مطوّر outline: none على حقول الإدخال «لمظهر أنظف». بصريًا، عند النقر في حقل لم يعد هناك ما يشير إلى الحقل النشط — الإطار الأزرق اختفى. هذا أيضًا انتهاك لمعايير الوصول WCAG. التحقّق يدويًا من حالة التركيز لكل حقل في كل نموذج غير واقعي. Delta-QA يلتقط حالة التركيز لكل حقل ويقارن لقطات الشاشة: اختفاء الإطار الأزرق يظهر فورًا في diff البصري.
حمّل Delta-QA وابدأ باكتشاف تغييرات CSS في صفحات الويب — بدون كود.