اختبار الانحدار البصري: Pixel Perfect Forever

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

مشكلة “تسريب CSS”.

أنت مطور. لديك مكون “زر” يستخدم في 50 مكانًا. يبدو رائعا. في أحد الأيام، يطلب منك فريق التسويق تغيير الهامش الموجود في التذييل لجعل نص حقوق الطبع والنشر يتنفس. تذهب إلى “global.css”. ترى فئة عامة .container. قمت بإضافة “الهامش السفلي: 20px”. قمت بدفع الرمز. دون علم، تم تضمين “الزر” داخل ”.حاوية”. الآن أصبح لكل زر في التطبيق هامش إضافي قدره 20 بكسل. التخطيط الموجود في نموذج “التسجيل” معطل الآن. يتم الضغط على الزر خارج الشاشة. اجتياز اختبارات الوحدة: يتم عرض مكون الزر دون أن يتعطل. اجتياز اختبارات E2E: يمكن لمحرك الدمى التمرير إلى الزر والنقر عليه برمجيًا (لا تهتم الروبوتات بتغييرات التخطيط). فشلت تجربة المستخدم: يعتقد المستخدم أن تطبيقك معطل. هذا هو الانحدار البصري. من المعروف أن البشر سيئون في اكتشاف هذه التغييرات الطفيفة (“تغيير العمى”). يعد اكتشاف تغير حجم الخط من 14 بكسل إلى 13 بكسل عبر 100 صفحة أمرًا مستحيلًا بالنسبة للمراجع البشري. اختبار الانحدار البصري يقوم بأتمتة هذا الأمر. يتضمن ذلك التقاط لقطة شاشة للحالة “الموافق عليها” (خط الأساس) ومقارنتها بكسلًا ببكسل مع الحالة “الجديدة”. إذا كان هناك اختلاف بنسبة 1% من وحدات البكسل، فسيفشل الاختبار ويظهر لك علامة “Diff” حمراء.

لماذا تناقش Maison Code الاختبارات البصرية؟

في Maison Code، نعمل مع العلامات التجارية الفاخرة. بالنسبة إلى لوحة معلومات SaaS، ربما يكون الزر غير المتوافق مقبولاً. بالنسبة لدار الأزياء، الجماليات عملية. هوية العلامة التجارية * هي * المنتج. إذا تمت محاذاة الشعار بشكل غير صحيح بمقدار 2 بكسل، أو كان وزن الخط غير متطابق مع إرشادات الطباعة، فإن ذلك يضر بحقوق العلامة التجارية. يدفع لنا العملاء مقابل “Pixel Perfection”. لا يمكننا الاعتماد على ضمان الجودة اليدوي لاكتشاف رسالة “تم إيقاف تباعد الحروف بمقدار 0.1em”. نقوم بتنفيذ خطوط أنابيب الانحدار المرئي الآلية (باستخدام Percy أو Chromatic) لضمان عدم وصول أي “حادث CSS” إلى الإنتاج على الإطلاق. نحن نجعل نظام التصميم غير قابل للتغيير.

الأداة: القصص المصورة + اللوني (أو بيرسي)

ابدأ بـ القصص المصورة. Storybook عبارة عن ورشة عمل لبناء مكونات واجهة المستخدم بشكل منفصل. يمكنك إنشاء “قصة” لكل حالة للمكون الخاص بك. زر.قصص.tsx:

• الابتدائي (الأزرق).
• ثانوي (شبح).
• “مدمر” (أحمر).
• تحميل (الدوار).
• معطل (رمادي).

لوني (من صنع مشرفي Storybook) هو برنامج تشغيل السحابة. إنه يتكامل مع CI (إجراءات GitHub).

1. الإنشاء: تقوم CI ببناء موقع Storybook الثابت.
2. تحميل: يقوم CI بتحميله إلى Chromatic Cloud.
3. العرض: يقوم Chromatic بتدوير المتصفحات السحابية (Chrome وFirefox وEdge وSafari).
4. التقاط: يعرض كل قصة على حدة ويلتقط لقطة شاشة كاملة الدقة.
5. المقارنة: تقارن لقطات الشاشة هذه بـ “خط الأساس” (آخر التزام على “الرئيسي”).
6. التقرير: إذا تغيرت وحدات البكسل، فستكون حالة البناء “في انتظار المراجعة”.

سير العمل: مراجعة الاختلافات

يفتح المطور لوحة القيادة اللونية. يرون “تم تغيير الزر (الأساسي)”. يقومون بتبديل “عرض الاختلاف” (الشريحة/التراكب). يرون البيكسلات الحمراء تظهر التحول. السيناريو أ (عرضي): “عفوا، لقد كسرت الحشوة.” -> الإجراء: الرفض. ارجع إلى الكود. إصلاح CSS. السيناريو ب (مقصود): “نعم، لقد قمت بزيادة حجم الخط عمدا.” -> الإجراء: قبول. يقوم إجراء “القبول” هذا بتحديث الأساس. سيتم مقارنة الإصدارات المستقبلية بهذا الإصدار الجديد. يؤدي هذا إلى إنشاء مسار التدقيق المرئي. أنت تعرف بالضبط متى تغير الزر و من وافق عليه.

التعامل مع البيانات الديناميكية (التقلب)

الاختبارات المرئية تكره البيانات الديناميكية. إذا قام المكون الخاص بك بعرض Date.now()، فستفشل كل لقطة شاشة. إذا قام المكون الخاص بك بعرض Math.random()، فسيفشل. إذا قام بتحميل الصورة الرمزية للمستخدم من Randomuser.me، فسوف يفشل. الحل: بيانات وهمية. يجب أن تكون قصصك حتمية. تمرير الدعائم الثابتة. التاريخ = "2025-01-01T12:00:00Z". استجابات وهمية لواجهة برمجة التطبيقات باستخدام Mock Service Worker (MSW) لإرجاع نفس JSON دائمًا. تجميد الرسوم المتحركة. ستختلف لقطة الشاشة التي يتم التقاطها بمعدل “0.1 ثانية” للرسوم المتحركة المتلاشية عن “0.2 ثانية”. تعطيل الرسوم المتحركة في بيئة الاختبار.

/* Preview-head.html في القصص المصورة */
<نمط>
  *، *::قبل، *::بعد {
    الرسوم المتحركة: لا شيء! مهم؛
    الانتقال: لا شيء! مهم؛
  }
</نمط>

اختبار عبر المتصفحات

إنه يعمل على جهاز Mac (Chrome). هل يعمل على نظام ويندوز (الحافة)؟ أو آيفون (سفاري)؟ تعرض المتصفحات الخطوط والظلال بشكل مختلف. تقوم أدوات الانحدار المرئي بتنفيذ العرض في متصفحات حقيقية متعددة في السحابة. إنهم يلتقطون الأخطاء الخاصة بالمتصفح. “التدرج مفقود في Safari.” “الشبكة مكسورة في Firefox.” يمكنك الحصول على هذه التغطية مجانًا دون امتلاك Device Lab.

اختبار الاستجابة

لا يكفي الاختبار على سطح المكتب (1920 بكسل). تحتاج إلى الاختبار على الجهاز اللوحي (768 بكسل) والهاتف المحمول (375 بكسل). قد تنهار شبكتك إلى مكدس. قد تتحول القائمة الخاصة بك إلى همبرغر. يتيح لك Chromatic تحديد Viewports. منافذ العرض: [375، 768، 1200]. سوف يستغرق الأمر 3 لقطات شاشة لكل مكون. وهذا يضاعف التغطية الخاصة بك ثلاث مرات. سوف تكتشف أخطاء “الزر يتداخل مع النص على iPhone SE” على الفور.

وجهة نظر المتشككين

“إنها مكلفة للغاية. المال والوقت على السواء.” نقطة مضادة: المال: نعم، اللوني/بيرسي يكلف المال (استخدام اللقطة). قارن ذلك براتب مهندس ضمان الجودة الذي ينقر يدويًا على 500 شاشة على 3 متصفحات. أو تكلفة “الإصلاح العاجل” عند كسر واجهة مستخدم Checkout في الإنتاج. الوقت: تستغرق مراجعة اللقطات دقيقة واحدة. “نعم، تبدو جيدة.” يستغرق تصحيح أخطاء التخطيط في الإنتاج 3 ساعات. الاختبار البصري هو الرافعة المالية العالية. إنه يلتقط الأخطاء التي لا تستطيع آلات (اختبارات الوحدة) رؤيتها.

الأسئلة الشائعة

س: هل يمكنني استخدام الكاتب المسرحي لهذا الغرض؟ ج: نعم (توقع (صفحة).toHaveScreenshot()). الكاتب المسرحي عظيم. الفرق: الاختبارات المرئية للكاتب المسرحي/السرو: الأفضل للصفحات الكاملة (عمليات التكامل). “هل تبدو الصفحة الرئيسية بالشكل الصحيح؟” القصص المصورة/اللونية: الأفضل لمكتبة المكونات (الذرات). “هل يبدو مكون “التنبيه” المحدد صحيحًا في جميع المتغيرات الخمسة؟” نحن نوصي بكليهما. استخدم اللوني لنظام التصميم الخاص بك. استخدم Playwright لتدفقات المستخدم المهمة (الخروج).

س: كيف يمكنني التعامل مع اختلافات مقاومة التعرج بحجم 1 بكسل؟ ج: تقديم النص أمر صعب. تؤدي اختلافات وحدة معالجة الرسومات إلى تحولات تبلغ 1 بكسل. تحتوي الأدوات على إعدادات “العتبة”. “العتبة: 0.1”. (تجاهل الاختلافات الأصغر من 0.1%). لديهم أيضًا خوارزميات “اكتشاف التعرجات” لتجاهل ضوضاء تجانس الخطوط.

الخلاصة

يتيح اختبار الانحدار المرئي “CSS الشجاع”. يمكنك إعادة تصميم بنية SASS الخاصة بك بالكامل إلى Tailwind، وإذا كانت لقطات الشاشة مطابقة بنسبة 100%، فأنت تعلم يقينًا رياضيًا أنك لم تكسر أي شيء. فهو يجلب الصرامة الهندسية للتصميم. توقف عن التحديق في شاشتك. دع الروبوت يفعل ذلك.

13. التعامل مع الإيجابيات الكاذبة (قاعدة 1%)

في بعض الأحيان، لا يمكن تجنب التحولات بمقدار 1 بكسل (يعرض المتصفح تحديثات المحرك). قمنا بتعيين العتبة بنسبة 1%. إذا كان الفرق أقل من 1% من إجمالي وحدات البكسل، فسيتم تمرير الاختبار تلقائيًا. يؤدي هذا إلى تصفية “الضوضاء” (اختلافات الصقل) ولكنه يلتقط “الإشارات” (الزر المفقود). نستخدم أيضًا مناطق التخطيط. نقول للأداة: “تجاهل التذييل (له سنة حقوق نشر ديناميكية). تحقق من كل شيء آخر.” هذا “الاختبار المستهدف” يقلل من التقشر بنسبة 90%.

14. لماذا اللوني أفضل من الأعمال اليدوية

لقد حاولنا بناء هذا بأنفسنا باستخدام Puppeteer + AWS S3. لقد كان كابوسا. إدارة الخطوط الأساسية، وموازنة 500 لقطة شاشة، والتعامل مع فروع git… لوني يحل هذا. تم بناؤه من قبل مشرفي Storybook. إنه يتعامل مع “Git History” أصلاً. إنه يعلم أنه يجب مقارنة “الفرع المميز أ” بـ “الفرع الرئيسي”، وليس “الفرع المميز ب”. توفر تكلفة 300 دولار شهريًا 5000 دولار شهريًا من راتب DevOps.

15. الاستنتاج

مشكلة الاختبار المرئي هي “الضوضاء”. إذا قمت بتصوير محتوى ديناميكي، فستحصل على نتائج إيجابية كاذبة. نقوم بتنفيذ عزل المكونات. نحن نخفي المناطق الديناميكية باستخدام CSS: .dynamic-ad-slot { الرؤية: مخفية؛ }. أو نسخر من البيانات لتكون ثابتة. نحن نستخدم أيضًا خطوط الأساس الخاصة بالفرع. عند تطوير فرع الميزات feat-new-header، فإننا نقارنه بـ main. إذا تغير الرأس، يفشل الاختبار. نقوم بوضع علامة “مقبول” عليه في الفرع. عندما ندمج في الرئيسي، تصبح تلك اللقطة المقبولة هي خط الأساس الجديد.

14. عائد الاستثمار للاختبار البصري

يكلف 300 دولارًا شهريًا للونى. هذا يبدو وكأنه الكثير. قارنه بـ:

1. الأضرار التي لحقت بالعلامة التجارية: تبدو العلامة التجارية الفاخرة ذات التصميم المعطل وكأنها موقع احتيالي.
2. وقت التطوير: قضاء 4 ساعات في إصلاح الانحدار الناتج عن تغيير CSS عالمي.
3. وقت ضمان الجودة: الدفع لإنسان للتحقق من 500 شاشة. عائد الاستثمار عادة ما يكون 10x. يسمح لك بالانتشار يوم الجمعة دون خوف.

15. الاستنتاج

إذا سئمت من دورات “لقد أصلحت الرأس ولكن كسرت التذييل”، فيمكن لـ Maison Code تنفيذ مسار اختبار مرئي. لقد قمنا بإعداد مسارات عمل Storybook وChromatic وCI لتثبيت تصميمك في مكانه. نحن نحدد الخطوط الأساسية وندرب فريقك على كيفية مراجعة الاختلافات.

---

قم بتوظيف مهندسينا.