اختبار الانحدار البصري لتطبيقات Next.js: دليل شامل باستخدام Cypress و Applitools

مقدمة إلى اختبار الانحدار البصري في تطوير الويب

في عالم تطوير الويب سريع التطور، تُعد جودة المنتج النهائي أمرًا بالغ الأهمية. بينما تركز معظم استراتيجيات الاختبار على التحقق من وظائف التطبيق وسلوكه، غالبًا ما يتم إغفال جانب حيوي وهو التجربة البصرية للمستخدم. هنا يأتي دور اختبار الانحدار البصري (Visual Regression Testing – VRT)، الذي يضمن أن واجهة المستخدم لتطبيقك تبدو وتتصرف كما هو متوقع عبر جميع مراحل التطوير.

في هذا الدليل الشامل، سنتعمق في كيفية دمج اختبار الانحدار البصري في تطبيق Next.js باستخدام أداتين قويتين: Cypress لإدارة وتنفيذ الاختبارات، و Applitools Eyes لالتقاط ومقارنة اللقطات البصرية. سنرشدك خطوة بخطوة لإنشاء بيئة اختبار قوية تحمي مشروعك من أي تغييرات بصرية غير مقصودة.

ما هو اختبار الانحدار البصري (Visual Regression Testing)؟

اختبار الانحدار البصري هو نوع من الاختبارات التي تقارن اللقطات البصرية (screenshots) لتطبيقك في نقاط زمنية مختلفة. الهدف الأساسي هو اكتشاف أي تغييرات غير مقصودة في المحتوى، التخطيط، أو الأنماط البصرية التي قد تحدث نتيجة لتغييرات في الكود. على عكس الاختبارات الوظيفية التقليدية التي تتحقق من صحة البيانات أو سلوك المكونات، يركز اختبار الانحدار البصري على ما يراه المستخدم فعليًا في المتصفح.

يتم تشغيل هذا النوع من الاختبارات بشكل دوري، على سبيل المثال، عند كل طلب سحب (pull request) أو عند النشر إلى بيئة الإنتاج، لضمان أن كل جزء من التطبيق يعمل بشكل صحيح ويحافظ على مظهره البصري المتوقع. إنه أداة لا تقدر بثمن للحفاظ على اتساق العلامة التجارية وتجربة المستخدم.

نظرة عامة على Cypress: إطار عمل الاختبار الشامل

Cypress هو إطار عمل اختبار يعتمد على JavaScript ومصمم خصيصًا لاختبار تطبيقات الويب الحديثة. يتميز Cypress بقدرته على تشغيل الاختبارات مباشرة داخل المتصفح، مما يمنح المطورين رؤية حقيقية لكيفية تفاعل المستخدمين مع تطبيقاتهم. يوفر Cypress بيئة اختبار متكاملة تسمح لك بكتابة، تشغيل، وتصحيح الأخطاء في اختباراتك بسهولة.

من أبرز مميزات Cypress:

• التفاعل المباشر: يمكنك محاكاة تفاعلات المستخدم مثل النقر، الكتابة، والتمرير، والتحقق من استجابة التطبيق.
• التحكم الكامل: يتيح لك Cypress التحكم الكامل في المتصفح وشبكة الاتصال، مما يسهل اختبار السيناريوهات المعقدة.
• تصحيح الأخطاء بسهولة: يوفر Cypress لوحة تحكم تفاعلية تعرض خطوات الاختبار واللقطات، مما يسرع عملية تحديد المشكلات.

سنستخدم Cypress كمنصة لتشغيل اختباراتنا، ثم ندمجها مع Applitools Eyes لإضافة طبقة اختبار الانحدار البصري.

Applitools Eyes: قوة الذكاء الاصطناعي في الاختبار البصري

Applitools هي منصة اختبار بصري وأتمتة تستفيد من الذكاء الاصطناعي لمقارنة واجهات المستخدم واكتشاف أي اختلافات. بينما يمكن لـ Cypress التحقق من وجود عنصر أو نص معين، فإن Applitools Eyes يذهب أبعد من ذلك بكثير، حيث يقوم بتحليل الصورة الكاملة للصفحة واكتشاف التغييرات الدقيقة في التخطيط، الألوان، الخطوط، وحتى المسافات البادئة.

تعتمد Applitools Eyes على خوارزميات رؤية الكمبيوتر المدعومة بالذكاء الاصطناعي لتقليل الإيجابيات الكاذبة (false positives) التي غالبًا ما تحدث في أدوات الاختبار البصري التقليدية. الميزة الرئيسية لـ Applitools Eyes هي قدرتها على:

• اكتشاف التغييرات الدقيقة: حتى التغييرات البسيطة التي قد لا يلاحظها الإنسان يمكن أن تكتشفها Applitools Eyes.
• التحقق الذكي: تتجاهل التغييرات غير ذات الصلة مثل الرسوم المتحركة أو المحتوى الديناميكي غير المهم، مع التركيز على الانحدارات الحقيقية.
• لوحة تحكم مركزية: توفر لوحة تحكم سهلة الاستخدام لمراجعة نتائج الاختبارات وقبول أو رفض التغييرات.

في هذا الدليل، سنركز على استخدام واجهة برمجة التطبيقات Eyes API لالتقاط اللقطات وإرسالها إلى لوحة تحكم Applitools.

ماذا سنقوم ببنائه؟

لتبسيط التركيز على أدوات الاختبار بدلاً من تعقيدات التطبيق نفسه، سنقوم بإنشاء تطبيق React جديد باستخدام إطار عمل Next.js. يشتهر Next.js بسهولته وسرعته في إعداد تطبيقات React.

بمجرد إعداد التطبيق، سنقوم بتثبيت Cypress و Applitools وتهيئتهما لتنفيذ اختبارات الانحدار البصري. سيتطلب هذا وجود حساب Applitools مجاني، يمكنك التسجيل فيه بسهولة على applitools.com.

الخطوة 0: إنشاء تطبيق React جديد باستخدام Next.js

للبدء، سنستخدم أداة Create Next App لإنشاء تطبيق Next.js جديد. افتح الطرفية (terminal) وانتقل إلى الدليل الذي ترغب في إنشاء مشروعك الجديد فيه، ثم نفذ الأمر التالي:

npx create-next-app my-testing-app

ملاحظة: يمكنك تغيير اسم المشروع من my-testing-app إلى أي اسم تفضله. سيقوم هذا الأمر باستنساخ مثال Next.js الافتراضي من GitHub، وتثبيت التبعيات، مما يتيح لنا البدء فورًا في إعداد أدوات الاختبار.

بعد اكتمال العملية، انتقل إلى مشروعك الجديد:

cd my-testing-app

ثم ابدأ خادم التطوير:

npm run dev

الآن، يجب أن يكون موقعك متاحًا على العنوان http://localhost:3000!

الخطوة 1: تثبيت وتهيئة Cypress في تطبيق Next.js

بعد إعداد تطبيقنا، حان الوقت لتثبيت Cypress لاستخدامه في تشغيل اختباراتنا. في الطرفية، قم بتثبيت Cypress باستخدام الأمر التالي:

npm install cypress --save-dev

هنا، نضمن استخدام العلامة --save-dev لأننا لا نحتاج إلى تشغيل Cypress في نسخة الإنتاج من تطبيقنا، لذا نقوم بتثبيته كاعتماد تطويري (dev dependency).

بمجرد الانتهاء، نحتاج إلى طريقة لتشغيل Cypress من سطر الأوامر. بدلاً من الانتقال إلى مجلد Cypress مباشرة، يمكننا إضافة أمر نصي جديد (script command) في ملف package.json لتسهيل تشغيله. داخل ملف package.json، ضمن الكائن scripts، أضف السطر التالي:

 "cy:open" : "cypress open"

الآن، في الطرفية، يمكننا تشغيل هذا السكربت لفتح Cypress:

npm run cy:open

إذا كانت هذه هي المرة الأولى التي تشغل فيها Cypress، فقد يستغرق الأمر بعض الوقت الإضافي لتثبيت Cypress في مشروعك.

بمجرد الانتهاء، سيفتح Cypress لوحة حوار جديدة ستكون بمثابة لوحة التحكم الخاصة بك لتشغيل الاختبارات لمشروعك. ستلاحظ أيضًا أن Cypress يخبرك بأنه أضاف دليلًا جديدًا إلى مشروعك باسم cypress. يتضمن هذا الدليل ملفات أمثلة تتيح لك رؤية كيفية عمل Cypress والبدء فورًا. لتجربة هذا، في الجانب الأيمن من لوحة Cypress، انقر على Run 19 integration specs.

سيقوم Cypress بعد ذلك بفتح متصفح جديد وتشغيل جميع اختبارات الأمثلة. في الخطوة التالية، سنضيف بعض اختباراتنا الخاصة.

الخطوة 2: إنشاء أول اختبار Cypress في تطبيق Next.js

الآن بعد أن أصبح بإمكاننا تشغيل اختباراتنا بنجاح، دعنا نحاول إضافة اختباراتنا الخاصة. لسنا بحاجة إلى أي من الاختبارات التي تضمنها Cypress في الأمثلة، لذا دعنا نحذف الدليل integration/examples بالكامل. ثم، أنشئ ملفًا جديدًا ضمن الدليل integration باسم home.spec.js وأضف بداخله ما يلي:

/// <reference types="cypress" />
context('Home', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000');
  });

  it('should find the title of the homepage', () => {
    cy.get('h1').contains('Welcome');
  });
});

في الكود أعلاه، نقوم بما يلي:

• أولاً، نضيف Cypress كنوع مرجعي (reference type)، مما يسمح لـ Cypress بالعثور على الملف ومعرفة أنه يجب استخدامه لتشغيل اختبار.
• ننشئ سياقًا جديدًا لاختبارنا ونحدده باسم Home.
• نخبر Cypress أنه قبل كل اختبار، نريد منه زيارة صفحتنا الرئيسية.
• نحدد اختبارًا يقوم بالبحث عن العنصر h1 والتحقق من أنه يحتوي على كلمة “Welcome”.

إذا عدنا الآن إلى Cypress، فسنرى أن لدينا اختبار التكامل (Integration Test) هذا فقط. إذا نقرنا عليه وحاولنا تشغيل الاختبار، فسنرى أننا نحصل على خطأ، لأننا لم نبدأ خادم التطوير مطلقًا، مما يعني أنه غير متاح.

لإصلاح هذا، سنستخدم أداة تسمى start-server-and-test. ستقوم هذه الحزمة بما يوحي به اسمها، حيث ستقوم بما يلي:

• بدء خادمنا بناءً على الأمر الذي نقدمه.
• تشغيل الاختبارات التي نقدمها.
• إيقاف الخادم بمجرد الانتهاء.

لإضافتها، في الطرفية، دعنا ننفذ:

npm install start-server-and-test --save-dev

ثم، داخل ملف package.json الخاص بنا، سنضيف أمرًا جديدًا آخر إلى الكائن scripts:

 "test": "start-server-and-test dev 3000 cy:open"

هنا، نخبر start-server-and-test أننا نريد تشغيل الأمر dev لبدء خادمنا، وأنه سيكون متاحًا على المنفذ 3000، وأننا نريد تشغيل الأمر cy:open بعد ذلك لتشغيل اختباراتنا.

وإذا عدنا إلى الطرفية وقمنا بتشغيل:

npm run test

سنرى أن Cypress يفتح كما كان من قبل. ولكن إذا قمنا الآن بتشغيل اختبارنا، يمكننا أن نرى أنه يفتح تطبيق Next.js الخاص بنا بنجاح ويرى كلمة “Welcome” داخل العنصر h1!

الخطوة 3: تثبيت وتهيئة Applitools Eyes

مع تشغيل Cypress لاختباراتنا بنجاح، يمكننا الآن ربط اختباراتنا واستخدام Applitools لتشغيل اختبار الانحدار البصري على مشروعنا. قبل أن نتعمق، تأكد من أن لديك حسابًا مجانيًا تم إعداده على Applitools، والذي سنحتاجه لإعداد مفتاح API.

للبدء، سنحتاج إلى تثبيت مكتبة Eyes في مشروعنا. في الطرفية، يمكننا تشغيل:

npm install @applitools/eyes-cypress --save-dev

سيؤدي هذا إلى تثبيت حزمة SDK الخاصة بـ Cypress لـ Applitools Eyes. بمجرد الانتهاء من التثبيت، يمكننا تشغيل سكربت إعداد Eyes:

npx eyes-setup

سيقوم هذا بالمرور عبر المشروع وإضافة التكوينات الضرورية إلى Cypress لجعل Eyes يعمل بشكل صحيح.

أخيرًا، سنحتاج إلى جعل مفتاح API الخاص بـ Applitools متاحًا كلما قمنا بتشغيل اختباراتنا. للبدء، نحتاج إلى العثور على مفتاح API الخاص بنا في حساب Applitools الخاص بنا. داخل لوحة تحكم Applitools، حدد My API Key ضمن القائمة المنسدلة للحساب.

سيفتح مربع حوار حيث يمكنك تحديد ونسخ مفتاح API الخاص بك.

سترغب في حفظ مفتاح API هذا لاستخدامه لاحقًا عند تشغيل اختباراتنا. بعد ذلك، سنرغب في أن نكون قادرين على تعيين مفتاح API الخاص بنا. يمكننا القيام بذلك بعدة طرق:

• تصدير متغير البيئة في shell قبل تشغيل الاختبارات.
• إضافة مفتاح API قبل أمر الاختبار.
• إضافة مفتاح API إلى ملف applitools.config.js.
• إنشاء متغير بيئة باستخدام dotenv وحزمة cypress-dotenv.

لهذا العرض التوضيحي، سنقوم بتشغيل اختبارنا عن طريق إضافة مفتاح API قبل أمرنا. سيسمح لنا هذا باختبار هذا بسرعة. للقيام بذلك، في أي وقت نقوم فيه بتشغيل أمر مثل npm run test، سنقوم بتضمين مفتاح API الخاص بنا أمامه كما يلي:

APPLITOOLS_API_KEY="abcd1234" npm run test

ملاحظة: تذكر استبدال مفتاح API بمعرفك الفريد.

والآن، يجب أن نكون مستعدين لإضافة اختبارنا الأول.

الخطوة 4: اختبار الانحدار البصري باستخدام Applitools Eyes

لقد قمنا بتهيئة Cypress و Applitools وكلاهما جاهز للعمل، مما يعني أنه يمكننا الآن إضافة Applitools Eyes لاختبار تطبيقنا بصريًا! لا يحتوي تطبيقنا على الكثير من الوظائف بعد، لذا يمكننا البدء بفحص أساسي يضمن أن صفحتنا الرئيسية تبدو كما هو متوقع في كل مرة يتم فيها تشغيل اختباراتنا.

للبدء، داخل ملف cypress/integration/home.spec.js الخاص بنا، دعنا نضيف ما يلي أسفل عبارة it الموجودة لدينا مباشرة:

it('should verify the homepage looks as expected', () => {
  cy.eyesOpen({
    appName: 'My App',
    testName: 'Homepage Check',
  });
  cy.eyesCheckWindow({
    tag: 'App Window',
    target: 'window',
    fully: true
  });
  cy.eyesClose();
});

إليك ما نقوم به هنا:

• أولاً، نقوم بـ “فتح عيون” Applitools، مما سيهيئ وظيفة Eyes لفحص تطبيقنا.
• بعد ذلك، نقوم بتشغيل فحص على نافذة تطبيقنا، وهو ما يعني بشكل أساسي التقاط لقطة شاشة لتطبيقنا وإرسالها إلى Applitools.
• أخيرًا، “نغلق عيون” Applitools، لإعلام Eyes بأننا انتهينا من تشغيل فحوصاتنا.

الآن، إذا قمنا بتشغيل أمر الاختبار الخاص بنا وبدأنا اختبارنا:

APPLITOOLS_API_KEY="abcd1234" npm run test

يمكننا أن نرى أن Cypress يشغل حالة الاختبار الجديدة الخاصة بنا والتي لا يبدو أنها تفعل أي شيء داخل متصفحنا، ولكنها تظهر مؤشر نجاح.

الآن، إذا عدنا إلى لوحة تحكم Applitools الخاصة بنا:

يمكننا أن نرى أن لدينا “تشغيل” جديد بعنوان Homepage Check (الذي حددناه في الكود) والذي يظهر أنه نجح مع لقطة لتطبيقنا. الآن، وجود هذه اللقطة وحدها ليس ما يجعل هذا قويًا. من الآن فصاعدًا، في أي وقت نقوم فيه بتشغيل هذا الاختبار، ستقارن Applitools تطبيقنا بهذه اللقطة الأصلية وتخبرنا إذا تغير أي شيء.

لاختبار هذا، سنقوم بتغيير لون عنوان صفحتنا. قد يبدو هذا تغييرًا بسيطًا، ولكن تغييرات الأنماط يمكن أن تكون أكثر صعوبة على أدوات مثل Cypress وحدها لاكتشاف مشكلة، وهنا يبرز دور Applitools Eyes بمقارنة اللقطات.

داخل ملف styles/Home.module.css، دعنا نضيف ما يلي إلى الفئة .title:

  color: #ddd;

بينما قد لا نكون قد أجرينا تغييرًا كهذا عن قصد في الممارسة العملية، فقد يحدث هذا إذا كنا نغير أنماطًا تتسلسل إلى عنواننا. هذا يجعل عنواننا صعب القراءة، ولكن هذا يجعله مثاليًا لحالة اختبار.

الآن، دعنا نشغل اختباراتنا مرة أخرى:

APPLITOOLS_API_KEY="abcd1234" npm run test

ولكن هذه المرة، يمكننا أن نرى أن اختبارنا يفشل!

يفشل اختبار Applitools الخاص بنا لأنه يشير إلى أن “Eyes-Cypress اكتشف اختلافات أو أخطاء أثناء تنفيذ الاختبارات البصرية”. إذا نظرنا داخل لوحة تحكم Applitools الخاصة بنا:

يمكننا أن نرى أن لدينا الآن تشغيلًا “غير محلول” (Unresolved) حيث تعرض لنا Applitools الاختلافات في الصفحة، والتي في حالتنا، هي جزء “Welcome to” من عنواننا. هذا مفيد للغاية عند العمل على مشاريع حيث قد يكون من الصعب اختبار كل صفحة أو نوع صفحة في تطبيق. يمكننا التأكد من أنه إذا تغير أي شيء أو تعطل، فسيتم الإبلاغ عنه على الفور في Applitools.

من هنا، إذا كنا راضين عن تغيير اللون، يمكننا قبول الإصدار الجديد من تطبيقنا.

وإلا يمكننا رفضه وإبلاغ فريقنا بأنه يحتاج إلى إصلاح.

ماذا بعد؟ توسيع نطاق الاختبار البصري

بين Cypress و Applitools، لدينا مجموعة واسعة من الإمكانيات لضمان أن تطبيقنا يتصرف بالطريقة التي نريدها. في معظم الأحيان عندما نقوم ببناء تطبيق، فإننا نبني هذا التطبيق ليتفاعل معه الأشخاص. باستخدام Cypress، يمكننا النقر على أجزاء مختلفة من الصفحة، وتغيير حالة الصفحة، ثم تشغيل فحص باستخدام Applitools Eyes للتأكد من أنها تعمل بالطريقة التي نتوقعها.

على سبيل المثال، يمكنك:

• اختبار تدفقات المستخدم المعقدة: محاكاة تسجيل الدخول، إضافة عناصر إلى سلة التسوق، أو إكمال نموذج، ثم التقاط لقطات بصرية لكل خطوة.
• التحقق من التجاوبية (Responsiveness): تشغيل الاختبارات عبر أحجام شاشات مختلفة (مثل الجوال والكمبيوتر اللوحي وسطح المكتب) لضمان أن التصميم يظل متناسقًا وجذابًا.
• اختبار المتصفحات المتعددة: يمكن لـ Cypress بالاقتران مع Applitools تشغيل الاختبارات على متصفحات مختلفة (مثل Chrome، Firefox، Edge) للتأكد من أن تطبيقك يعمل بشكل صحيح في كل مكان يحاول شخص ما استخدامه!

تذكر أن الهدف هو أتمتة عملية اكتشاف الأخطاء البصرية مبكرًا في دورة التطوير، مما يوفر الوقت والجهد ويضمن تجربة مستخدم سلسة.

الخلاصة التقنية

لقد أثبت هذا الدليل بوضوح أن دمج Cypress مع Applitools Eyes يوفر حلاً قويًا ومتكاملًا لاختبار الانحدار البصري لتطبيقات Next.js. بينما يتفوق Cypress في أتمتة التفاعلات واختبار الوظائف، فإن Applitools Eyes يكمل هذه القدرة بإضافة طبقة ذكية من التحقق البصري المدعوم بالذكاء الاصطناعي. هذه الشراكة تضمن أن التطبيق لا يعمل فقط بشكل صحيح من الناحية الوظيفية، بل يحافظ أيضًا على مظهره الجمالي وتجربة المستخدم المخطط لها، حتى مع التغييرات المتكررة في الكود. إن الاستثمار في هذه الأدوات يعني حماية مشروعك من الأخطاء البصرية المكلفة وتعزيز ثقة المستخدم في منتجك.