التكامل المستمر
شغّل اختبارات E2E ضمن التكامل المستمر
التكامل المستمر درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
لماذا نُجري اختبارات E2E في CI
تكون اختبارات E2E أكثر قيمة عندما تُجرى تلقائيًا مع كل عملية دفع أو طلب سحب. تكتشف Continuous Integration (CI) حالات التراجع قبل دمج التغييرات، ولذلك لا يصل تدفق تسجيل دخول معطّل إلى بيئة الإنتاج من دون ملاحظة.
ما يحتاج إليه CI لتشغيل E2E
يجب أن تنفّذ مهمة CI ما يلي: تثبيت الاعتماديات، وتثبيت متصفحات Playwright، وبناء تطبيق Angular أو تشغيله، ثم تشغيل الاختبارات في وضع headless. لا تحتوي أجهزة CI على شاشة، لذلك تُشغّل الاختبارات في وضع headless افتراضيًا.
تثبيت المتصفحات في CI
لا تُضمَّن المتصفحات في مستودعك. ثبّتها في مسار التنفيذ باستخدام مُثبّت Playwright، بما في ذلك اعتماديات نظام التشغيل.
npm ci
npx playwright install --with-depsالسماح لـ Playwright بتشغيل التطبيق
يخبر إعداد webServer Playwright بتشغيل تطبيقك قبل الاختبارات وإيقافه بعدها. في CI، عيّن reuseExistingServer: false لضمان تشغيل خادم جديد دائمًا.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};سير عمل GitHub Actions
يتحقق سير العمل المعتاد من الشيفرة، ويُعدّ Node، ويثبّت الاعتماديات والمتصفحات، ثم يشغّل مجموعة الاختبارات.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testخيارات headless وCI
يكتشف Playwright تلقائيًا تشغيل CI عبر متغير البيئة CI ويُجري التعديلات المناسبة: يعيد الاختبارات الفاشلة، ويمنع test.only، ويستخدم عددًا أكبر من العمال بحذر. ويمكنك أيضًا تحديد عدد مرات الإعادة صراحةً.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};نشر تقرير HTML
ينشئ Playwright تقريرًا بصيغة HTML. ارفعه كأحد عناصر CI البرمجية حتى يمكن فحص حالات الفشل بعد انتهاء التشغيل، بما في ذلك سجلات التتبع ولقطات الشاشة.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/التقاط سجلات التتبع عند الفشل
اضبط سجلات التتبع بحيث تُسجَّل عند المحاولة الأولى للإعادة فقط. يحافظ ذلك على سرعة التشغيل، مع توفير إعادة تشغيل كاملة لأي فشل بغرض تصحيحه.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};تقسيم الاختبارات لتسريع التشغيل
يمكن تقسيم مجموعات الاختبارات الكبيرة عبر أجهزة متوازية باستخدام --shard. تشغّل كل مهمة CI جزءًا من المجموعة، مما يقلل الوقت الإجمالي الفعلي.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3التخزين المؤقت لتسريع CI
خزّن node_modules والملفات الثنائية لمتصفح Playwright مؤقتًا بين عمليات التشغيل حتى لا يستحوذ التثبيت على معظم وقت البناء. يوفّر معظم مزوّدي CI إجراءً للتخزين المؤقت يعتمد مفتاحه على ملف القفل.
إفشال البناء بالطريقة الصحيحة
ينهي Playwright التشغيل برمز غير صفري عند فشل أي اختبار، مما يجعل CI يضع علامة حمراء على المهمة ويمنع الدمج. لا تبتلع رمز الخروج باستخدام || true، وإلا فستنجح الاختبارات المعطّلة دون تنبيه.
تحقق سريع
ما الذي يثبّت المتصفحات في CI؟
مراجعة
شغّل E2E مع كل عملية دفع من خلال تثبيت الاعتماديات والمتصفحات (playwright install --with-deps)، والسماح لـ webServer بتشغيل التطبيق، وتشغيل الاختبارات في وضع headless مع إعادة محاولات تراعي CI. ارفع تقرير HTML وسجلات التتبع كعناصر برمجية، وقسّم الاختبارات لتسريعها، ودَع رمز الخروج غير الصفري يمنع عمليات الدمج غير السليمة.
الأسئلة الشائعة
هل درس «التكامل المستمر» مجاني؟
نعم — نص درس «التكامل المستمر» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «التكامل المستمر»؟
شغّل اختبارات E2E ضمن التكامل المستمر تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «التكامل المستمر»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.