الانحدار البصري: تغيير غير مقصود في مظهر واجهة المستخدم — تخطيط، ألوان، طباعة، مسافات، محاذاة — ناتج عن تغيير في الكود أو تحديث تبعية أو تغيير إعدادات، قابل للكشف فقط بالمقارنة الآلية بين حالتين للواجهة.
نجح Lost Pixel في شق مكانة مثيرة للاهتمام في نظام الاختبار البصري. مفتوح المصدر، متخصص في مكونات Storybookk](/ar/blog/storybook-ikhtbar-basari-bidun-chromatic/) وLadle، جاهز للتكامل مع خطوط أنابيب CI — يتحدث مباشرة إلى مطوري الواجهات الأمامية الذين يعيشون في عالم المكونات.
لكن السؤال الذي لا يُطرح مبكراً بما يكفي أثناء التقييم هو: هل حاجتك فعلية هي اختبار مكونات معزولة في Storybook، أم التحقق من عمل موقعك بصرياً في ظروف حقيقية؟
الإجابة تحدد ما إذا كنت بحاجة إلى Lost Pixel أو Delta-QA أو كليهما على الأرجح. ويعتمد ذلك أقل على التكنولوجيا وأكثر على تركيبة فريقك وطبيعة مشاكل الجودة البصرية لديك.
Lost Pixel: متخصص المكونات
Lost Pixel هي أداة اختبار انحدار بصري مفتوحة المصدر. مجالها الأساسي: Storybook وLadle وHistoire (بيئات تطوير مكونات واجهة المستخدم) والصفحات الثابتة. تلتقط الأداة لقطات شاشة من مكوناتك أو صفحاتك وتقارنها بين عمليات التشغيل لاكتشاف التغييرات البصرية.
تكامل Storybook كنقطة قوة
إذا كنت تطور باستخدام Storybook — وفي عام 2026، أغلب فرق الواجهة الأمامية React أو Vue أو Angular تفعل ذلك — فإن Lost Pixel يتصل مباشرة بفهرس stories الخاص بك. كل story يصبح تلقائياً اختباراً بصرياً. لا حاجة لسرد الصفحات يدوياً أو كتابة سيناريوهات تنقل: فهرس Storybook الخاص بك هو جناح اختبارك البصري.
أداة بناها المطورون ومن أجل المطورين
يُثبَّت Lost Pixel عبر npm، ويُكوَّن في ملف إعدادات TypeScript أو JavaScript، ويعمل عبر سطر الأوامر. التوثيق المتعلق بالتكامل مع CI متوفر لـ GitHub Actions، ومنصة Lost Pixel (الإصدار السحابي) تضيف سير عمل مراجعة الموافقة على الخطوط الأساسية.
منحنى التعلم معقول بالنسبة لمطور. لكن هذه البساطة الملائمة للمطورين تمثل عائقاً أمام الجميع الآخرين. إذا لم تكن مطوراً، فإن تثبيت حزمة npm وكتابة ملف إعدادات وإعداد GitHub Action يشبه قيادة غواصة بدون تدريب من حيث سهولة الوصول.
مقارنة بكسل ببكسل
يقارن Lost Pixel لقطات الشاشة — صوراً ملتقطة من مكوناتك أو صفحاتك. لهذا النهج ميزة لا تُنكر: إنه بصري. لكن له نقطة ضعف هيكلية أيضاً: الحساسية لضوضاء العرض. اختلافات الصقل المضاد، واختلافات الخطوط بين البيئة المحلية وبيئة CI، والحركات غير المتزامنة — كلها تولّد إيجابيات كاذبة.
Delta-QA: اختبار بصري للفريق بأكمله
ينطلق Delta-QA من ملاحظة بسيطة: الاختبار البصري لا ينبغي أن يكون حكراً على المطورين. الأشخاص الأكثر تأهيلاً للحكم على الجودة البصرية للواجهة — المصممون، ومهندسو ضمان الجودة الوظيفي، ومسؤولو المنتجات — غالباً ما يُستبعدون لأن الأدوات الحالية تتطلب مهارات تقنية.
نهج بدون كود
مع Delta-QA، تثبّت تطبيق سطح مكتب. تُدخل عنوان URL الخاص بموقعك. تتصفح بشكل طبيعي. تلتقط الأداة الحالة الهيكلية لكل صفحة وتُنشئ خطوطاً أساسية. في التشغيل التالي، تقارن الحالة الجديدة بالخطوط الأساسية وتُظهر ما تغيّر.
بدون npm. بدون ملف إعدادات. بدون سطر أوامر. بدون GitHub Actions. إذا كنت تستطيع استخدام متصفح ويب، يمكنك استخدام Delta-QA.
تحليل هيكلي بدلاً من البكسلات
حيث يقارن Lost Pixel الصور بكسل ببكسل، يحلل Delta-QA خصائص CSS المحسوبة لعناصر الصفحة. عندما يُشير Delta-QA إلى تغيير، يخبرك بالضبط ما حدث: "حجم خط العنوان انخفض من 24px إلى 20px"، "لون خلفية الرأسية تغيّر من #FFFFFF إلى #F8FAFC"، "حشوة الزر انخفضت من 16px إلى 12px".
هذه المعلومات قابلة للتنفيذ مباشرة. التحليل الهيكلي يلغي أيضاً الإيجابيات الكاذبة بطريقة تصميمية — بما أن Delta-QA لا ينظر إلى البكسلات بل إلى خصائص CSS، فإن اختلافات العرض لا تولّد ضوضاء.
محلي افتراضياً
يعمل Delta-QA بالكامل محلياً. لا تخرج أي بيانات من جهازك. النسخة المكتبية مجانية مع عدد غير محدود من اللقطات.
النقاش المركزي: مكونات معزولة مقابل صفحات حقيقية
يخفي الاختيار بين Lost Pixel وDelta-QA نقاشاً أعمق حول معنى "اختبار بصرياً" لتطبيق ما فعلياً.
نهج المكونات: ضروري لكنه غير كافٍ
عبر تكامل Storybook، يختبر Lost Pixel المكونات المعزولة. لكن أخطر الأخطاء البصرية لا تحدث على مستوى المكون المعزول. تحدث عندما تتجمع المكونات في صفحة حقيقية. مكون تنقل يدفع المحتوى للأسفل 50 بكسل. تذييل يتداخل مع المحتوى الرئيسي على الهاتف. شبكة بطاقات تنكسر عندما يكون النص أطول من المتوقع.
هذه المشاكل من التكامل البصري غير مرئية في Storybook، لأن Storybook لا يُظهر التكامل — إنه يُظهر الطوب الفردي. اختبار كل ترس في ساعة على حدة والاستنتاج بأن الساعة تعمل لا يأخذ في الاعتبار كيف تتشابك التروس معاً.
نهج الصفحات: واقع المستخدم
يختبر Delta-QA صفحات حقيقية، في متصفح حقيقي، مع HTML وCSS وJavaScript وتفاعلات حقيقية. عندما يخبرك Delta-QA أن صفحتك صحيحة بصرياً، فهذا لأنها كذلك في الظروف التي سيراها فيها مستخدموك.
هذا النهج يلتقط أخطاء التكامل البصري التي تتفاداها اختبارات المكونات المعزولة بطريقة تصميمية.
Lost Pixel أفضل في
تكامل Storybook الأصلي. إذا كنت تحافظ على فهرس Storybook، يحوّله Lost Pixel إلى جناح اختبار بصري دون جهد.
أتمتة CI/CD. يتكامل Lost Pixel بشكل طبيعي مع خطوط أنابيب GitHub Actions. الاختبارات البصرية تُطلق تلقائياً مع كل طلب سحب.
التكلفة. Lost Pixel مفتوح المصدر. النسخة المستضافة ذاتياً مجانية.
تفصيلية المكون. اختبار كل مكون على حدة يتيح تحديد مواقع الانحدارات بأدنى مستوى.
مجتمع مفتوح المصدر. مجتمع نشط، تطوير شفاف، إمكانية المساهمة بالتحسينات.
Delta-QA أفضل في
الوصول الكلي. لا متطلبات تقنية مسبقة. إذا كنت تستطيع تصفح موقع، يمكنك استخدام Delta-QA.
جودة النتائج. التحليل الهيكلي ينتج نتائج دقيقة ومفصلة دون توليد إيجابيات كاذبة.
تغطية التكامل. يختبر Delta-QA صفحات كاملة، وليس مكونات معزولة. يلتقط أخطاء التكامل البصري التي تتفاداها اختبارات المكونات بطريقة تصميمية.
سيادة البيانات. كل شيء يحدث محلياً. لا تخرج أي بيانات من جهازك.
وقت الإعداد. من التثبيت إلى أول اختبار بصري: دقيقتان إلى ثلاث دقائق مع Delta-QA. Lost Pixel: ساعة إلى ساعتين لمطور متمرس.
إشراك الفريق بأكمله. المصممون ومهندسو ضمان الجودة ومسؤولو المنتجات والمطورون — يمكنهم جميعاً المشاركة وقراءة النتائج والموافقة على التغييرات أو رفضها.
الحكم النهائي: من يختار ماذا
اختر Lost Pixel إذا كنت فريق تطوير واجهة أمامية يعمل مع Storybook أو Ladle. إذا كانت أولويتك اكتشاف الانحدارات على مستوى المكون الفردي. إذا كان لديك خط أنابيب GitHub Actions وتريد اختبارات بصرية آلية مع كل طلب سحب.
اختر Delta-QA إذا كان فريقك يضم أشخاصاً غير تقنيين يحتاجون المشاركة في الاختبار البصري. إذا كنت بحاجة لاختبار صفحات كاملة، وليس فقط مكونات معزولة. إذا كنت تريد نتائج دقيقة وقابلة للتنفيذ دون إيجابيات كاذبة. إذا كانت سيادة البيانات مهمة. إذا كنت تريد أن تكون جاهزاً للعمل في دقائق.
اختر كليهما إذا كنت تريد تغطية كاملة. Lost Pixel في خط أنابيب CI لمراقبة انحدارات المكونات مع كل طلب سحب. Delta-QA على أجهزة عمل الفريق لاختبار الصفحات الكاملة وإشراك الأشخاص غير التقنيين والتحقق من التكامل البصري قبل كل إصدار.
الأسئلة الشائعة
Lost Pixel مفتوح المصدر ومجاني — لماذا أختار Delta-QA؟
Lost Pixel مجاني من حيث الرخصة لكنه يتطلب استثماراً بالوقت والمهارات التقنية. Delta-QA مجاني (النسخة المكتبية) ومتاح دون أي متطلب تقني مسبق. التكلفة الحقيقية لأداة ليست رخصتها — بل الوقت الذي يستغرقه فريقك ليصبح منتجاً معها.
هل يمكن لـ Delta-QA اختبار مكونات Storybook مثل Lost Pixel؟
يختبر Delta-QA صفحات ويب كاملة، وليس مكونات Storybook المعزولة. إذا كنت تصل إلى Storybook الخاص بك عبر متصفح، يمكنك تقنياً اختبار storiesك مع Delta-QA، لكن هذا ليس استخدامه الأساسي. نقطة قوة Delta-QA هي اختبار التكامل الحقيقي لمكوناتك في صفحات كاملة.
هل يكتشف المقارن الهيكلي لـ Delta-QA نفس المشاكل التي يكتشفها المقارن البكسلي لـ Lost Pixel؟
التحليل الهيكلي يكتشف جميع تغييرات خصائص CSS — الألوان والأحجام والهوامش والخطوط والمواضع والحدود. ويتجاوز ذلك بتقديم تفصيل دقيق لكل تغيير. مع ذلك، التغييرات البصرية البحتة غير المرتبطة بـ CSS (صورة معدّلة، محتوى نصي مختلف) يُكتشف بها كلا النهجين بطريقة مختلفة. الأدواتتان متكاملتان.
هل Storybook مطلوب لاستخدام Lost Pixel؟
لا، يمكن لـ Lost Pixel أيضاً اختبار صفحات ويب كاملة في وضع "page shots". لكن تكامل Storybook هو عرض قيمته الأساسي. بدون Storybook، تفقد ميزة التغطية التلقائية للمكونات.
أي أداة أسرع في الإعداد؟
Delta-QA، بلا منازع. ثبّت التطبيق، افتح موقعك، تصفح — أنت تختبر في أقل من ثلاث دقائق. Lost Pixel يتطلب npm وملف إعدادات وStoryboard عاملاً ويفضلاً خط أنابيب CI مُعدّاً.
هل يمكن للأداتين العمل معاً؟
نعم، وهي استراتيجية موصى بها. Lost Pixel يراقب انحدارات المكونات في خط أنابيب CI مع كل طلب سحب. Delta-QA يختبر الصفحات الكاملة على أجهزة عمل الفريق. مستويا الاختبار يكملان بعضهما ويغطيان نقاط عمى مختلفة.
للمزيد من القراءة
- Delta-QA مقابل BackstopJS: بدون كود هيكلي أم مفتوح المصدر بكسل ببكسل؟
- Delta-QA مقابل Screenshotbot: سطح مكتب بدون كود أم SaaS أولوية CI؟
مكونات Storybook مثالية لكن صفحاتك الحقيقية بها أخطاء بصرية؟ هذا بالضبط ما يحله Delta-QA. اختبر صفحاتك الكاملة في دقيقتين.