Angular Academy · درس

نظرة عامة على اختبار E2E

افهم دور اختبارات من البداية إلى النهاية

نظرة عامة على اختبار E2E درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

ما المقصود باختبار End-to-End

تختبر اختبارات End-to-end (E2E) تطبيقك بالطريقة التي يستخدمه بها المستخدم الحقيقي: فهي تشغّل التطبيق في متصفح حقيقي، وتتنقل بين الصفحات، وتنقر الأزرار، وتكتب في النماذج، وتتحقق مما هو ظاهر. وهي تتحقق من عمل المكدس بأكمله معًا، لا من وحدة واحدة فقط.

هرم الاختبار

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

الوحدة: دالة/مكوّن بمعزل عن غيره
التكامل: عدة وحدات تعمل معًا
E2E: التطبيق قيد التشغيل من البداية إلى النهاية

ما الذي تكشفه E2E ولا تكشفه اختبارات الوحدات

تكشف اختبارات E2E المشكلات التي لا تظهر إلا عند اتصال الأجزاء الحقيقية، مثل أخطاء التوجيه، أو تعطل تكامل API، أو غياب DOM بعد النشر، أو CSS يخفي زرًا، أو حلقة إعادة توجيه خاصة بالمصادقة. قد تنجح اختبارات الوحدة ذات التبعيات المحاكية بينما يكون التطبيق الحقيقي معطّلًا.

تاريخ Angular وE2E

كان Angular في إصداراته الأقدم يضم Protractor لاختبارات E2E. وقد أُهمل Protractor وأُزيل من المشاريع الجديدة. أما اليوم، فيتيح Angular CLI اختيار مشغّل E2E من جهة خارجية؛ ويُعدّ كل من Playwright وCypress الخيارين الأكثر شيوعًا.

لماذا Playwright

Playwright إطار حديث وسريع لاختبارات E2E من Microsoft. وهو يتحكم في Chromium وFirefox وWebKit، وينتظر العناصر تلقائيًا، ويعزل الاختبارات باستخدام سياقات متصفح جديدة، ويوفر أدوات ممتازة لتصحيح الأخطاء. تستخدم هذه الدورة Playwright.

إضافة Playwright إلى Angular

يمكنك تهيئة Playwright باستخدام مُثبّته الخاص. إذ ينشئ playwright.config.ts ومجلدًا لاختبارات نموذجية.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

بنية اختبار E2E

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

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

تعمل E2E على خادم حقيقي

تحتاج E2E إلى تشغيل تطبيق Angular فعليًا. عادةً ما يبدأ الإعداد ng serve (أو يقدّم نسخة إنتاجية) ويوجّه الاختبارات إلى عنوان URL هذا عبر baseURL وإدخال webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

أبقِ حزم E2E صغيرة وتركّز على الأمور الحرجة

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

عدم الاستقرار والحتمية

أكبر تحديات E2E هو عدم الاستقرار، أي فشل الاختبارات بشكل متقطع. تجنّب تأخيرات sleep الثابتة، واعتمد على تأكيدات الانتظار التلقائي في Playwright. تحكم في بيانات الاختبار لكي تبدأ كل عملية تشغيل من حالة معلومة.

E2E مقابل اختبار المكوّنات

تختبر اختبارات مكوّنات Angular (TestBed) مكوّنًا في بيئة اصطناعية. أما E2E فتختبر التطبيق المنشور في متصفح حقيقي. وهما متكاملان: استخدم TestBed لفحوصات المنطق وDOM السريعة، وE2E للتأكد من عمل المنتج بأكمله.

تحقّق سريعًا

ما الذي يميز E2E عن اختبارات الوحدة؟

مراجعة

تشغّل اختبارات E2E التطبيق بأكمله في متصفح حقيقي، فتكتشف أخطاء التكامل والتوجيه التي تفوّتُها اختبارات الوحدة. وهي تقع في قمة هرم الاختبار: قليلة، وبطيئة، وعالية القيمة. تستخدم مشاريع Angular الآن مشغّلات مثل Playwright، التي تبدأ تشغيل الخادم وتنفّذ رحلات المستخدم الحرجة.

الأسئلة الشائعة

هل درس «نظرة عامة على اختبار E2E» مجاني؟

نعم — نص درس «نظرة عامة على اختبار E2E» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «نظرة عامة على اختبار E2E»؟

افهم دور اختبارات من البداية إلى النهاية تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «نظرة عامة على اختبار E2E»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy