77. نظرة عامة على اختبارات النهاية إلى النهاية (E2E)

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

دور اختبار E2E

تتحقق اختبارات E2E من التكامل بين الواجهة الأمامية لـ Angular والمتصفح وواجهة API الخلفية (غالباً باستخدام واجهة خلفية اختبار مخصصة/مجموعة بيانات).

ما تتحقق منه اختبارات E2E:

هل يمكن للمستخدم تسجيل الدخول بنجاح؟
هل يؤدي النقر فوق زر إلى تشغيل استدعاء API الصحيح وتحديث واجهة المستخدم؟
هل يعمل التحقق من صحة النموذج بشكل صحيح في المتصفح؟
هل يعمل التنقل بين الصفحات؟

أدوات E2E الشائعة

تاريخياً، استخدم Angular Protractor، لكن المجتمع تحول إلى حد كبير نحو أدوات حديثة وأكثر قوة:

Cypress: ممتاز للسرعة، وتجربة المطور، وتصحيح الأخطاء.
Playwright: تحتفظ به Microsoft، ويدعم محركات متصفح متعددة، ورائع للاختبار عبر المتصفحات.

هيكل اختبار E2E (مثال مفاهيمي باستخدام Cypress)

تستخدم اختبارات E2E أوامر للتفاعل مع واجهة المستخدم، محاكاة المستخدم.

javascript // cypress/integration/login_spec.js

describe('Login Flow', () => {

it('should allow a user to successfully log in', () => { // 1. زيارة عنوان URL للتطبيق cy.visit('/login');

// 2. التفاعل مع العناصر باستخدام مُحددات CSS
cy.get('#username').type('testuser');
cy.get('#password').type('password123');

// 3. النقر فوق الزر والتحقق من النتيجة
cy.get('button[type="submit"]').click();

// 4. تأكيد حدوث التنقل بشكل صحيح
cy.url().should('include', '/dashboard');
cy.get('.welcome-message').should('contain', 'Hello, testuser');

}); });

يُعد اختبار E2E شبكة الأمان النهائية، حيث يؤكد أن جميع أجزاء التطبيق تعمل معاً كوحدة واحدة.