اختبار E2E لتطبيقات JavaScript: من الفوضى إلى الثقة

لماذا لم يعد "النقر اليدوي" فعالاً؟

تخيل: لقد انتهيت من تطوير ميزة، ضغطت على "تشغيل" في المحرر، كل شيء يبدو مثالياً في المتصفح. تقوم بالنشر إلى الإنتاج. وبعد ساعة - ذعر: نموذج التسجيل تعطل لأن شخصاً ما غيّر فئة CSS عن طريق الخطأ، ولم يلاحظ زميلك ذلك. هل هذا مألوف؟ إذا كنت تكتب بلغة JavaScript وتستخدم Python في الواجهة الخلفية، فمن المحتمل أنك واجهت مواقف كان بإمكان اختبار E2E لتطبيقات JavaScript أن ينقذ أمسيتك.

اختبارات End-to-end (E2E) ليست رفاهية، بل هي نظافة أساسية لأي مشروع جاد. إنها تحاكي إجراءات المستخدم الحقيقي: النقرات، إدخال البيانات، التمرير، التحقق من استجابات الخادم. ونعم، إنها تعمل مع مجموعتك التقنية - سواء كانت React أو Vue أو Angular أو مجرد JS عادي.

في هذه المقالة، سنشرح كيفية تطبيق الاختبار الشامل لتطبيقات الويب دون ألم، باستخدام أدوات حديثة. سترى أمثلة حقيقية للكود بلغة JavaScript، وستعرف كيف تجعل E2E يتوافق مع الواجهة الخلفية بلغة Python، وستحصل على قائمة تحقق للتطبيق. هيا بنا!

ما هو اختبار E2E ولماذا تحتاجه؟

اختبار E2E (End-to-End) هو عملية التحقق من مسار المستخدم بالكامل من البداية إلى النهاية. على سبيل المثال: فتح الموقع ← البحث عن منتج ← إضافته إلى سلة التسوق ← إتمام الطلب ← التحقق من وصول البريد الإلكتروني.

على عكس اختبارات الوحدة (التي تتحقق من وظيفة واحدة) أو اختبارات التكامل (التي تتحقق من اتصال وحدتين)، فإن الاختبارات الشاملة لجافا سكريبت تتحقق من النظام بأكمله - الواجهة الأمامية، الواجهة الخلفية، قاعدة البيانات، واجهات API الخارجية.

متى تكون اختبارات E2E ضرورية بشكل خاص

\n
• عند إعادة كتابة كود قديم إلى إطار عمل جديد.
\n
• عند وجود بنية خدمات مصغرة مع Python في الواجهة الخلفية.
\n
• عند إصدار تحديثات متكررة والخوف من الانحدار.
\n
• عند شكوى العملاء من "أخطاء" لا يمكن إعادة إنتاجها محلياً.
\n

بدون E2E، أنت تخاطر بمعرفة الخطأ من المستخدم. مع E2E، ستعرف عنه قبل دقيقة من النشر.

اختيار الأداة: Playwright مقابل Cypress

في السوق، هناك لاعبان رئيسيان لـ أتمتة اختبارات JavaScript: Playwright (من Microsoft) و Cypress (من شركة تحمل نفس الاسم). كلاهما قوي، ولكن هناك فروق دقيقة.

Playwright

\n
• يدعم جميع المتصفحات: Chromium، Firefox، WebKit (Safari).
\n
• يعمل مع iframe، علامات التبويب، صفحات متعددة.
\n
• يكتب بلغات JS/TS، Python، C#، Java.
\n
• مناسب تماماً للسيناريوهات المعقدة: تحميل الملفات، اعتراض طلبات الشبكة، محاكاة الأجهزة المحمولة.
\n

Cypress

\n
• بناء جملة أبسط، لوحة تحكم مدمجة.
\n
• يعمل فقط على Chromium (و Firefox بشكل تجريبي).
\n
• لا يمكنه فتح عدة علامات تبويب.
\n
• مثالي للمشاريع الصغيرة والبدء السريع.
\n

اختيارنا للمقالة هو Playwright، لأنه أقرب لمطوري Python (يوجد API رسمي للغة Python) ويغطي 99% من السيناريوهات. ولكننا سنعرض أيضاً مثالاً على Cypress.

كتابة أول اختبار E2E باستخدام Playwright (JavaScript)

التثبيت بسيط:

npm init -y\nnpm install @playwright/test\nnpx playwright install

الآن لننشئ ملف tests/example.spec.js. لنفترض أننا نختبر صفحة تسجيل الدخول على موقع pythonlib.ru (نعم، هذا مثال خيالي، لكن المنطق حقيقي).

const { test, expect } = require('@playwright/test');\n\ntest('يمكن للمستخدم تسجيل الدخول', async ({ page }) => {\n  // 1. نفتح صفحة تسجيل الدخول\n  await page.goto('https://pythonlib.ru/login');\n\n  // 2. نملأ الحقول\n  await page.fill('#email', 'test@example.com');\n  await page.fill('#password', 'securePassword123');\n\n  // 3. نضغط على زر "تسجيل الدخول"\n  await page.click('button[type="submit"]');\n\n  // 4. ننتظر إعادة التوجيه إلى لوحة التحكم\n  await page.waitForURL('**/dashboard');\n\n  // 5. نتحقق من أن