Percy وChromatic لـ Storybook

Percy منصة VRT سحابية تتكامل مع خطوط CI. تلتقط لقطات شاشة لصفحات الويب وقصص Storybook، وتخزّن خطوط الأساس في السحابة، وتنشئ مراجعات للفروقات البصرية يمكن الوصول إليها عبر واجهة ويب. وهي تدعم Playwright وCypress وSelenium وStorybook.

Chromatic منصة VRT مصممة خصيصًا لـ Storybook. تلتقط جميع القصص باستخدام متصفحات سحابية، وتقارنها بخطوط الأساس، وتنشئ واجهة لمراجعة الفروقات. كما تنشر Chromatic تطبيق Storybook كموقع مستضاف لتوثيق المكونات.

يكتشف كل من Percy وChromatic تلقائيًا كل قصة من قصص Storybook وينشئ لقطة لها. لا حاجة إلى كتابة شفرة اختبار إضافية — اكتب قصصًا لمكوناتك، وشغّل CLI، وستُختبر كل حالة مرئية تلقائيًا. ويجعل ذلك اعتماد الأداة سريعًا في مشاريع Storybook الحالية.

ثبّت @percy/cli و@percy/storybook، وأضف متغير البيئة PERCY_TOKEN إلى CI، وأضف percy storybook ./storybook-static إلى خط CI. يلتقط Percy جميع القصص وينشر تلقائيًا عملية إنشاء VRT في لوحة Percy.

ثبّت chromatic، وأضف CHROMATIC_PROJECT_TOKEN إلى CI، وشغّل chromatic --project-token=.... ينشئ التشغيل الأول خطوط الأساس. وتقارن عمليات التشغيل اللاحقة النتائج بخطوط الأساس وتنشر روابط المراجعة في فحوصات طلبات السحب على GitHub.

تضيف كلتا الأداتين فحصًا لطلب السحب يعرض الرسالة «تم اكتشاف X تغييرات». يؤدي النقر عليها إلى فتح واجهة المراجعة التي تعرض الفروقات جنبًا إلى جنب أو بشكل متراكب. يعتمد المراجعون التغييرات المقصودة، وبذلك ينشئون خطوط أساس جديدة، أو يطلبون إصلاح التراجعات غير المقصودة.

استخدم معاملات Storybook (عناصر التحكم) لإنشاء عدة أشكال للقصة: Default وLoading وError وDisabled وLongText وSmallViewport. يصبح كل شكل لقطة VRT مستقلة، مما يوفر تغطية شاملة للحالات من دون كتابة ملفات اختبار منفصلة.

يدعم Chromatic وPercy أحجامًا متعددة لمنافذ العرض لكل لقطة. اضبط ذلك في القصة أو عالميًا في إعدادات منافذ العرض في .storybook/preview.js. شغّل VRT لكل منفذ عرض ولكل سمة (فاتحة/داكنة) لاكتشاف تراجعات الاستجابة والسمات في الوقت نفسه.

اعتمد جميع التغييرات عند الانتقال إلى إصدار رئيسي أو عند إجراء إعادة تصميم مقصودة. تدعم كلتا الأداتين الاعتماد الجماعي. بعد تحديث رئيسي لنظام التصميم، اعتمد جميع الفروقات دفعة واحدة، وستصبح لقطات الشاشة الجديدة خط الأساس للتغييرات التدريجية المستقبلية.

اجمع بين دالة play() في Storybook (اختبارات التفاعل) وVRT: تحاكي play() تفاعلات المستخدم، مثل النقر على زر أو فتح نافذة منبثقة، ثم تلتقط لقطة VRT الحالة الناتجة. ويختبر ذلك المخرجات المرئية للمكونات التفاعلية المعقدة.

يفرض كل من Percy وChromatic رسومًا لكل لقطة. وتنتج مجموعات Storybook الكبيرة التي تضم مئات القصص ومنافذ عرض وسمات متعددة آلاف اللقطات لكل طلب سحب. راقب الاستخدام، واستخدم مزينات القصص بكفاءة، وفكّر في تخطي VRT للقصص التي تركز على المنطق فقط.

ما الذي يجعل Chromatic مناسبًا على نحو خاص لمشاريع Storybook مقارنةً بأدوات VRT العامة؟

يؤتمت Percy وChromatic اختبار VRT لـ Storybook من خلال اكتشاف جميع القصص وإنشاء لقطات لها في متصفحات سحابية، وإنشاء مراجعات لفروقات طلبات السحب، وإدارة خطوط الأساس. وبالاقتران مع معاملات القصص لتغطية الحالات وplay() لاختبار التفاعلات، توفر الأداتان ضمان جودة مرئيًا شاملًا لمكتبات المكونات.