الانحدار المرئي (Visual regression): تغيير غير مقصود في مظهر واجهة المستخدم (التخطيط، والألوان، والخطوط، والمسافات، والمحاذاة)، ناتج عن تعديل في الشيفرة البرمجية أو تحديث لاعتمادية أو تغيير في الإعدادات، ولا يمكن اكتشافه إلا بمقارنة آلية بين حالتين للواجهة.
استطاع Lost Pixel أن يحجز لنفسه مكاناً لافتاً في منظومة الاختبار المرئي. مفتوح المصدر، ومتخصص في مكوّنات Storybook وLadle، وقابل للدمج في خطوط CI: أداة كانت تخاطب مباشرة مطوري الواجهات الأمامية الذين يعيشون في عالم المكوّنات.
تحديث (10/2026). في 22 أبريل 2026، أعلن مؤسسو Lost Pixel توقف المنتج: ينضم الفريق إلى Figma. أُرشف مستودع GitHub، وآخر إصدار منشور على npm (3.22.0) يعود إلى نوفمبر 2024. تبقى الشيفرة البرمجية متاحة برخصة MIT، لكنها لن تتطور بعد اليوم. تحتفظ هذه المقارنة بوصفها للأداة، وهو مفيد إن كنتم لا تزالون تستخدمونها، وتساعدكم على اختيار ما بعدها.
لكن إليكم السؤال الذي لا يطرحه أحد مبكراً بما يكفي في التقييم: هل حاجتكم هي اختبار مكوّنات معزولة في Storybook، أم التحقق من أن موقعكم يعمل بصرياً في ظروف حقيقية؟
يحدد جواب هذا السؤال وجهة الانتقال: أداة أخرى تتمحور حول المكوّنات، أو مقاربة تختبر صفحاتكم الحقيقية مثل Delta-QA. ويتوقف هذا الجواب على تكوين فريقكم وطبيعة مشكلات الجودة المرئية لديكم أكثر مما يتوقف على التقنية.
جميع مقارناتنا، وفق معايير قابلة للتحقق: البدائل والمقارنات.
اكتشفوا الانحدارات المرئية دون لمس npm ولا ملف إعداد. يُستخدم Delta-QA بدون برمجة، بحساب مجاني ودون بطاقة مصرفية. جرّب Delta-QA مجانًا ←
Lost Pixel: متخصص المكوّنات
Lost Pixel أداة مفتوحة المصدر لاختبار الانحدار المرئي، أصبحت الآن مؤرشفة. ميدانها المفضل: Storybook وLadle وHistoire (بيئات تطوير مكوّنات الواجهة) وصفحات الويب الساكنة. تلتقط الأداة لقطات لمكوّناتكم أو صفحاتكم وتقارنها بين التنفيذات لاكتشاف التغيّرات المرئية.
التكامل مع Storybook كنقطة قوة
إن كنتم تطورون بـ Storybook (وفي 2026 تفعل ذلك غالبية فرق الواجهات الأمامية بـ React أو Vue أو Angular)، فإن Lost Pixel يتصل مباشرة بكتالوج الـ stories لديكم. يصبح كل story اختباراً مرئياً تلقائياً. لا حاجة إلى سرد الصفحات المراد اختبارها يدوياً ولا إلى كتابة سيناريوهات تنقل: كتالوج Storybook هو حزمة اختباراتكم المرئية.
إنه عرض قيمة واضح ومفهوم فوراً لمطور واجهات أمامية. أنتم تصونون الـ stories أصلاً للتوثيق ولتطوير المكوّنات. ويحوّلها Lost Pixel إلى اختبارات انحدار مرئي دون جهد إضافي.
وتدعم الأداة أيضاً Ladle (البديل الخفيف لـ Storybook) وHistoire (لـ Vue)، ما يغطي معظم منظومة تطوير المكوّنات. وإلى جانب المكوّنات، يستطيع Lost Pixel اختبار صفحات ويب كاملة في وضع «page shots».
أداة صممها المطورون للمطورين
يُثبَّت Lost Pixel عبر npm، ويُضبط في ملف إعداد بـ TypeScript أو JavaScript، ويُنفَّذ من سطر الأوامر. والتكامل مع CI موثّق لـ GitHub Actions، وكانت منصة Lost Pixel (النسخة السحابية) تضيف سير عمل لمراجعة الخطوط المرجعية واعتمادها؛ ومع التوقف المعلن، لا تعتمدوا عليها لمشروع جديد.
منحنى التعلم معقول لمطور. إن كنتم تعرفون npm وملفات الإعداد وGitHub Actions، فبإمكانكم أن تصبحوا جاهزين في أقل من ساعة. إنه أبسط من Applitools أو Percy: لا يغرقكم Lost Pixel بالخيارات والتكاملات.
لكن هذه البساطة للمطورين حاجز للجميع. إن لم تكونوا مطورين، فتثبيت حزمة npm وكتابة ملف إعداد وضبط GitHub Action في متناولكم بقدر قيادة غواصة دون تدريب.
المقارنة بكسلاً ببكسل
يقارن Lost Pixel لقطات شاشة: صوراً ملتقطة لمكوّناتكم أو صفحاتكم. إنها المقاربة الأكثر بداهة والأكثر انتشاراً في الاختبار المرئي. ترون حرفياً ما تغير، مركّباً على صورة.
لهذه المقاربة ميزة لا تُنكر: إنها مرئية. يعرض لكم التقرير الاختلافات بطريقة بيانية. لا تحتاجون إلى فهم CSS لترووا أن زراً تحرك أو أن لوناً تغير.
لكن لها أيضاً ضعفاً بنيوياً: الحساسية لضوضاء العرض. تباينات تنعيم الخطوط (anti-aliasing) بين عرضين، واختلافات الخطوط بين البيئة المحلية وCI، والرسوم المتحركة غير المتزامنة: كل ذلك يولّد إيجابيات كاذبة. يوفر Lost Pixel عتبة تسامح قابلة للضبط، لكن معايرة هذه العتبة بشكل صحيح فن دقيق: إن كانت شديدة الحساسية غرقتم في الإيجابيات الكاذبة، وإن كانت شديدة التسامح مرت الانحدارات الحقيقية دون أن تُلاحَظ.
Delta-QA: الاختبار المرئي لكل الفريق
ينطلق Delta-QA من ملاحظة بسيطة: ينبغي ألا يكون الاختبار المرئي حكراً على المطورين. فالأشخاص الأكثر كفاءة للحكم على الجودة المرئية لواجهة (المصممون، ومختبرو الجودة الوظيفيون، وملّاك المنتج) يُستبعدون غالباً من العملية لأن الأدوات القائمة تتطلب مهارات تقنية.
والمطورون ليسوا مستبعدين مع ذلك: فمن يكتبون اختباراتهم بـ Playwright لديهم الآن SDK Vision، سطر واحد لكل صفحة يُراد التحقق منها، في الفضاء نفسه مع السيناريوهات المسجَّلة بدون برمجة.
مقاربة بدون برمجة
مع Delta-QA، تنشئون حساباً مجانياً. تُدخلون عنوان موقعكم. تتصفحون بشكل طبيعي، كما يفعل مستخدم. تتحول كل خطوة من المسار إلى نقطة تحقق. وفي التنفيذ التالي، يعيد Delta-QA تشغيل المسار في متصفح حقيقي، ويقارن كل صفحة بمرجعها، ويريكم ما تغير.
لا npm. لا ملف إعداد. لا سطر أوامر. لا GitHub Actions. إن كنتم تعرفون استخدام متصفح ويب، فأنتم تعرفون استخدام Delta-QA.
وهذه الإتاحة ليست تنازلاً عن قوة الأداة: إنها خيار تصميمي يوسّع بشكل كبير نطاق الأشخاص القادرين على المساهمة في الجودة المرئية. يستطيع المصمم التحقق من احترام مواصفاته. ويستطيع مختبر الجودة الوظيفي إدراج الاختبار المرئي في روتين التحقق لديه. ويستطيع مالك المنتج التأكد من أن النشر لم يكسر شيئاً بصرياً قبل إعطاء الضوء الأخضر.
المقارنة كما تفعل العين البشرية بدل البكسلات
حيث يقارن Lost Pixel الصور بكسلاً ببكسل، يقارن Delta-QA الصفحة كما تفعل العين البشرية ويعرض بوضوح العنصر الذي تغيّر. وهو فرق جوهري يغيّر طبيعة النتائج.
عندما يبلّغ Delta-QA عن تغيير، فإنه لا يريكم مستطيلاً ملوناً على صورة. بل يخبركم بالضبط بما حدث: «تحول font-size للعنوان من 24px إلى 20px»، «تغير لون خلفية الترويسة من #FFFFFF إلى #F8FAFC»، «انخفض padding الزر من 16px إلى 12px».
هذه المعلومات قابلة للتنفيذ مباشرة. تعرفون ما ينبغي إصلاحه، وفي أي قاعدة CSS تبحثون، وكيف تتحققون من فعالية الإصلاح. أما مع مقارنة الصور، فتعرفون أن شيئاً تغير بصرياً: وإيجاد ماهيته بالضبط يتطلب تحرياً يدوياً.
وتحد هذه المقاربة أيضاً من الإيجابيات الكاذبة. فتباين في التنعيم أو في دون البكسل لا يغير لون عنصر ولا حجمه ولا موضعه: ولا مبرر للإبلاغ عنه. وما يبقى للحكم هو التغييرات التي تمس الصفحة فعلاً.
خيار On-Premise
للمؤسسات التي تشترط ذلك، يقدم Delta-QA عرض On-Premise يُثبَّت عبر Docker على بنيتكم التحتية: لا تغادر أي بيانات شبكتكم، ولا لقطات تُرسل إلى خادم بعيد.
يبقى SaaS أسرع مدخل: حساب مجاني دون بطاقة مصرفية. ويمكن تقييم عرض On-Premise عبر POC مجاني لمدة شهر.
النقاش المحوري: المكوّنات المعزولة مقابل الصفحات الحقيقية
يخفي الاختيار بين Lost Pixel وDelta-QA نقاشاً أعمق حول معنى «الاختبار المرئي» لتطبيق فعلاً.
مقاربة المكوّنات: ضرورية لكنها غير كافية
يختبر Lost Pixel، عبر تكامله مع Storybook، مكوّنات معزولة. يُعرض كل مكوّن على حدة، في بيئة مضبوطة، بخصائص (props) محددة. وهذا ممتاز لاكتشاف الانحدارات على مستوى المكوّن: زر تغيّر border-radius لديه، وحقل نصي اختفى نص الإرشاد (placeholder) منه، وشارة صار لونها غير متسق.
لكن أكثر العيوب المرئية أثراً لا تحدث على مستوى المكوّن المعزول. بل تحدث حين تتجمع المكوّنات في صفحة حقيقية. مكوّن تنقل يدفع المحتوى 50 بكسل إلى الأسفل. وتذييل يتداخل مع المحتوى الرئيسي على الجوال. وشبكة بطاقات تنكسر حين يكون نص أطول من المتوقع. ونافذة منبثقة لم تعد تتوسط بشكل صحيح عند تغيير حجم النافذة.
مشكلات التكامل المرئي هذه غير مرئية في Storybook، لأن Storybook لا يعرض التكامل: إنه يعرض اللبنات الفردية. كأنكم تختبرون كل ترس في ساعة على حدة وتستنتجون أن الساعة تعمل. قد تكون التروس مثالية فرادى ولا تتعشق جيداً بعد تجميعها.
مقاربة الصفحات: واقع المستخدم
يختبر Delta-QA صفحات حقيقية، في متصفح حقيقي، بـ HTML وCSS وJavaScript والتفاعلات الحقيقية لتطبيقكم. وعندما يقول لكم Delta-QA إن صفحتكم سليمة بصرياً، فذلك لأنها كذلك في الظروف التي سيراها فيها مستخدموكم.
ليس تجريداً، ولا بيئة معزولة، ولا عرضاً جزئياً. إنها صفحتكم، بمجملها، بكل التفاعلات بين المكوّنات، وكل الأنماط الموروثة، وكل تجاوزات CSS، وكل تأثيرات التتابع (cascade).
تلتقط هذه المقاربة عيوب التكامل المرئي التي تفوتها اختبارات المكوّنات المعزولة بنيوياً. وتلتقط كذلك المشكلات المرتبطة بالبيانات الحقيقية: اسم من 40 حرفاً يفيض من حقل، وسعر من 5 أرقام يكسر تخطيطاً، وصورة مفقودة تنهار معها الصفحة.
المصدر المفتوح لـ Storybook قوي لكنه يحتاج إلى ضبط. يكتشف Delta-QA انحداراتكم المرئية دون سطر إعداد واحد: حساب مجاني، بدون برمجة، ودون بطاقة مصرفية. جرّب Delta-QA مجانًا ←
ما كان Lost Pixel يجيده
توضح نقاط قوته لماذا اعتمدته الفرق، وما سيلزم إيجاده في مكان آخر.
التكامل الأصلي مع Storybook. إن كنتم تصونون كتالوج Storybook، فإن Lost Pixel يحوّله إلى حزمة اختبارات مرئية دون جهد. كل story يصبح اختباراً. إنه عرض قيمة استثنائي للفرق التي تتمحور حول المكوّنات.
أتمتة CI/CD. يندمج Lost Pixel بشكل طبيعي في خط GitHub Actions. تنطلق الاختبارات المرئية تلقائياً مع كل طلب سحب، دون تدخل بشري. والتغطية مستمرة ومنتظمة.
التكلفة. Lost Pixel مفتوح المصدر وكانت نسخة الاستضافة الذاتية مجانية. أما المنصة السحابية فكانت مدفوعة، بأسعار معقولة؛ وهي معنية بالتوقف المعلن.
دقة مستوى المكوّن. اختبار كل مكوّن على حدة يتيح تحديد الانحدارات على أدق مستوى. وعندما يتغير مكوّن، تعرفون فوراً أي مكوّن، دون البحث في صفحة كاملة. إنه سير عمل فعال للمطورين الذين يعملون مكوّناً بعد مكوّن.
المصدر المفتوح. تبقى الشيفرة البرمجية مقروءة وقابلة لإعادة الاستخدام برخصة MIT. لكن المستودع المؤرشف لا يتلقى إصلاحات: ومع كل تحديث لـ Storybook أو Playwright أو Node.js، يقع عليكم ضمان التوافق.
ما يضيفه Delta-QA
الإتاحة الكاملة. لا متطلبات تقنية مسبقة. لا npm، ولا CLI، ولا ملف إعداد، ولا GitHub Actions. إن كنتم تعرفون تصفح موقع، فأنتم تعرفون استخدام Delta-QA.
جودة النتائج. يُربط كل اختلاف بعنصر من الصفحة ويوصف بوضوح. تعرفون ما الذي تغير: لا مجرد «تغير شيء ما بصرياً في هذا المستطيل».
تغطية التكامل. يختبر Delta-QA صفحات كاملة لا مكوّنات معزولة. ويلتقط عيوب التكامل المرئي التي تفوتها اختبارات المكوّنات بحكم تصميمها: مشكلات التخطيط، وتعارضات الأنماط، وتأثيرات البيانات الحقيقية في التخطيط.
سيادة البيانات. مع التثبيت On-Premise، لا تغادر أي بيانات شبكتكم: لا خدمة سحابية لطرف ثالث، ولا نقل خارجي. وللشركات الخاضعة لـ RGPD أو لسياسات أمنية صارمة، هذه ميزة بنيوية.
زمن الإعداد. من إنشاء الحساب إلى أول مسار مسجَّل، احسبوا بضع دقائق مع Delta-QA. أما مع Lost Pixel فكان لا بد من تثبيت الحزمة وكتابة الإعداد وامتلاك Storybook يعمل وضبط CI: أي ساعة إلى ساعتين لمطور متمرس.
إشراك الفريق كله. الاختبار المرئي بدون برمجة مع Delta-QA نشاط تعاوني. يستطيع المصممون ومسؤولو الجودة وملّاك المنتج والمطورون جميعاً المشاركة وقراءة النتائج واعتماد التغييرات أو رفضها.
الحالة النموذجية: لماذا لا تكفي المكوّنات وحدها
لنأخذ سيناريو عاشته كل فرقة واجهات أمامية. لديكم نظام تصميم بمكوّن Card مستخدم في كل مكان في موقعكم. لكل Card عنوان وصورة ووصف وزر. في Storybook، المكوّن مثالي: مختبر بصرياً، وكل أشكاله مغطاة.
ذات يوم، يعدّل مطور CSS العام للموقع. يغيّر المتغير العام لـ line-height لتحسين القراءة. تنجح الاختبارات على مكوّنات Storybook: فـ line-height العام لا يؤثر في الـ stories المعزولة التي لها سياقها الخاص. وفي الإنتاج، تنكسر صفحة الكتالوج التي تعرض 12 Card في شبكة انكساراً تاماً: النص الأعلى يدفع الأزرار، ولم تعد البطاقات بالارتفاع نفسه، والشبكة غير متسقة بصرياً.
هذا العيب غير مرئي في Storybook، وبالتالي في أداة لا تختبر سوى الـ stories. لكنه مرئي في Delta-QA، لأن Delta-QA يختبر الصفحة الحقيقية مع تطبيق CSS العام.
وليست هذه حالة متطرفة ولا مفتعلة. إنها الحياة اليومية لتطوير الواجهات الأمامية: المكوّنات تعيش في منظومة، وسلوكها المرئي يتوقف على هذه المنظومة. اختبار المكوّنات بمعزل ضروري، لكنه شرط ضروري لا كافٍ.
الحكم: بماذا نستبدل Lost Pixel
إن كانت حاجتكم متمحورة حول Storybook، فابحثوا عن أداة مكوّنات مصونة: Chromatic، الذي يصدره فريق Storybook، هو المثال الأكثر مباشرة (راجعوا مقارنة Chromatic وDelta-QA وأفكارنا لـاختبار Storybook المرئي دون Chromatic). يبقى Lost Pixel قابلاً للتشغيل كما هو، لكن بلا إصلاحات.
اختاروا Delta-QA إذا كان فريقكم يضم ملفات غير تقنية يجب أن تشارك في الاختبار المرئي. وإذا كنتم بحاجة إلى اختبار صفحات كاملة ومسارات لا مكوّنات معزولة فحسب. وإذا كنتم تريدون نتائج مقروءة مرتبطة بعناصر الصفحة. وإذا كانت سيادة البيانات معياراً، مع عرض On-Premise. وإذا كنتم تريدون أن تصبحوا جاهزين في دقائق لا في ساعات.
اجمعوا المستويين إذا أردتم تغطية كاملة: أداة مكوّنات في خط CI لمراقبة اللبنات الأساسية، وDelta-QA لاختبار الصفحات الكاملة وإشراك الملفات غير التقنية والتحقق من التكامل المرئي قبل كل إصدار.
هل أنتم مستعدون لاختبار صفحاتكم الحقيقية دون ضبط أي شيء؟ أطلقوا أول مقارنة لكم مع Delta-QA، بحساب مجاني ودون بطاقة مصرفية. جرّب Delta-QA مجانًا ←
أسئلة شائعة
هل لا يزال Lost Pixel قيد الصيانة؟
لا. في 22 أبريل 2026، أعلن مؤسسوه توقف المنتج وانضمامهم إلى Figma. المستودع على GitHub مؤرشف، وآخر إصدار على npm (3.22.0) يعود إلى نوفمبر 2024. تبقى الشيفرة البرمجية قابلة للاستخدام برخصة MIT، لكن دون إصلاحات ولا تطويرات: خططوا للانتقال.
هل يستطيع Delta-QA اختبار مكوّنات Storybook مثل Lost Pixel؟
يختبر Delta-QA صفحات ويب كاملة، لا مكوّنات معزولة في Storybook. إن كنتم تصلون إلى Storybook عبر متصفح، فيمكنكم تقنياً اختبار الـ stories لديكم بـ Delta-QA، لكن ذلك ليس استخدامه الرئيسي. قوة Delta-QA في اختبار التكامل الحقيقي لمكوّناتكم داخل صفحات كاملة: وهو بالضبط ما لا يغطيه Lost Pixel.
هل يكتشف Delta-QA المشكلات نفسها التي تكتشفها مقارنة البكسل في Lost Pixel؟
يكتشف Delta-QA التغيّرات المرئية في العناصر: الألوان، والأحجام، والهوامش، والخطوط، والمواضع، والحدود، مع تفصيل كل تغيير. أما التغيّرات الداخلية في صورة معدَّلة أو المحتوى النصي المختلف فتُكتشف بطريقة مختلفة في المقاربتين.
هل يلزم Storybook لاستخدام Lost Pixel؟
لا، كان بإمكان Lost Pixel أيضاً اختبار صفحات ويب كاملة في وضع «page shots». لكن تكامله مع Storybook كان عرض قيمته الرئيسي. وفي اختبار الصفحات، تتولى أدوات أخرى مصونة، منها Delta-QA، المهمة.
أي أداة أسرع في الإعداد؟
Delta-QA. إنشاء الحساب، وفتح موقعكم، والتصفح: يُسجَّل أول مسار لكم في دقائق. كان Lost Pixel يتطلب npm وملف إعداد وStorybook (أو وضع صفحة) يعمل ويفضل خط CI مضبوطاً: ساعة إلى ساعتين لمطور متمرس.
كيف ننتقل من Lost Pixel إلى Delta-QA؟
الخطوط المرجعية في Lost Pixel صور خاصة بمنطق البكسل لديه: لا تُنقل. تسجّلون مساراتكم الرئيسية في Delta-QA، الذي ينشئ مراجعه الخاصة عند المرور الأول. وفي اختبارات Playwright التي يكتبها مطوروكم، يضيف SDK Vision تحققاً من Delta-QA بسطر واحد لكل صفحة.