Chromatic هي الأداة المرجعية في السوق لاختبار المكونات البصرية عبر Storybook. Delta-QA من جهتها تختبر صفحات ويب كاملة مع مسارات مستخدم حقيقية. هاتان ليستا منافستين مباشرتين — بل هما مستويان مختلفان تمامًا من الاختبار. وفهم هذا الفرق يمنحك القدرة على تجنب الاعتقاد بأنك محمي بينما أنت في الواقع مغطَّى بشكل جزئي فقط، وهو ما قد يكلفك غاليًا في مرحلة الإنتاج.
ما يختبره Chromatic
Chromatic يلتقط كل story من Storybook ويقارنها بنسختها السابقة بدقة. زر في جميع حالاته الخمس المختلفة. بطاقة بعناوين قصيرة وطويلة. نموذج فارغ ونموذج مُعبَأ مسبقًا ببيانات تجريبية.
هذا النهج فعّال للغاية لحماية مكتبة المكونات. أي تعديل على مكون مشترك يُكتشف فورًا وبشكل تلقائي. واجهة المراجعة المدمجة ممتازة وتُسهّل التعاون بين المصمم والمطور خلال دورات المراجعة.
المشكلة الجوهرية هي أن Chromatic يختبر المكونات في وضع معزول تمامًا. مكون وحيد، موضوع داخل حاوية محايدة، بدون أي سياق حقيقي للصفحة. وهنا بالضبط تختبئ الأخطاء الخطيرة التي لا تظهر إلا عند التكامل.
ما يختبره Delta-QA
Delta-QA يختبر صفحات ويب كاملة وشاملة. ليس مكونات معزولة في بيئة مصطنعة — بل صفحات حقيقية بتخطيطات حقيقية، ومحتوى فعلي، ومكونات تتفاعل فيما بينها ضمن سياق الصفحة الفعلي.
مكون Card يبدو مثاليًا في Storybook لكنه قد ينكسر عند وضعه في شبكة من 3 أعمدة مع شريط جانبي يضغط على عرضه. زر مُتحقق منه بمعزل قد يختفي خلف تذييل الصفحة في السياق الحقيقي. نموذج خالٍ من العيوب في story قد يتجاوز حاويته عند دمجه في نافذة منبثقة (modal) ذات أبعاد مختلفة.
هذه الأخطاء بالذات؟ Chromatic لا يراها أصلًا لأنه لا يختبر الصفحة. Delta-QA يراها لأنه يختبر ما يراه المستخدم فعليًا — الصفحة الكاملة والمتكاملة، في متصفح حقيقي، بمحتوى حقيقي وشروط عرض فعلية.
متطلب Storybook
Chromatic يتطلب Storybook. إذا لم يكن مشروعك يستخدم Storybook، فلا معنى لاستخدام Chromatic. وإعداد Storybook حصريًا لغرض الاختبار البصري هو استثمار كبير: كتابة stories لكل مكون، والحفاظ عليها محدّثة، وإدارة بيانات العرض التوضيحي.
Delta-QA لا يتطلب شيئًا. لا Storybook، لا إطار عمل محدد، لا كود. لديك موقع ويب؟ يمكنك اختباره.
سحابة مقابل محلي
Chromatic سحابي حصريًا بالكامل. لقطات الشاشة الخاصة بك تُرسل وتُخزَّن على البنية التحتية السحابية الخاصة بـ Chromatic. لا يوجد أي خيار للاستضافة الذاتية (self-hosted) أو التشغيل المحلي.
Delta-QA محلي افتراضيًا وبالتصميم. كل شيء يبقى على جهازك المحلي. لا تخرج أي بيانات من جهازك أبدًا، مما يضمن أقصى درجات الخصوصية والأمان.
الأسعار
Chromatic يوفر 5,000 لقطة مجانية شهريًا، لكن على Chrome فقط. اختبار متعدد المتصفحات يبدأ من $179/شهر. واللقطات تتراكم بسرعة: 180 story × 3 منافذ عرض = 540 لقطة لكل بناء، أي حوالي 9 عمليات بناء قبل بلوغ الحد المجاني.
Delta-QA Desktop مجاني بلا حدود. اختبار متعدد المتصفحات مضمّن.
السؤال الحقيقي
السؤال ليس "Chromatic أم Delta-QA؟" بل "هل تختبر مكوناتك، صفحاتك، أم الاثنين معًا؟"
إذا كان لديك Storybook ونظام تصميم، فإن Chromatic يحمي مكتبة مكوناتك. هذه شبكة أمان أولى.
لكنك تحتاج أيضًا إلى شبكة أمان ثانية للصفحات الكاملة. هنا يأتي دور Delta-QA. الأداتان تتكاملان — لا إحداهما تُغني عن الأخرى.
وإذا لم تكن تستخدم Storybook، فإن Delta-QA هو الخيار الوحيد الذي تحتاجه.
الأسئلة الشائعة
هل يعمل Chromatic بدون Storybook؟
توسع Chromatic نحو Playwright وCypress منذ عام 2025، لكن هذه التكاملات لا تزال حديثة. في الممارسة العملية، يظل Storybook المتطلب الأساسي.
هل يمكن لمكون مثالي في Storybook أن ينكسر في صفحة؟
نعم، وبشكل متكرر. عزل Storybook يُخفي تمامًا التفاعلات المعقدة مع التخطيط الأصلي (parent layout)، والمكونات المجاورة، والمحتوى الحقيقي، وقيود الشاشة الفعلية. هذه هي الفخ الرئيسي والخطر الأكبر لاختبار المكونات المعزولة عن سياقها.
هل يمكن استخدام Chromatic وDelta-QA معًا؟
نعم، وهذا هو النهج الموصى به بقوة. Chromatic للمكونات المعزولة، Delta-QA للصفحات الكاملة. كل أداة تغطي مستوى مختلفًا من الاختبار، وبتكاملهما تحصل على تغطية شاملة تضمن عدم تسرب أي عيب بصري إلى الإنتاج.
أيهما أسرع في الإعداد؟
Delta-QA: بضع دقائق فقط من التحميل حتى أول اختبار. Chromatic: عدة ساعات إلى بضعة أيام كاملة (إعداد Storybook في المشروع + كتابة stories لكل مكون + تهيئة CI/CD + ربط الحساب والتحقق من التكامل).
Chromatic يختبر مكونات UI معزولة عبر Storybook. Delta-QA يختبر صفحات ويب كاملة ومسارات مستخدم حقيقية — بدون Storybook، بدون كود، بدون مهارات تقنية.
للمزيد من القراءة
- Delta-QA مقابل Chromatic: مكونات معزولة أم صفحات كاملة؟
- Delta-QA مقابل BackstopJS: اختبار بصري بدون كود مقابل تهيئة يدوية