الانحدار المرئي (Visual regression): تغيير غير مقصود في مظهر واجهة المستخدم (التخطيط، والألوان، والخطوط، والمسافات، والمحاذاة) ناتج عن تعديل في الشيفرة البرمجية، أو تحديث لاعتمادية، أو تغيير في الإعدادات، ولا يمكن اكتشافه إلا بمقارنة مرئية بين حالتين للواجهة.
إليكم حقيقة تفضّل كثير من الفرق التي تستخدم Cypress تجاهلها: حزمة اختبارات Cypress لديكم، مهما كانت شاملة، عمياء بنيوياً عن فئة كاملة من العيوب. الانحدارات المرئية تمر عبر تأكيداتكم (assertions) كما يمر الماء عبر مصفاة، لا لأن اختباراتكم سيئة الكتابة، بل لأن Cypress ببساطة لم يُصمَّم لاكتشافها.
هذا ليس نقداً لـ Cypress. إنه توصيف للواقع. والفرق بين التوصيف والنقد أن التوصيف يستدعي حلاً لا جدالاً.
جميع مقارناتنا، وفق معايير قابلة للتحقق: البدائل والمقارنات.
حزمة Cypress لديكم تؤكد أن كل شيء يعمل، لا أن كل شيء يُعرض جيداً. كمّلوها بـ Delta-QA: مساراتكم تُسجَّل بدون برمجة، بحساب مجاني ودون بطاقة مصرفية. جرّب Delta-QA مجانًا ←
Cypress: ممتاز فيما يفعله، غائب حيث يهم الجانب المرئي
أحدث Cypress ثورة في اختبار الواجهات الأمامية عندما ظهر في السوق. التنفيذ داخل المتصفح، وإعادة التحميل التلقائية، وتصحيح الأخطاء بالسفر عبر الزمن (time-travel debugging)، وواجهة البرمجة البديهية، كل ذلك جعل الاختبار الشامل (end-to-end) في متناول فرق كانت ترى Selenium أداة تعذيب من العصور الوسطى. وفي مجال الاختبار الوظيفي، يبقى Cypress أداة رائعة.
لكن اسألوا أنفسكم: متى كانت آخر مرة كتبتم فيها اختبار Cypress يتحقق من أن صفحتكم الرئيسية تبدو سليمة؟ لا من وجود زر. ولا من وجود نص. بل من أنها تبدو سليمة: أن المسافات صحيحة، وأن الألوان متسقة، وأن التخطيط لم يتحرك بمقدار بكسل واحد.
الجواب، لدى الغالبية العظمى من الفرق، هو «أبداً». وليس ذلك إهمالاً. السبب أن Cypress لا يقارن الصور. وتوثيقه نفسه يقول ذلك حتى 10/2026: الأمر cy.screenshot() يلتقط صورة لكنه لا يقارنها؛ والاختبار المرئي يمر عبر إضافات أو خدمات من أطراف ثالثة.
النقطة العمياء في Cypress: لا مقارنة مرئية أصلية
عندما تكتبون cy.get('.button').should('be.visible')، فإنكم تتحققون من أن العنصر موجود في DOM وأنه غير مخفي بواسطة CSS. لا تتحققون من أن لونه صحيح. ولا من أنه في المكان الصحيح. ولا من أن نصه مقروء. ولا من أنه لا يتداخل مع عنصر آخر.
قد يكون الزر «مرئياً» بمعنى Cypress (موجود في DOM، وقيمة display تختلف عن none، وopacity أكبر من 0) ومع ذلك غير قابل للاستخدام إطلاقاً من الناحية البصرية. نص أبيض على خلفية بيضاء. حجم 2 بكسل في 2 بكسل. موضع على بعد 3000 بكسل يمين الشاشة. سيقول لكم Cypress إن كل شيء على ما يرام. أما مستخدمكم فسيقول لكم شيئاً آخر.
إنها نقطة عمياء جوهرية، لا قيداً ثانوياً. جزء كبير من المشكلات التي يبلّغ عنها المستخدمون يتعلق بالعرض: زر غير مقروء، ونموذج مزاح عن موضعه، وكتلة تفيض. وCypress، في إعداده الأصلي، لا يكتشف أياً منها.
إضافات Cypress المرئية: حل جزئي وهش
أمام هذا النقص، أنتج نظام Cypress البيئي إضافات للاختبار المرئي. وأشهرها يعتمد على خدمات من أطراف ثالثة (Percy وApplitools وHappo) لالتقاط لقطات الشاشة ومقارنتها، أو على cypress-image-snapshot لمقارنة محلية. وإن كنتم تبحثون عن تفاصيل كل خيار، فإن دليلنا الكامل لإضافة الاختبار المرئي إلى Cypress يستعرض هذه المقاربات وحدودها الفعلية. إنه طريق يعمل، لكن بقيود كبيرة.
الاعتماد على خدمة طرف ثالث. كل إضافة مرئية لـ Cypress تقوم على منصة خارجية. تُرسل لقطاتكم إلى خوادم مزوّد، وتُقارن هناك، وتعود إليكم النتائج. وهذا يضيف زمن استجابة إلى خط CI لديكم، واعتماداً على الشبكة، وتكلفة ترخيص للخدمة الخارجية، فضلاً عن تكلفة Cypress Cloud إن استخدمتموه.
تعقيد الإعداد. إضافة مرئية إلى Cypress تتطلب تثبيت حزمة npm، وضبط المصادقة مع الخدمة الخارجية، وتعديل اختباراتكم القائمة لإضافة استدعاءات الالتقاط، وإدارة رموز API، وتدريب فريقكم على المنصة الخارجية. ليس الأمر مستحيلاً، لكنه ليس أيضاً تجربة «تعمل في 5 دقائق» التي تعد بها الصفحات التسويقية.
الصيانة المزدوجة. تجدون أنفسكم تصونون نظامين: اختبارات Cypress وإعدادات الإضافة المرئية. عندما يتحدث Cypress قد تنكسر الإضافة. وعندما تغيّر الخدمة الخارجية واجهة API الخاصة بها قد تفشل اختباراتكم. وعندما يتغير فريقكم، يجب تدريب الجدد على أداتين بدل أداة واحدة.
التغطية المحدودة. الإضافة المرئية المدمجة في Cypress تلتقط لقطات أثناء تنفيذ اختباراتكم الوظيفية. وهذا يعني أن التغطية المرئية تعتمد على التغطية الوظيفية. إن لم يكن لديكم اختبار Cypress لصفحة «الشروط العامة للبيع»، فليس لديكم اختبار مرئي لهذه الصفحة أيضاً. تغطيتكم المرئية محدودة بسقف تغطيتكم الوظيفية، وليس ثمة ما يدعو إلى أن تتطابقا.
Delta-QA: الاختبار المرئي كتخصص مستقل
ينطلق Delta-QA من فلسفة مختلفة. الاختبار المرئي ليس ميزة مطعّمة على أداة اختبار وظيفي. إنه تخصص قائم بذاته، له متطلباته وسير عمله ومستخدموه.
الاستقلال عن الاختبارات الوظيفية. يسجّل Delta-QA مساراتكم أثناء تصفحكم. لا تحتاجون إلى اختبار وظيفي كوسيلة لالتقاط صفحة. تغطيتكم المرئية لا تعتمد على تغطيتكم الوظيفية: يمكنكم التحقق من عشرات الصفحات دون كتابة اختبار واحد.
الإتاحة لغير المطورين. من هم أكفأ الناس في الحكم على الجودة المرئية لواجهة؟ المصممون. ومختبرو الجودة اليدويون. وملّاك المنتج. وهؤلاء، في غالبية المؤسسات، لا يعرفون كتابة JavaScript. ومع Cypress + إضافة مرئية، يعتمدون على مطور لضبط الاختبارات وتشغيلها وتفسيرها. أما مع Delta-QA فهم مستقلون. وهذا فرق يغيّر ديناميكية الفريق.
إدارة المراجع بشكل أصلي. يدمج Delta-QA سير عمل كاملاً: تقرير يقارن الصفحة كما تفعل العين البشرية ويسمّي كل عنصر تغيّر، والحكم على كل اختلاف (مقصود أم عيب)، وسجل التعديلات. وسير العمل هذا مصمم لفرق متعددة التخصصات، لا لمطور منفرد يدفع الشيفرة ويدمجها في صباح واحد.
المتصفح. يعيد Delta-QA تشغيل مساراتكم في متصفح حقيقي، هو Chromium اليوم؛ ودعم Firefox وWebKit مُخطَّط له. أما في Cypress فتُدعم Chrome وEdge وFirefox، ويبقى WebKit تجريبياً.
المشكلة البنيوية للإضافات: قانون التغطية المقترنة
لنعد إلى هذه النقطة لأنها تستحق التفصيل. عندما يكون اختباركم المرئي مقترناً باختباركم الوظيفي (كما هي الحال مع إضافات Cypress المرئية)، ترث تغطيتكم المرئية كل قيود تغطيتكم الوظيفية.
هل لديكم اختبار Cypress لمسار الشراء؟ إذن التغطية المرئية لمسار الشراء مضمونة. ولا اختبار Cypress لصفحة الأسئلة الشائعة؟ فلا تغطية مرئية لها. هل يغطي اختبار Cypress لصفحة الملف الشخصي حالة «مستخدم متصل باشتراك مميز»؟ لديكم تغطية مرئية لهذه الحالة، لكن ليس لحالة «مستخدم متصل بلا اشتراك» ولا «مستخدم انتهى اشتراكه».
للتغطية الوظيفية والتغطية المرئية منطقان مختلفان. في الوظيفي، تختبرون مسارات: تسلسلات من الإجراءات والتحققات. وفي المرئي، تختبرون حالات: لقطات لصفحات في ظروف معينة. قد يحتاج مسار وظيفي من 10 خطوات إلى تحققين مرئيين فقط (صفحة الدخول وصفحة التأكيد). وعلى العكس، قد تتطلب صفحة بسيطة بلا منطق وظيفي معقد (صفحة «من نحن») تحققاً مرئياً على 5 دقات و3 متصفحات.
إن الجمع بين الاثنين يفرض على تخصص أن يتبنى تغطية الآخر. كأنكم تقولون إنكم لن تفحصوا قاعة في مصنع بصرياً إلا عندما يدخلها عامل لاستخدام آلة. وفي الأيام التي لا يعمل فيها أحد في تلك القاعة، تمر تسربات المياه دون أن تُلاحظ.
Cypress يفعل هذا بشكل أفضل: الاختبار الوظيفي
لنعترف بنقاط قوة Cypress، فهي حقيقية وكبيرة.
تجربة المطور. صُمم Cypress على أيدي مطورين للمطورين. واجهة التصحيح بالسفر عبر الزمن، وسرعة التنفيذ، وواجهة برمجة متسلسلة سلسة (استخدامها متعة). لا يدّعي Delta-QA تقديم هذه التجربة لأنها ليست ميدانه.
التحقق من المنطق التجاري. مسار دفع يحسب الضرائب ورسوم الشحن ورموز الخصم بشكل صحيح: هذا ما يتحقق منه Cypress. لا Delta-QA. المنطق التجاري غير مرئي بصرياً إلى أن ينتج نتيجة معروضة، وحتى حينها فإن التحقق من أن «المبلغ المعروض صحيح» يتطلب معرفة المبلغ المتوقع، وهو ما لا يحسبه إلا اختبار وظيفي.
اعتراض الشبكة. يستطيع Cypress اعتراض طلبات HTTP، ومحاكاة ردود الخادم، واختبار حالات الخطأ. إنها أداة قوية لاختبار تكامل الواجهة الأمامية تتجاوز كثيراً مجرد التحقق من الواجهة.
منظومة سحابية تتوسع. حتى 10/2026، يقدم Cypress Cloud ميزة Test Replay لإعادة تشغيل فشل ما، وUI Coverage، وCypress Accessibility، وملخصات للأعطال مولّدة بالذكاء الاصطناعي، ويحوّل الأمر cy.prompt() خطوات مكتوبة بلغة طبيعية إلى أوامر Cypress. لا شيء من ذلك يقارن مظهر صفحة بمرجع، لكن الأداة تتقدم بسرعة.
سرعة التنفيذ. معمارية Cypress، التي تنفذ الاختبارات في العملية نفسها التي يعمل فيها التطبيق، توفر سرعة تنفيذ لافتة للاختبارات الوظيفية. لا زمن استجابة شبكياً بين الاختبار والتطبيق، ولا بروتوكول WebDriver وسيطاً.
حزمة Cypress لديكم تتحقق من المنطق لا من المظهر. سدّوا هذا النقص بـ Delta-QA: اختبار مرئي بدون برمجة، وحساب مجاني ودون بطاقة مصرفية. جرّب Delta-QA مجانًا ←
Delta-QA يفعل هذا بشكل أفضل: الاختبار المرئي
التغطية السريعة. تغطية صفحاتكم الرئيسية بصرياً تستغرق وقت تصفحها في Delta-QA. أما الحصول على التغطية نفسها عبر إضافة Cypress فيتطلب كتابة اختبار لكل صفحة، وإدارة الخطوط المرجعية، وتثبيت اللقطات. أيام من العمل من جهة، وبضع ساعات من التصفح من جهة أخرى.
سير عمل الاعتماد. عندما يكتشف Delta-QA تغييراً، يستطيع مصممكم الحكم عليه مباشرة في الواجهة. لا حاجة إلى المرور بمطور، ولا إلى فهم تقرير Cypress. يتحدث التقرير لغة من يحكمون على الجودة المرئية: أي عنصر تغيّر، وكيف.
تقليل الإيجابيات الكاذبة. غالباً ما ترث إضافات Cypress المرئية قيود المقارنة الخام بكسلاً ببكسل. تنعيم خط (anti-aliasing) مختلف بين تنفيذين؟ إيجابية كاذبة. مؤشر نص يظهر في حقل نصي؟ إيجابية كاذبة. يقارن Delta-QA عناصر الصفحة بدل بكسلاتها: تغيّر في العرض لا يبدّل لون عنصر ولا حجمه ولا موضعه لا يُبلَّغ عنه.
السجل المرئي. يحتفظ Delta-QA بسجل المراجع والتغييرات المحكوم فيها. يمكنكم تتبع تطور صفحة عبر الإصدارات. أما مع إضافة Cypress محلية فتكون خطوطكم المرجعية ملفات في Git (لها إصدارات، لكن دون واجهة لاستعراض تطورها).
السيناريو النموذجي: حين لا تعود إضافة Cypress كافية
لنتخيل سيناريو شائعاً. فريقكم يستخدم Cypress منذ عامين. لديكم 300 اختبار وظيفي. تغطيتكم جيدة. ثم ذات يوم، تطال عملية إعادة هيكلة CSS نظام التصميم لديكم. يتغير المتغير --color-primary. تنجح كل اختبارات Cypress، فلا واحد منها يتحقق من الألوان. وفي الإنتاج، يصبح لدى 30 صفحة زر إجراء تباينه غير كافٍ ليكون مقروءاً. يتلقى الدعم 15 تذكرة في ساعتين. ويُنشر الإصلاح على وجه السرعة.
بعد هذه الحادثة، يقرر قائدكم التقني إضافة إضافة مرئية إلى Cypress. يستغرق التثبيت نصف يوم. وضبط الخطوط المرجعية لـ 50 صفحة حرجة يستغرق يوماً. وتولّد التشغيلات الأولى 47 إيجابية كاذبة. ويستغرق فرزها يوماً. وبعد أسبوعين، يحدّث مطور Cypress فلا تعود الإضافة متوافقة. تُعطَّل الحزمة المرئية «مؤقتاً». وبعد ثلاثة أشهر، لا تزال معطلة.
هذا السيناريو ليس مختلقاً: إنه حكاية مركبة من عشرات المحادثات مع فرق الجودة. المشكلة الجوهرية ليست الإضافة. بل إن الاختبار المرئي المطعّم على أداة اختبار وظيفي لا يكون أولوية أبداً. إنه دائماً «الشيء الإضافي» الذي نفعله حين يتوفر الوقت: أي لا نفعله أبداً.
يتجنب Delta-QA هذا الفخ لأن الاختبار المرئي هو سبب وجود الأداة، لا إضافة اختيارية. لا توجد حزمة وظيفية تأخذ الأولوية. ولا إعداد أكثر إلحاحاً يجب صيانته. الاختبار المرئي هو الأولوية، والأداة مبنية حول هذه الأولوية.
المزيج الرابح: Cypress + Delta-QA
الموقف الذي ندافع عنه ليس «تخلّوا عن Cypress لصالح Delta-QA». فهذا عبث. Cypress أداة ممتازة للاختبار الوظيفي. وDelta-QA مصمم لاختبار انحدار الواجهة. والجمع بين الاثنين يعطي تغطية جودة لا يقدر أي منهما على تقديمها وحده.
Cypress يتحقق من أن تطبيقكم يعمل. مسارات المستخدم، والمنطق التجاري، وتكاملات API، وحالات الخطأ. هذه الطبقة الوظيفية من ضمان الجودة لديكم.
Delta-QA يتحقق من أن تطبيقكم يبدو سليماً. الألوان، والخطوط، والمسافات، والتخطيط. هذه الطبقة المرئية من ضمان الجودة لديكم.
لكل طبقة إيقاعها. تعمل اختبارات Cypress في خط CI/CD لديكم؛ وتُعاد سيناريوهات Delta-QA مع كل إصدار. وكل منهما ينظر إلى بُعد مختلف من الجودة، بأدوات محسَّنة لهذا البُعد.
الأمر كامتلاك نظام إنذار وكاميرات مراقبة معاً. يكتشف الإنذار الاقتحامات (وظيفي: دخل شخص ما كان ينبغي ألا يدخل). وتُظهر الكاميرات ما يجري (مرئي: هل يبدو كل شيء طبيعياً). والاثنان معاً أكثر فعالية من كل منهما منفرداً.
حجة «لدينا Cypress بالفعل، وهذا يكفي»
هذا هو الاعتراض الأكثر شيوعاً. «استثمرنا في Cypress أصلاً، ولن نضيف أداة أخرى». حجة مفهومة لكنها مغالطة. لديكم مطرقة بالفعل، لكن هذا لا يجعل كل مشكلة مسماراً.
إن كان لتطبيقكم واجهة مستخدم (وإن كنتم تقرؤون هذا المقال فالأرجح أنه كذلك)، فإن جزءاً كبيراً من القيمة التي يدركها مستخدموكم يأتي من مظهر هذه الواجهة. لا من المنطق التجاري الكامن خلفها، مهما كان بارعاً. المستخدم لا يرى معمارية الخدمات المصغرة لديكم. إنه يرى زراً أزرق، ونموذجاً محاذياً، وخطوطاً متسقة.
عدم اختبار هذا البُعد رهان على أن أحداً لن يكسر CSS تطبيقكم أبداً. وهو رهان ستخسرونه. السؤال ليس هل، بل متى. وعندما يحدث ذلك، ستتناسب التكلفة مع الوقت الذي يقضيه الانحدار في الإنتاج: وقت يمكن تقليصه باكتشافه قبل النشر.
كم يستغرق إضافة Delta-QA إلى إعداد Cypress قائم
إن كنتم تستخدمون Cypress بالفعل وتريدون إضافة Delta-QA، فهذا ما يعنيه الأمر عملياً.
يعمل Delta-QA بشكل مستقل عن Cypress. لا تحتاجون إلى تعديل اختبارات Cypress القائمة. ولا إلى تثبيت إضافة. ولا إلى المساس بإعدادات Cypress. تتعايش الأداتان دون تعارض لأنهما لا تتشاركان شيئاً.
يتلخص إعداد Delta-QA في فتح موقعكم وتصفح السيناريوهات المراد تغطيتها. المرور الأول يُنشئ المراجع. هذا كل شيء: تصبح التغطية المرئية فعالة، بمعزل عن اختبارات Cypress لديكم.
وللمضي أبعد في CI، لدى Delta-QA الآن SDK هو Vision. يغطي اليوم Playwright، بلغتي TypeScript وJavaScript؛ ودعم Cypress مُخطَّط له لاحقاً. ومع Playwright، يكفي سطر واحد لكل صفحة يُراد التحقق منها: أي اختلاف لم يُحكَم فيه يُفشل الاختبار، ويعطي سجل CI رابط التقرير.
الأسئلة الشائعة
هل سيضيف Cypress اختباراً مرئياً أصلياً يوماً ما؟
إنه سؤال متكرر في مجتمع Cypress. حتى 10/2026، يشير التوثيق إلى أن Cypress لا يقارن الصور بنفسه ويحيل إلى إضافات. يتوسع Cypress Cloud (Test Replay وUI Coverage وAccessibility وميزات ذكاء اصطناعي مثل cy.prompt())، لكن دون مقارنة مرئية بمرجع. وحتى لو أضافه Cypress، فسيبقى مقترناً بتنفيذ الاختبارات الوظيفية: ما يُبقي مشكلة التغطية المقترنة الموصوفة أعلاه.
أليست إضافات Cypress المرئية كافية؟ للاستخدام الأساسي، قد تسد الحاجة. لكنها تضيف اعتماداً على خدمة طرف ثالث (بتكلفة ترخيص خاصة بها)، وتقرن التغطية المرئية بالتغطية الوظيفية، وصيانتها عبء إضافي. إن كانت لديكم 10 صفحات ومطور متاح لصيانة الإضافة، فقد ينجح الأمر. وإن كانت لديكم 100 صفحة وفريق جودة مختلط، تصبح القيود عائقاً.
هل يستطيع Delta-QA اكتشاف عيوب لا يكتشفها Cypress؟ نعم، بحكم التعريف. يتحقق Cypress من تأكيدات برمجية: «هذا العنصر يحتوي هذا النص»، «هذا العنوان URL صحيح»، «هذا الطلب أعاد 200». أما Delta-QA فيتحقق من المظهر المرئي: «هذه الصفحة تبدو مطابقة للنسخة المرجعية». العيوب المرئية (انحدارات CSS، ومشكلات التجاوب، وتعارضات z-index، والخطوط المفقودة) غير مرئية لتأكيدات Cypress لكن Delta-QA يكتشفها.
هل يبطئ Delta-QA خط CI/CD؟ سيناريوهات Delta-QA المسجَّلة بدون برمجة لا تمر عبر خط Cypress لديكم: فهي لا تبطئه. وللتكامل في CI، يغطي SDK Vision اليوم Playwright؛ ودعم Cypress مُخطَّط له لاحقاً.
هل يجب الاختيار بين Cypress Cloud وDelta-QA؟ لا. فهما يخدمان هدفين مختلفين. يحسّن Cypress Cloud اختبارات Cypress الوظيفية لديكم: التوازي، وإعادة تشغيل حالات الفشل، واكتشاف الاختبارات غير المستقرة (flaky)، وتغطية الواجهة، وإمكانية الوصول. ويغطي Delta-QA المقارنة المرئية بمرجع، وهو ما لا يتناوله Cypress Cloud. وكلاهما استثماران متكاملان.
فريق الجودة لدي ليس تقنياً. هل يستطيعون استخدام Delta-QA دون مساعدة مطور؟ هذه بالضبط حالة الاستخدام التي صُمم لها Delta-QA. تتيح الواجهة بدون برمجة لمختبر جودة، أو مصمم، أو مالك منتج أن يضبط الاختبارات المرئية ويشغّلها ويفسّرها دون أي مهارة في التطوير. وهذا من الفوارق الجوهرية مقارنة بإضافة Cypress التي تتطلب تعديل شيفرة JavaScript لإضافة نقاط الالتقاط المرئي.
هل يمكن استخدام Delta-QA مع إطار عمل غير Cypress؟ نعم. سيناريوهات Delta-QA مستقلة عن أي إطار اختبار: سواء استخدمتم Cypress أو Playwright أو Selenium أو TestCafe أو لم تستخدموا أي إطار، فإنها تعمل بالطريقة نفسها. ولفرق Playwright، يتيح SDK Vision إضافة تحقق Delta-QA داخل اختبار قائم.
الخلاصة: لا تحمّلوا Cypress عبئاً ليس عبأه
Cypress أداة رائعة فيما يفعله. لكن مطالبته بتغطية الاختبار المرئي (عبر الإضافات، أو الحيل، أو تأكيدات CSS مرتجلة) تعني فرض مهمة عليه لم يُصمَّم لها. كأنكم تُلبسون عدّاءً حقيبة ظهر بوزن 20 كيلوغراماً ثم تستغربون أنه أبطأ.
حرّروا Cypress. دعوه يفعل ما يجيده: اختبار أن تطبيقكم يعمل. وأوكلوا الاختبار المرئي إلى أداة صُممت لذلك.
هل أنتم مستعدون لتغطية النقطة العمياء المرئية في حزمة اختباراتكم؟ أطلقوا أول مقارنة لكم مع Delta-QA، بحساب مجاني ودون بطاقة مصرفية. جرّب Delta-QA مجانًا ←