اختبار E2E لـ TypeScript: دليل شامل للمطور

هل تطبيقك يعمل؟ أثبت ذلك باختبارات E2E باستخدام TypeScript

هل سمعت يومًا عبارة: «كل شيء يعمل لدينا، لقد اختبرنا يدويًا»؟ وفي اليوم التالي مباشرة، ينهار الإنتاج؟ مألوف، أليس كذلك؟ الاختبار اليدوي يشبه قراءة الطالع في فنجان القهوة. أنت لا تعرف أبدًا ما إذا كنت ستضغط على الزر الذي سيعطل تدفق المستخدم بالكامل.

اختبار E2E (من البداية إلى النهاية) باستخدام TypeScript هو مهندس ضمان الجودة الرقمي الخاص بك، الذي لا ينام، ولا يشرب القهوة، ويتحقق من كل زر على مدار الساعة طوال أيام الأسبوع. في هذه المقالة، لن نخبرك فقط ما هي اختبارات E2E. بل سنكتبها معًا: من التثبيت إلى خط أنابيب CI/CD الفعلي. استعدوا، سيكون الأمر مثيرًا ومفيدًا!

لماذا TypeScript تحديدًا لاختبارات E2E؟

قد يبدو أنه يمكن كتابة اختبارات E2E بأي لغة: JavaScript، Python، وحتى Java (لكن دعنا لا نتحدث عن الأمور المحزنة). ومع ذلك، يمنحك TypeScript قوة خارقة وهي الكتابة الثابتة. لن تتعرض بعد الآن لأخطاء مثل Cannot read property 'click' of undefined في وقت التشغيل. سيقوم بيئة التطوير المتكاملة (IDE) الخاصة بك بتسليط الضوء على الخطأ قبل تشغيل الاختبار.

بالإضافة إلى ذلك، إذا كان تطبيقك مكتوبًا بلغة TypeScript (وهو ما تفعله 90% من الفرق اليوم)، فمن المنطقي كتابة الاختبارات بنفس اللغة. ستستخدم نفس الأنواع، ونفس الواجهات، ونفس الأدوات المساعدة. هذا يقلل العبء المعرفي ويسرع عملية التطوير.

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

سوق أدوات E2E لـ TypeScript صغير، ولكن هناك قائدان واضحان: Cypress و Playwright. سنستخدم Playwright. لماذا؟

• دعم متعدد المتصفحات خارج الصندوق: Chromium، Firefox، WebKit (Safari). Cypress لا يزال لا يعمل بشكل جيد مع Safari.
• السرعة: يعمل Playwright عبر بروتوكول DevTools، وليس عبر خادم وكيل، مما يجعل الاختبارات أسرع.
• التعامل مع iframe وعلامات التبويب: لا يفرض Playwright قيودًا على العمل مع علامات تبويب متعددة أو iframe عبر النطاقات.
• TypeScript أولاً: Playwright مكتوب بلغة TypeScript ويدعمها بشكل كامل.

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

تثبيت وإعداد المشروع

لنقم بإنشاء مشروع جديد وتثبيت Playwright. افتح الطرفية ونفذ:

mkdir e2e-typescript-guidecd e2e-typescript-guidenpm init -ynpm install @playwright/testnpx playwright install

سيقوم الأمر الأخير بتنزيل المتصفحات (Chromium، Firefox، WebKit). سيستغرق هذا بضع دقائق - اذهب واحضر القهوة.

لنقم بإنشاء ملف playwright.config.ts في جذر المشروع:

import { defineConfig } from '@playwright/test';

export default defineConfig({  testDir: './tests',  fullyParallel: true,  retries: 1,  use: {    baseURL: 'http://localhost:3000',    trace: 'on-first-retry',  },  projects: [    {      name: 'chromium',      use: { browserName: 'chromium' },    },  ],});

لقد قمنا بتكوين عنوان URL الأساسي (استبدله بعنوان تطبيقك)، وقمنا بتفعيل التتبع لتصحيح الأخطاء، وحددنا أن الاختبارات ستكون في مجلد tests.

كتابة أول اختبار E2E بلغة TypeScript

قم بإنشاء مجلد tests وملف login.spec.ts. لنفترض أن لدينا نموذج تسجيل دخول بسيط.

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

test.describe('تسجيل دخول المستخدم', () => {  test('دخول ناجح ببيانات صحيحة', async ({ page }) => {    // الخطوة 1: فتح صفحة تسجيل الدخول    await page.goto('/login');

    // الخطوة 2: ملء الحقول    await page.getByLabel('البريد الإلكتروني').fill('user@example.com');    await page.getByLabel('كلمة المرور').fill('securepassword123');

    // الخطوة 3: الضغط على زر "تسجيل الدخول"    await page.getByRole('button', { name: 'تسجيل الدخول' }).click();

    // الخطوة 4: انتظار إعادة التوجيه إلى لوحة التحكم    awai