اختبار المكونات البصري: طريقة تحقق آلية تعرض مكونات واجهة المستخدم بمعزل — خارج سياق الصفحة الكاملة — وتقارن مظهرها بحالة مرجعية موثَّقة، لاكتشاف الانحدارات البصرية على مستوى نظام التصميم قبل انتشارها إلى صفحات الإنتاج.
ثمّة سؤال تتجنبه فرق الواجهة الأمامية بعناية: "مكوناتنا مُختبرة بصريًا في Storybook، لكن هل صفحاتنا في الإنتاج مُختبرة أيضًا؟". الإجابة، في معظم الحالات، هي: لا. وهذه الفجوة مُكلِفة، لأن الأخطاء البصرية التي تصل إلى مستخدميك لا تعيش في Storybookk](/ar/blog/storybook-ikhtbar-basari-bidun-chromatic/) — إنها تعيش في الصفحات الحقيقية، مع البيانات الحقيقية والتفاعلات الحقيقية وتركيبات المكونات الحقيقية.
Chromatic أداة ممتازة لاختبار المكونات المعزولة. Delta-QA مصمَّم لاختبار الصفحات الكاملة. ليسا منافسين بالمعنى الدقيق للكلمة — إنهما أداتان تنظران إلى نفس المشكلة من ارتفاعات مختلفة. لكن إن كان لا بدّ من اختيار أحدهما، أو أردت فهم ما يقدّمه كلٌّ منهما، فإن هذه المقارنة تذهب مباشرة إلى صلب الموضوع.
Chromatic: حارس نظام التصميم
Chromatic، الذي أنشأه مشرفو Storybook، هو الامتداد الطبيعي للاختبار البصري ضمن منظومة Storybook. المفهوم بارع في منطقيته: لقد عرّفت مكوناتك في Storybook بحالاتها المختلفة (stories). يلتقط Chromatic لقطة شاشة لكل story عند كل commit، ويقارنها بالمرجع الأساسي (baseline)، ويُشير إلى التغييرات.
إنه سير عمل مُتكامل تمامًا لفرق أنظمة التصميم. يُعرِّف المصمِّم زرًّا بأربعة متغيّرات (أساسي، ثانوي، معطَّل، قيد التحميل). يُنفِّذ المطوِّر هذه المتغيّرات ويُنشئ stories المقابلة. يتحقق Chromatic عند كل تغيير في الكود من أن المتغيّرات الأربعة لم تتعرّض لانحدار بصري. إذا تغيّر border-radius للزر بالخطأ، يلتقطه Chromatic قبل أن يراجع أي شخص الكود.
توفّر الأداة أيضًا ميزة UI Review، مما يسمح للمصممين والمطوِّرين بالتحقُّق البصري من التغييرات قبل الدمج. إنها شكل من أشكال مراجعة الكود البصرية، وهي فعلاً مفيدة للحفاظ على اتساق نظام التصميم.
النقطة العمياء لدى Chromatic: العالم الحقيقي
إليك المشكلة التي لا يحلّها Chromatic — ليس بسبب نقص في الجودة، بل بسبب خيار معماري: المكونات المعزولة لا تتصرف كالصفحات المُجمَّعة.
الزر المُختبر بمعزل في Storybook يُعرض في بيئة مُتحكَّم بها: إطار عرض ثابت، لا عناصر مجاورة، لا سياق CSS موروث، لا بيانات ديناميكية، لا تفاعلات مع مكونات أخرى. هذا بالضبط ما يجعل اختبار المستوى المكوِّني موثوقًا. لكنه أيضًا ما يجعله أعمى عن مشاكل التجميع.
ما الذي ينكسر بصريًا في الإنتاج؟ نادرًا ما يكون مكونًا معزولاً. ما ينكسر هو التركيبة. مكوِّن الرأس (header) يتداخل مع مكوِّن التنقل لأن z-index تغيّر. شبكة المنتجات تختل محاذاة لأن مكوِّن البطاقة حصل على margin إضافي. نموذج يفيض من حاويته لأن تسمية أطول مما هو متوقع بلغة أخرى. التذييل يصعد إلى المحتوى الرئيسي لأن قسمًا وسيطًا فقد حده الأدنى من الارتفاع.
هذه الأخطاء غير مرئية في Storybook. كل مكوِّن، مأخوذًا على حدة، صحيح بصريًا. إنها تركيبتها هي التي تُسبب المشاكل. و Chromatic، بتصميمه، لا يختبر التجميع — إنه يختبر القوالب، لا المبنى.
Delta-QA يختبر المبنى. تقارن الأداة الصفحات الكاملة كما تُعرض في متصفح حقيقي، بجميع مكوناتها المُجمَّعة وأنماطها الموروثة وتفاعلاتها وبياناتها. إنه اختبار الواقع، لا اختبار مخطط المعماري.
بدون كود مقابل Storybook: مسألة الجمهور
Chromatic يستهدف مطوِّري الواجهة الأمامية العاملين مع Storybook. هذا جمهور مشروع ومهم. لكنه جمهور ضيّق.
لاستخدام Chromatic، تحتاج إلى مشروع Storybook مُهيَّأ، ومعرفة بكتابة stories، وفهم المراجع الأساسية ولقطات المرح البصرية، وارتياح مع سير عمل CI المعتمد على طلبات السحب. باختصار: يجب أن تكون مطوِّر واجهة أمامية.
مدير ضمان الجودة لديك الذي يريد التحقق من صفحة قبل الإصدار؟ لا يمكنه استخدام Chromatic مباشرة. مالك المنتج الذي لاحظ مشكلة بصرية في بيئة التجهيز؟ لا يمكنه تشغيل اختبار. المصمِّم الذي يريد مقارنة المخطط بالإنتاج؟ لا وصول له إلى سير عمل Chromatic دون المرور عبر مطوِّر.
Delta-QA يفتح الاختبار البصري أمام الفريق بأكمله. لا حاجة إلى Storybook. لا كود. لا خط أنابيب CI/CD لفهمه. تُقدِّم عنوانَي URL، تُشغّل المقارنة، وتقرأ التقرير. الجميع مُستقل.
المكونات مقابل الصفحات: مستويان متكاملان للاختبار
بدلاً من مواجهة Chromatic و Delta-QA ببعضهما، من الأدق وضعهما كمستويين ضمن استراتيجية اختبار بصري شاملة.
المستوى المكوّني (Chromatic): التحقق من أن كل قالب في نظام التصميم يتوافق مع مواصفاته. إنه اختبار الوحدة البصري. يلتقط الانحدارات على أكثر المستويات دقّة، وفي أبكر مرحلة من دورة التطوير.
مستوى الصفحة (Delta-QA): التحقق من أن الصفحات المُجمَّعة ببيانات حقيقية وأنماط متتالية صحيحة بصريًا. إنه اختبار التكامل البصري. يلتقط مشاكل التجميع، وتعارضات الأنماط، والانحدارات التي لا توجد إلا في سياق الصفحة الكاملة.
الفريق الذي يفعل كليهما يتمتّع بتغطية بصرية استثنائية. لكن إن لم تستطع إلا اختيار واحد — السؤال هو: ما الذي يحمي مستخدميك بشكل أفضل؟ مستخدموك لا يرون مكونات Storybook. إنهم يرون صفحات.
النموذج الاقتصادي: اللقطات مقابل الحرية
Chromatic يفرض رسومًا بحسب اللقطة (snapshot) شهريًا. مع 200 مكوِّن بثلاث stories لكل منها على متصفحَين، ذلك 1,200 لقطة لكل بناء. عشرون بناءً يوميًا (لفريق نشط) يعني 720,000 لقطة شهريًا.
الخطة المجانية تقدّم 5,000 لقطة شهريًا — كافية لمشروع صغير، لكنها تُستنفد في أيام على نظام تصميم متوسط. الخطط المدفوعة تتدرّج مع الحجم. تجد الفرق نفسها تُقيِّد عدد stories المُختبرة أو تردّد وتيرة البناء للبقاء ضمن الحصة. أداة جودة تحفِّز على تقليل تغطية الاختبار — المفارقة لذيذة حقًا.
Delta-QA مجاني. لا حصص للقطات، لا حدود للصفحات، لا قيود على التكرار. جودة تغطيتك البصرية تعتمد على رغبتك في الإتقان، لا على قدرتك على الدفع.
ما يفعله Chromatic ولا يفعله Delta-QA
مراجعة UI تعاونية. يتيح سير عمل Chromatic للمطوِّرين والمصممين التحقق من التغييرات البصرية للمكونات ضمن طلب سحب. لا يوجد مقابل دقيق في Delta-QA.
اختبار جميع حالات المكوِّن. إذا كان زرّك يملك 12 متغيّرًا، يختبرها Chromatic جميعًا بشكل منهجي. اختبار هذه المتغيّرات الاثني عشر على مستوى الصفحة سيتطلب العثور على 12 صفحة مختلفة تظهر فيها.
تكامل أصلي مع Storybook. صُنع بواسطة منشئي Storybook. التكامل بعمق ما يمكن.
توثيق بصري حي. يحافظ Chromatic على تاريخ بصري لكل مكوِّن عبر الزمن.
ما يقدّمه Delta-QA ولا يغطيه Chromatic
اختبار الواقع. صفحات الإنتاج ببيانات حقيقية وأنماط موروثة حقيقية وتفاعلات مكونات حقيقية. لا مثالية نظيفة لـ Storybook.
وصول شامل. أي عضو في الفريق يمكنه تشغيل اختبار بصري. لا حاجة لمهارات مطوِّر.
استقلال تقني. Delta-QA يعمل بغض النظر عن حزمة تقنيات الواجهة الأمامية لديك. React، Vue، Angular، Svelte، WordPress، Shopify، jQuery القديم — إن ظهر في متصفح، يختبره Delta-QA. Chromatic يتطلب Storybook، الذي يتطلب إطار عمل JavaScript حديثًا.
سيادة البيانات. تنفيذ محلي، لا تُرسل أي بيانات إلى خوادم أطراف ثالثة.
تكلفة صفر. لا حسابات للقطات، لا خطة لاختيارها، لا بطاقة ائتمان لإدخالها.
الأسئلة الشائعة
هل يعمل Chromatic بدون Storybook؟
لا. Chromatic يعتمد على stories لتحديد ما يخضع للاختبار البصري. Delta-QA يعمل بشكل مستقل عن أي إطار عمل — يختبر صفحات الويب بغض النظر عن الحزمة التقنية التي تُنتجها.
هل يكفي اختبار المكونات في Storybook لضمان الجودة البصرية؟
لا. المكونات المُختبرة بمعزل لا تُعيد إنتاج ظروف الصفحة الحقيقية: وراثة الأنماط، البيانات الديناميكية، تفاعلات المكونات، الأنماط من أطراف ثالثة. Chromatic يتحقق من أن قوالبك صحيحة. Delta-QA يتحقق من أن التجميع صحيح.
هل يكشف Chromatic مشاكل التجاوب؟
نعم، ضمن ما يعرضه Storybook. لكن مشاكل التجاوب الخاصة بالصفحة (عنصر يفيض عند تركيبه مع غيره، تخطيط ينكسر مع بيانات حقيقية طويلة) لن تُكتشف.
هل الخطة المجانية لـ Chromatic كافية لمشروع صغير؟
الخطة المجانية تقدّم 5,000 لقطة/شهر. مشروع بـ 100 مكوِّن وثلاث stories لكل وبنائَين يوميًا يستهلك نحو 18,000 لقطة/شهر. Delta-QA بلا قيود على الحجم.
هل يمكن استخدام Delta-QA لاختبار مكونات معزولة؟
Delta-QA مُحسَّن للصفحات الكاملة. إن كانت المكونات مُعرَّضة على عناوين URL يمكن الوصول إليها (مثل Storybook مُنشر)، يمكنك تقنيًا اختبارها. لكن لاختبار المكونات المعزولة، يبقى Chromatic المرجع.
للمزيد من القراءة
- Delta-QA مقابل Chromatic: اختبار صفحات كاملة أم مكونات معزولة؟
- Delta-QA مقابل BackstopJS: اختبار بصري بدون كود مقابل تهيئة يدوية
- Chromatic مقابل Percy: أي أداة اختبار بصري تختار في 2026؟
Chromatic و Delta-QA ليسا خصمَين — إنهما وجهان لعملة واحدة. أحدهما يحمي مكوناتك، والآخر يحمي صفحاتك. إن استطعت الحصول على كليهما، فخذ كليهما. إن وجب الاختيار، فاختر ما يحمي ما يراه مستخدموك فعلًا.