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

ما هو السرو المستخدمة؟

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

• أتمتة تدفقات المستخدم : اختبار تدفقات المستخدم المعقدة، مثل المصادقة، وعمليات إرسال النماذج، ومعاملات التجارة الإلكترونية.

• اختبار التصميم سريع الاستجابة : يسمح Cypress بالاختبار عبر أحجام مختلفة لإطارات العرض، مما يجعله مثاليًا لاختبار التصميم سريع الاستجابة.

• اختبار الانحدار: من خلال أتمتة حالات الاختبار الخاصة بك، يمكنك التحقق بسرعة من أن تغييرات التعليمات البرمجية الجديدة لم تسبب أخطاء.

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

يوفر Cypress لوحة تحكم قوية وواجهة سطر الأوامر (CLI) التي تسمح بالتكامل السلس في خطوط أنابيب CI/CD، مما يجعله خيارًا مفضلاً للاختبار الآلي والمستمر في تطوير الويب الحديث.

تشغيل الاختبارات مع السرو

يمكن إجراء الاختبارات في Cypress بطريقتين رئيسيتين: استخدام مشغل الاختبار (GUI) وواجهة سطر الأوامر (CLI).

إليك دليل سريع لكلا الطريقتين:

باستخدام مشغل الاختبار (GUI):

لاستخدام Cypress Test Runner بشكل تفاعلي مع تطبيق Cypress Real World App، اتبع هذه الخطوات. يوفر هذا التطبيق مثالًا قويًا لاختبارات Cypress أثناء العمل، مع سيناريوهات لتسجيل المستخدم وتسجيل الدخول وتدفقات المعاملات.

لنأخذ نموذج تطبيق Cypress "Cypress Real World App" كمثال.

إعداد وتشغيل تطبيق Cypress Real World محليًا:

هذه هي الخطوات الأولية لإعداد نموذج التطبيق

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

فتح عداء اختبار السرو:

الآن، لفتح Cypress Test Runner في الوضع التفاعلي:

قم بتشغيل الأمر:

npx cypress open

سيؤدي هذا إلى تشغيل واجهة المستخدم الرسومية Cypress Test Runner، حيث يمكنك عرض الاختبارات وتحديدها لتشغيلها.

عند النقر على E2E، يمكنك رؤية لوحة التحكم هذه التي تحتوي على القائمة الكاملة للاختبارات ضمن cypress/tests.

لنقم بإنشاء اختبار جديد يسمى custom.spec.ts في دليلنا ضمن cypress/tests/ui/custom.spec.ts

describe("User Sign-up and Login", function () {
    beforeEach(function () {
      // Seed the database before each test
      cy.task("db:seed");

      // Intercept signup and login API calls
      cy.intercept("POST", "/users").as("signup");
      cy.intercept("POST", "/graphql").as("gqlRequests");
    });

    it("should redirect unauthenticated user to signin page", function () {
      cy.visit("/personal");
      cy.location("pathname").should("equal", "/signin");
    });

    it("should allow a visitor to sign-up, login, and logout", function () {
        const userInfo = {
          firstName: "Bob",
          lastName: "Ross",
          username: "PainterJoy90",
          password: "s3cret",
        };

      // Sign-up User
      cy.visit("/signup");

      cy.getBySel("signup-first-name").type(userInfo.firstName);
      cy.getBySel("signup-last-name").type(userInfo.lastName);
      cy.getBySel("signup-username").type(userInfo.username);
      cy.getBySel("signup-password").type(userInfo.password);
      cy.getBySel("signup-confirmPassword").type(userInfo.password);
      cy.visualSnapshot("About to Sign Up");
      cy.getBySel("signup-submit").click();
      cy.wait("@signup");

      // Login User
      cy.visit("/signin");
      cy.login(userInfo.username, userInfo.password);


      // Verify successful login
      cy.location("pathname").should("equal", "/");

1. الإعداد (قبل كل) : قبل كل اختبار، يتم زرع قاعدة البيانات للبدء بحالة متسقة، ويتم اعتراض استدعاءات واجهة برمجة التطبيقات للتسجيل وطلبات GraphQL للمراقبة.

]

2. الاختبارات:

* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page.

* **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.

يضمن كل اختبار وظائف مهمة لإدارة حساب آمنة وسهلة الاستخدام.

ملاحظة: حاول إضافة تدفق تسجيل دخول واسم مستخدم غير صحيح إلى هذا

تشغيل الاختبارات من واجهة سطر الأوامر:

في بيئات CI أو لتنفيذ اختبار الدُفعات، توفر واجهة سطر الأوامر (CLI) أسلوبًا مبسطًا. قم بتشغيل جميع الاختبارات أو حدد ملفات اختبار فردية:

npx cypress run

npx cypress run --spec "cypress/tests/ui/custom.spec.ts"

فوائد السرو

تشتهر Cypress بتنفيذها السريع وسهولة الإعداد وميزات الاختبار القوية. فيما يلي بعض أهم الفوائد:

• عمليات إعادة التحميل في الوقت الفعلي والاختبار التفاعلي : يوفر Cypress تعليقات فورية عن طريق إعادة تحميل الاختبارات عند إجراء التغييرات، مما يمنح المطورين نظرة فورية على سلوك التطبيق.

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

• الانتظار التلقائي : ينتظر Cypress تحميل العناصر والاستجابة لها وعرضها، لذلك لا تحتاج إلى إضافة فترات انتظار صريحة.

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

تمامًا مثلما يدعم Cypress اختبار E2E الفعال من خلال أتمتة تفاعلات المستخدم، فإن Keploy يجلب بُعدًا قويًا للاختبار من خلال التركيز على الواجهة الخلفية.

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

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

• منصة الاختبار الآلي : تركز Keploy على إنشاء اختبارات تلقائيًا للخدمات الخلفية، وخاصة تفاعلات واجهة برمجة التطبيقات وقاعدة البيانات.

• الالتقاط وإعادة التشغيل : يلتقط Keploy حركة المرور في العالم الحقيقي ويعيد تشغيلها في بيئات الاختبار، مما يؤدي إلى إنشاء حالات اختبار واقعية.

• إنشاء اختبار بدون تعليمات برمجية : مصمم لسهولة الاستخدام، فهو يُنشئ اختبارات دون الحاجة إلى نصوص برمجية مخصصة.

اختبار E2E باستخدام Keploy:

• اختبار E2E المرتكز على واجهة برمجة التطبيقات : لأتمتة الاختبار الشامل لمكونات الواجهة الخلفية، مما يضمن التحقق من وظيفة الواجهة الخلفية كوحدة واحدة.

• اكتشاف الأخطاء وإعادة التشغيل : يلتقط طلبات/استجابات واجهة برمجة التطبيقات، ويعيد التفاعلات، ويكتشف الانحدارات مبكرًا.

• التحقق المتسق من صحة البيانات : يتتبع الاستجابات والتغييرات في تدفق البيانات، مما يضمن الدقة عبر عمليات النشر.

• التكامل السلس : يتكامل بسهولة مع مسارات CI/CD، مما يساعد الفرق على أتمتة عمليات فحص E2E على تغييرات الواجهة الخلفية.

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

يعتمد اختيار الأداة المناسبة في النهاية على احتياجات الاختبار ومتطلبات التطبيق.

التعليمات

هل يمكن استخدام السرو في اختبار الواجهة الخلفية؟

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

هل يدعم Cypress الاختبار عبر المتصفحات؟

نعم، يدعم Cypress متصفح Chrome وEdge وFirefox. ومع ذلك، فهو يحظى بدعم محدود مقارنة بأدوات مثل السيلينيوم أو Playwright، والتي توفر توافقًا أوسع عبر المتصفحات.

كيف تتعامل شركة Cypress مع اختبار API؟

يمكن لـ Cypress إجراء اختبارات واجهة برمجة التطبيقات (API) عن طريق تقديم طلبات HTTP مباشرةً من رمز الاختبار. يمكنك استخدام cy.request() للتحقق من صحة استجابات واجهة برمجة التطبيقات، مما يجعل من السهل اختبار واجهات برمجة التطبيقات ضمن نفس إطار الاختبار الشامل.

كيف يمكنني تصحيح اختبارات السرو الفاشلة؟

يوفر Cypress سجلات ولقطات شاشة مفصلة بشكل افتراضي، ويتيح لك Test Runner التفاعل مع اختباراتك بشكل مرئي. يمكنك إضافة .only لعزل الاختبارات الفاشلة، واستخدام cy.pause() لإيقاف التنفيذ، واستخدام Chrome DevTools لمزيد من تصحيح الأخطاء.