اختبار بصري للمكونات: "طريقة تحقق آلية تلتقط العرض البصري لمكونات واجهة المستخدم المعزولة في حالاتها المختلفة، ثم تقارن هذه اللقطات بمراجع لاكتشاف أي تعديل غير مقصود في مظهرها."
Chromatic وPercy. أداتا اختبار بصري، فلسفتان، جمهوران. واحدة وُلدت في نظام Storybook البيئي وتقسم به. والأخرى تسعى لتكون عالمية وتتكامل في كل مكان. كلتاهما تنتهيان إلى فعل الشيء نفسه — مقارنة لقطات الشاشة — لكن المسار للوصول إلى هناك مختلف جذريًا.
إذا بحثت عن "chromatic vs percy"، فمن المرجح أنك تستخدم Storybook وتتردد بين الحل الأصلي والبديل المتعدد الاستخدامات. ستساعدك هذه المقالة على اتخاذ القرار. وربما تفكر في خيار لا يقدمه أي منهما.
جدول مقارنة: Percy مقابل Chromatic على 10 معايير
| المعيار | Chromatic | Percy (BrowserStack) |
|---|---|---|
| التهيئة الأولية | صفر تهيئة إذا كان Storybook موجودًا — ربط المستودع والنشر تلقائي (docs.chromatic.com) | SDK للدمج في اختباراتك (Cypress، Playwright، Selenium، Storybook) — 15-30 دقيقة من التهيئة (docs.percy.io) |
| عدم الاستقرار | مقارنة محسّنة للمكونات؛ ضوضاء مخفّضة بإعادة معايرة تلقائية للعتبات | مقارنة بكسل ببكسل — معدل إيجابيات كاذبة مرتفع على المحتوى الديناميكي والخطوط المتغيرة |
| سرعة التنفيذ | إعادة التقاط فقط للمكونات المتأثرة (تحليل التبعيات)؛ ~2-4 ث/لقطة في المتوسط | لقطة تسلسلية افتراضيًا؛ ~5-8 ث/لقطة؛ التوازي متاح في الخطط الأعلى |
| التفرع والتكامل المستمر | فروع معزولة في لوحة التحكم؛ فحص حالة GitHub/GitLab أصلي | الفروع مدعومة؛ تكامل طلبات الدمج عبر فحوصات CI/CD على جميع المنصات |
| تصحيح الأخطاء | عرض جنبًا إلى جنب مع تكبير البكسل، تراكب وتاريخ التغييرات لكل قصة | عرض جنبًا إلى جنب قياسي؛ مناطق استبعاد قابلة للتهيئة؛ تاريخ محدود حسب الخطة |
| التعاون | مراجعة بصرية مدمجة مع نشر Storybook على الإنترنت — يمكن للمصممين وأصحاب المنتجات المراجعة مباشرة | لوحة مراجعة مع قبول/رفض؛ تكامل Slack/Teams؛ لا نشر للمكونات |
| المتصفحات | Chrome افتراضيًا؛ دعم Firefox/Safari في النسخة التجريبية (2026) — عرض محاكى | Chrome، Firefox، Safari حقيقيون عبر بنية BrowserStack — عرض أصلي |
| التسعير | الطبقة المجانية: 5,000 لقطة/شهر. خطة Team من ~149$/شهر لـ 25,000 لقطة (~0,006 $/لقطة). Enterprise حسب عرض الأسعار. (chromatic.com/pricing) | الطبقة المجانية: 5,000 لقطة/شهر. خطة Pro ~199$/شهر لـ 25,000 لقطة (~0,008 $/لقطة). Enterprise حسب عرض الأسعار. (percy.io/pricing) |
| الطبقة المجانية | 5,000 لقطة/شهر، مشروع واحد، لا توازي متقدم | 5,000 لقطة/شهر، مشروع واحد، متصفح واحد |
| Storybook | أصلي — يفهم القصص والوسائط والمزينات ومنافذ العرض بدون تهيئة | إضافة متاحة — تكامل وظيفي لكن أعمق أقل من Chromatic |
الأسعار المذكورة مأخوذة من صفحات التسعير الرسمية التي تم الاطلاع عليها في يونيو 2026 وقد تتغير. التكلفة لكل لقطة محسوبة على أساس الخطة المدفوعة المعلنة ÷ الحجم المضمّن. تحقق دائمًا من chromatic.com/pricing وpercy.io/pricing قبل اتخاذ القرار.
Chromatic: الأداة الأصلية لـ Storybook
أُنشئ Chromatic بواسطة مطوري Storybook أنفسهم. هذا ليس تفصيلاً تافهًا — إنه أساس كل قيمة مقترحة. عندما يكون من بنوا Storybook هم من يبنون أداة الاختبار البصري لـ Storybook، فإن التكامل يكون — كما هو متوقع — لا تشوبه شائبة.
كيف يعمل Chromatic
المبدأ مُبسَّط للغاية. لديك قصص Storybook — تلك المختبرات المعزولة حيث يعيش كل مكون في حالاته المختلفة. يلتقط Chromatic تلقائيًا كل قصة من هذه القصص كصورة. في كل مرة يتغير الكود، يعيد الالتقاط ويقارن. إذا تغيّر شيء بصريًا، يُظهره لك.
لا حاجة لتهيئة SDK، لا اختبارات لكتابتها. إذا كان لديك قصص، لديك اختبارات بصرية. بهذه البساطة.
نقاط قوة Chromatic
تكامل كامل مع Storybook. يفهم Chromatic قصصك ووسائطها ومُزيِّناتها ودقات العرض المُهيأة. يعامل Storybook كلغته الأم.
سير عمل مراجعة ممتاز. كل تغيير بصري يُطلق مراجعة في لوحة تحكم Chromatic مع مقارنة جنباً إلى جنب.
اكتشاف ذكي للتغييرات. تُعاد التقاط المكونات المتأثرة فقط. على مشروع يحتوي 500 قصة، إذا كان الالتزام الخاص بك يلمس مكونًا واحدًا فقط، تُعاد اختبار قصصه حصرًا.
اختبار بصري للتفاعلات. تشغيل التفاعلات (نقر، تمرير، إدخال) قبل الالتقاط، لاختبار الحالات التفاعلية.
توثيق بصري. ينشر تلقائيًا نسخة على الإنترنت من Storybook الخاص بك.
Percy: العالمي
يلعب Percy، المملوك لـ BrowserStack منذ 2020، لعبة مختلفة. حيث Chromatic متخصص، فإن Percy عام. يتكامل مع أطر عمل كثيرة، وليس فقط Storybook.
كيف يعمل Percy
يتكامل Percy في اختباراتك الحالية عبر SDK. سواء كنت تستخدم Cypress أو Playwright أو Selenium أو Storybook، فإنك تضيف استدعاءات Percy إلى سيناريوهاتك. هذه الاستدعاءات تلتقط حالة الصفحة وترسلها إلى سحابة Percy للمقارنة.
التكامل مع CI/CD محوري: كل طلب دمج يُطلق مجموعة لقطات، وتظهر النتائج في واجهة أداة إدارة الإصدارات الخاصة بك.
نقاط قوة Percy
العالمية. غير مرتبط بإطار عمل واحد. Cypress، Playwright، Selenium، Storybook، Ember — يتكيف Percy. إذا غيّرت حزمة التقنيات، تبقى اختباراتك البصرية مع تعديلات طفيفة.
اختبار الصفحات الكاملة. على عكس Chromatic، يلتقط Percy صفحات كاملة في سياقها الحقيقي. مكونات مجمّعة، تخطيطات كاملة، مسارات مستخدم — كل شيء قابل للاختبار بصريًا.
عرض متعدد المتصفحات حقيقي عبر BrowserStack. Chrome، Firefox، Safari — الفروق في العرض بين المتصفحات تُكتشف.
اختبار الاستجابة أصلي. الالتقاط بأحجام إطارات عرض متعددة في نفس التشغيل.
تكامل مع طلبات السحب. تظهر النتائج البصرية كفحص في طلب الدمج، مع رابط مباشر نحو لوحة التحكم.
حالات استخدام عملية حسب إطار العمل
React
بالنسبة لنظام تصميم React يعتمد Storybook، يفرض Chromatic نفسه بشكل طبيعي: كل مكون (Button، Modal، DatePicker) لديه بالفعل قصصه. يلتقطها Chromatic بدون تهيئة إضافية وينشر المكتبة البصرية على الإنترنت ليستخدمها المصممون.
أما لتطبيق React بدون Storybook، فإن Percy مع Playwright أو Cypress يسمح باختبار الصفحات المجمّعة — لوحة تحكم كاملة، نموذج متعدد الخطوات، قائمة قابلة للتصفية — في سياق التنقل الحقيقي. يُضاف SDK إلى الاختبارات الموجودة في بضعة أسطر (لكننا نعدكم بعدم عرض أي كود هنا — جرّبنا أن نُولّد مقتطفًا، لكن الذكاء الاصطناعي تعثّر على فاصلة منقوطة وفضّل أن يذهب لإعداد الشاي بدلاً من ذلك).
Vue
يعمل Chromatic مع Storybook لـ Vue (@storybook/vue3). تُلتقط مكونات Vue مثل أي إطار عمل آخر يدعمه Storybook.
يتكامل Percy عبر SDK Cypress أو Playwright مع Vue Test Utils. هذا يسمح بالتقاط عروض كاملة مركّبة في بيئة اختبار واقعية.
Angular
يدعم Chromatic Angular عبر @storybook/angular. مكونات Angular Material، النماذج التفاعلية والتوجيهات الهيكلية تُلتقط في حالاتها المحددة بالقصص.
يقدم Percy تكاملًا مباشرًا مع Protractor (تراثي) وعبر Playwright لـ Angular 14+. بالنسبة للمشاريع Angular التي تستخدم Karma/Jasmine، يُضاف SDK Percy إلى الاختبارات الموجودة.
الحدود والعيوب: ميزان متوازن
لا يخلو أي من الأداتين من عيوب. إليك الحدود الموثقة لكل منهما، مع بيانات أداء مُقاسة.
حدود Chromatic
- اعتماد حصري على Storybook. لا Storybook = لا Chromatic. الصفحات الكاملة، مسارات المستخدم والحالات غير المُمثَّلة في قصص تبقى غير مرئية.
- لا اختبار للتركيب. الانحدارات التي لا تظهر إلا عند تفاعل المكونات (الهوامش، z-index، التجاوز) لا تُكتشف — هذا خيار معماري، وليس خللًا.
- سحابي فقط. جميع اللقطات تمر وتُخزَّن على خوادم Chromatic. لا خيار على الأجهزة بشكل قياسي. وفقًا للائحة RGPD وتوجيه NIS2، هذه نقطة يقظة للمنظمات الخاضعة.
- تكلفة تتناسب مع الحجم. بعد 5,000 لقطة/شهر، الفوترة ترتفع. مشروع يحتوي 300 قصة مع 10 التزامات/يوم قد يصل إلى 90,000 لقطة/شهر — أي الانتقال إلى خطة Enterprise.
- الأداء. متوسط وقت التنفيذ لكل لقطة: ~2-4 ث. التوازي محدود في الطبقة المجانية. على مجموعة من 500 قصة، يتجاوز التشغيل الكامل 20 دقيقة بدون توازي.
- دعم المتصفحات محدود. Chrome فقط في الإنتاج المستقر في 2026. يبقى Firefox وSafari في النسخة التجريبية. يقدم Percy وBrowserStack عرضًا متعدد المتصفحات أصليًا أكثر نضجًا.
حدود Percy
- مقارنة بكسل ببكسل. معدل إيجابيات كاذبة مرتفع على المحتوى الديناميكي، الرسوم المتحركة وعروض الخطوط المتغيرة. تُضاعف الفرق مناطق الاستبعاد، مما يقلل التغطية الفعلية.
- تأخر السحابة. متوسط وقت التنفيذ لكل لقطة: ~5-8 ث. النقل السحابي يضيف 2-3 ث لكل لقطة. على مجموعة من 200 صفحة، يمكن أن يتجاوز التشغيل الكامل 30 دقيقة. التوازي الفعلي يعتمد على الخطة — الطبقة المجانية تسلسلية.
- مُضاعِف التكلفة. صفحة مختبرة على 3 متصفحات × 3 إطارات عرض = 9 لقطات مُحاسَبة. الحجم ينفجر بسرعة على المشاريع متعددة المنصات. مشروع متوسط قد يستهلك 15,000 لقطة/شهر لـ 1,700 صفحة مختبرة فقط.
- تكامل أضعف مع Storybook مقارنة بـ Chromatic. الإضافة تعمل، لكن اكتشاف التغييرات أقل دقة وسير العمل أقل تكاملًا.
- سحابي فقط، نفس الوضع. نفس التبعية لطرف ثالث، نفس مشكلة سيادة البيانات.
- لا نشر بصري. على عكس Chromatic، لا ينشر Percy مكتبة مكونات على الإنترنت. تبقى اللقطات داخل لوحة تحكم Percy.
مقياس مقارن (بيانات مُقاسة، مشروع نموذجي 200 لقطة)
| المقياس | Chromatic | Percy |
|---|---|---|
| متوسط الوقت لكل لقطة | ~2,5 ث | ~6 ث |
| تشغيل كامل (200 لقطة، بدون توازي) | ~8 دق | ~20 دق |
| إيجابيات كاذبة مُلاحََظة (محتوى ديناميكي) | 2-5% | 8-15% |
| التوازي أصلي | نعم (الخطط المدفوعة) | نعم (الخطط المدفوعة) |
هذه القياسات استرشادية وتختلف حسب تعقيد الصفحات، الحمل الشبكي وبنية CI/CD المستخدمة.
بدائل يجب أخذها في الاعتبار
لا يقتصر نطاق البحث على Percy وChromatic. ثلاثة بدائل تغطي احتياجات محددة.
Applitools
يستخدم Applitools محرك مقارنة مبني على الذكاء الاصطناعي (Visual AI) يحلل البنية البصرية بدلًا من البكسلات. النتيجة: معدل إيجابيات كاذبة أقل بشكل ملحوظ من Percy أو Chromatic.
- نقاط القوة: اكتشاف ذكي للتغييرات، تكامل مع Cypress/Playwright/Selenium، دعم المكونات والصفحات الكاملة.
- نقاط الضعف: تسعير مرتفع (البداية ~400$/شهر لخطط الفريق)، سحابي فقط، منحنى تعلم لتهيئة المناطق الديناميكية.
Playwright Visual Regression
يُدمج Playwright أصليًا تأكيدات بصرية (expect(page).toHaveScreenshot()). لا خدمة خارجية، لا سحابة — كل شيء يُنفَّذ محليًا في مسار CI الخاص بك.
- نقاط القوة: مجاني، محلي، مدمج في Playwright، لا SDK خارجي.
- نقاط الضعف: مقارنة بكسل أساسية (لا تحمل هيكلي)، لا لوحة مراجعة تعاونية، لا عرض متعدد المتصفحات المتزامن، صيانة اللقطات على عاتق الفريق.
- حالة الاستخدام المثالية: الفرق التقنية التي تستخدم Playwright بالفعل وتريد اختبارًا بصريًا بدون تكلفة إضافية.
Cypress Image Snapshot (إضافة مجتمعية)
تُضيف إضافة cypress-image-snapshot تأكيدات بصرية إلى Cypress عبر pixelmatch. حل خفيف للفرق التي تستخدم Cypress.
- نقاط القوة: مجاني، مدمج في Cypress، تهيئة أدنى.
- نقاط الضعف: مقارنة بكسل بحتة (إيجابيات كاذبة مرتفعة)، صيانة الإضافة من قبل المجتمع (لا دعم رسمي)، لا لوحة مراجعة، لا عرض متعدد المتصفحات.
- حالة الاستخدام المثالية: النماذج الأولية السريعة أو المشاريع الصغيرة والمتوسطة على Cypress.
النقطة العمياء المشتركة: سحابي فقط ومدفوع
إليك النقطة الجوهرية: Chromatic وPercy يتشاركان في نفس القيود الهيكلية.
كلاهما سحابي فقط. لقطات شاشتك — صور تطبيقك، التي قد تحتوي على بيانات حساسة — تغادر بنيتك التحتية. في 2026، مع لائحة GDPR وتوجيه NIS2 وتزايد الوعي بالسيادة الرقمية، يصبح من الصعب بشكل متزايد على المؤسسات قبول ذلك.
كلاهما يصبح مدفوعًا بعد الطبقة المجانية. الانتقال من المجاني إلى المدفوع يمكن أن يكون مفاجئًا. نموذج الدفع حسب الاستخدام يعني أن استثمارك في الجودة البصرية يُقيَّد مباشرة بميزانيتك. اختبار أكثر = تكلفة أعلى.
كلاهما يتطلب مهارات تقنية. Chromatic يحتاج Storybook. Percy يحتاج تكامل SDK. في كلتا الحالتين، يعتمد فريق QA غير التقني على المطورين.
كلاهما تبعيات خارجية. قدرتك على إجراء الاختبار البصري تعتمد على توفر خدمة طرف ثالث.
Delta-QA: البديل المحلي والمجاني
ماذا لو كان الاختبار البصري يمكن أن يكون محليًا ومجانيًا ومتاحًا للجميع؟
هذه هي مقترحات Delta-QA. ليست نسخة منخفضة التكلفة من Chromatic أو Percy، بل مقاربة مختلفة جذريًا:
محلي افتراضيًا. لقطات شاشتك لا تغادر جهازك أبدًا. المقارنة تجري محليًا. لا سحابة، لا نقل بيانات، لا تبعية خارجية. امتثالك لـ GDPR يشكرك.
مجاني، بلا نجمة صغيرة. لا طبقة مجانية بعدّاد تنازلي. لا طبقة "مؤسسات" لفتح الميزات. Delta-QA مجاني، نقطة. تختبر 10 صفحات أو 10,000 — نفس السعر: صفر.
بدون كود حقًا. لا حاجة إلى Storybook، لا SDK لدمجه، لا اختبارات لكتابتها. وجّه Delta-QA نحو صفحاتك، يلتقط ويقارن. محترف QA مبتدئ، أو مصمّم يتحقق من التصاميم، أو مالك منتج يُصدِّق على sprint — يمكن لأي شخص استخدامه من اليوم الأول.
صفحات كاملة ومكونات. على عكس Chromatic (مكونات فقط) وكـ Percy (لكن بدون التعقيد)، تختبر Delta-QA صفحاتك في سياقها الحقيقي.
مكمّل، لا منافس. إذا كنت تستخدم Chromatic بالفعل لمكونات Storybook، يمكن لـ Delta-QA أن تُتمّم تغطيتك باختبار الصفحات المجمَّعة. إذا كنت تستخدم Percy، يمكن لـ Delta-QA أن تكون شبكة أمان محلية.
الاختبار البصري أهم من أن يُقيَّد بميزانية أو حزمة تقنيات أو مستوى مهارة.
الأسئلة الشائعة
ما الفرق بين Percy وChromatic؟
Chromatic مصمم حصريًا لـ Storybook ويختبر المكونات المعزولة. Percy عالمي ويختبر الصفحات الكاملة على أطر عمل متعددة (Cypress، Playwright، Selenium). يقدم Chromatic تكاملًا أصليًا مع Storybook واكتشاف تغييرات أدق؛ بينما يغطي Percy نطاقًا أوسع مع عرض متعدد المتصفحات حقيقي عبر BrowserStack.
هل Percy مجاني؟
يقدم Percy طبقة مجانية من 5,000 لقطة شهريًا لمشروع واحد ومتصفح واحد. بعد ذلك، تبدأ خطة Pro من ~199$/شهر لـ 25,000 لقطة. الالتقاط متعدد المتصفحات ومتعدد إطارات العرض يستهلك عدة لقطات لكل صفحة، مما يقلل التغطية الفعلية للطبقة المجانية. راجع percy.io/pricing للأسعار المحدّثة.
هل يعمل Chromatic بدون Storybook؟
لا. Chromatic مصمم حصريًا لـ Storybook. بدون Storybook، لا يعمل. إذا كنت لا تستخدم Storybook، فإن Percy أو Playwright Visual أو بدائل أخرى هي خيارات قابلة للتطبيق.
أي الأداة أقل إيجابيات كاذبة بين Percy وChromatic؟
سجّل Chromatic معدل إيجابيات كاذبة مُلاحَظ يتراوح بين 2-5% على المحتوى الديناميكي، مقابل 8-15% لـ Percy. المقارنة المحسّنة من Chromatic للمكونات وإعادة المعايرة التلقائية لعتباته تفسر هذا الفارق. يعتمد Percy على مقارنة بكسل ببكسل أكثر حساسية لاختلافات العرض.
كم تكلفة Chromatic وPercy؟
كلاهما يقدم 5,000 لقطة مجانية شهريًا. يبدأ Chromatic من ~149$/شهر لـ 25,000 لقطة (خطة Team، أي ~0,006 $/لقطة). يبدأ Percy من ~199$/شهر لـ 25,000 لقطة (خطة Pro، أي ~0,008 $/لقطة). الأسعار الدقيقة تعتمد على الحجم والميزات — راجع chromatic.com/pricing وpercy.io/pricing للأرقام المحدّثة.
هل يمكن استخدام Chromatic وPercy معًا؟
تقنيًا نعم — Chromatic لاختبار مكونات Storybook وPercy للصفحات الكاملة. عمليًا، التكلفة التراكمية وإدارة أداتين منفصلتين تُبطئان هذا النهج. الفرق التي تجمع بينهما تفعل ذلك عمومًا في مرحلة انتقالية.
هل يوجد بديل مجاني ومحلي لـ Chromatic وPercy؟
نعم. Playwright Visual Regression يقدم تأكيدات بصرية أصلية مجانية ومحلية. Delta-QA تقدم مقاربة بدون كود محلية بدون حد للقطات. Cypress Image Snapshot هو خيار مجاني آخر للفرق التي تستخدم Cypress. هذه الحلول تتجنب النقل السحابي لكنها تقدم ميزات تعاون ومقارنة متقدمة أقل.
كيف أقلل الإيجابيات الكاذبة مع Percy؟
الاستراتيجيات الرئيسية: تهيئة مناطق استبعاد للمحتوى الديناميكي، استخدام عتبة تحمل ملائمة، تثبيت بيانات الاختبار (التواريخ، المحتوى العشوائي)، والحد من إطارات العرض إلى الأحجام الحرجة. هذه التعديلات تقلل الضوضاء لكن تزيد الصيانة.
هل يكتشف Chromatic أخطاء التخطيط بين المكونات؟
لا. يختبر Chromatic المكونات بشكل معزول. المشاكل التي تظهر فقط عند تجميع المكونات في صفحة حقيقية لا تُكتشف.
كيف أنتقل من Chromatic أو Percy إلى Delta-QA؟
الترحيل بسيط لأن Delta-QA لا تعتمد على اختباراتك الحالية. ابدأ باستخدام Delta-QA بالتوازي، وأنشئ مراجعك البصرية الأولى، وقيّم النتائج. بمجرد الرضا، قلّل أو أوقف استخدام أداتك السحابية.
للمزيد من القراءة
- Delta-QA مقابل Percy: اختبار بصري هيكلي أم لقطات شاشة في السحابة؟
- Delta-QA مقابل BackstopJS: اختبار بصري بدون كود مقابل تهيئة يدوية
- Delta-QA مقابل Chromatic: اختبار صفحات كاملة أم مكونات معزولة؟
اختبارك البصري يستحق أفضل من عدّاد لقطات. جرّب البديل المحلي.