مقدمة

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

لماذا استخدام الأوامر المخصصة؟

توفر الأوامر المخصصة العديد من الفوائد:

1. قابلية إعادة الاستخدام: قم بتغليف الإجراءات الشائعة التي تتكرر عبر اختبارات متعددة.
2. قابلية الصيانة: مركزية منطق الإجراءات المعقدة، بحيث لا يلزم إجراء التغييرات إلا في مكان واحد.
3. سهولة القراءة: قم بتحسين سهولة قراءة اختباراتك عن طريق استخلاص تفاصيل التنفيذ.

إعداد السرو

قبل أن نتعمق في إنشاء أوامر مخصصة، فلنقم بإعداد Cypress إذا لم تكن قد قمت بذلك بالفعل:

npm install cypress --save-dev

بعد التثبيت، افتح السرو:

npx cypress open

إنشاء أوامر مخصصة

يتم تعريف أوامر Cypress المخصصة في ملف cypress/support/commands.js. دعنا نستعرض بعض الأمثلة لنرى كيف يمكنك إنشاء واستخدام الأوامر المخصصة.

مثال 1: أمر تسجيل الدخول
لنفترض أن لديك نموذج تسجيل دخول تحتاج إلى التفاعل معه بشكل متكرر. يمكنك إنشاء أمر مخصص للتعامل مع عملية تسجيل الدخول:

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('input[name=email]').type(email);
  cy.get('input[name=password]').type(password);
  cy.get('button[type=submit]').click();
});

الآن، يمكنك استخدام أمر تسجيل الدخول في اختباراتك:

// cypress/integration/login.spec.js
describe('Login Tests', () => {
  it('Should login with valid credentials', () => {
    cy.login('[email protected]', 'password123');
    cy.url().should('include', '/dashboard');
  });
});

مثال 2: أمر مخصص مع التأكيدات
يمكنك أيضًا إضافة تأكيدات مخصصة إلى أوامرك. لنقم بإنشاء أمر للتحقق مما إذا كان العنصر مرئيًا ويحتوي على نص محدد:

// cypress/support/commands.js
Cypress.Commands.add('shouldBeVisibleWithText', (selector, text) => {
  cy.get(selector).should('be.visible').and('contain.text', text);
});

الاستخدام في الاختبار:

// cypress/integration/visibility.spec.js
describe('Visibility Tests', () => {
  it('Should display welcome message', () => {
    cy.visit('/home');
    cy.shouldBeVisibleWithText('.welcome-message', 'Welcome to the Dashboard');
  });
});

أفضل الممارسات للأوامر المخصصة

1. أوامر الاسم بوضوح: استخدم أسماء وصفية لأوامرك المخصصة لجعل الاختبارات أكثر قابلية للفهم.
2. تحديد الأوامر: قبول المعلمات لجعل الأوامر مرنة وقابلة لإعادة الاستخدام.
3. أوامر السلسلة: تأكد من أن الأوامر تُرجع عناصر Cypress القابلة للتسلسل (cy.wrap()) لتمكين التسلسل.
4. أوامر المستند: أضف تعليقات لوصف الغرض واستخدام كل أمر مخصص.

نصائح متقدمة

1. دعم TypeScript: إذا كنت تستخدم TypeScript، فيمكنك إضافة تعريفات نوع لأوامرك المخصصة لتحسين الإكمال التلقائي والتحقق من النوع.
2. معالجة الأخطاء: تنفيذ معالجة الأخطاء ضمن الأوامر المخصصة لتقديم تعليقات مفيدة عند حدوث خطأ ما.
3. وظائف قابلة لإعادة الاستخدام: بالنسبة للمنطق المعقد، قم بإنشاء وظائف مساعدة يمكن استخدامها ضمن أوامر مخصصة للحفاظ على ملف Commands.js الخاص بك نظيفًا ومركزًا.

خاتمة

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

ابدأ في تنفيذ الأوامر المخصصة في مشاريع Cypress الخاصة بك اليوم وشاهد الفرق الذي يمكن أن تحدثه في سير عمل الاختبار الخاص بك. اختبار سعيد!