Angular Academy · درس

كتابة اختبارات Playwright

أتمت تدفقات المتصفح باستخدام Playwright

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

أول اختبار Playwright لك

اختبار Playwright هو دالة غير متزامنة تستقبل تجهيزات مثل page. تستورد test وexpect من @playwright/test وتصف سيناريو للمستخدم.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

تجهيزة page

يمثل الكائن page علامة تبويب واحدة في المتصفح. يحصل كل اختبار على page جديدة ومعزولة ضمن سياق نظيف، لذلك لا تتشارك الاختبارات ملفات تعريف الارتباط أو التخزين عن طريق الخطأ.

التنقل باستخدام goto

يحمّل page.goto(url) عنوان URL وينتظر جاهزية الصفحة. وبدمجه مع baseURL في الإعداد، يمكنك استخدام مسارات نسبية.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

العثور على العناصر باستخدام Locators

إن locator مقبض كسول لعنصر، وينتظر العنصر تلقائيًا. فضّل Locators الدلالية مثل getByRole وgetByLabel وgetByText على محددات CSS الهشة.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

الكتابة والنقر

استخدم fill لتعيين قيم الإدخال وclick للنقر على الأزرار. ينتظر Playwright تلقائيًا ظهور العناصر وتمكينها قبل تنفيذ الإجراء.

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

الانتظار التلقائي يلغي فترات النوم غير المستقرة

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

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

تجميع الاختبارات باستخدام describe

استخدم test.describe لتجميع السيناريوهات المرتبطة ومشاركة الإعداد باستخدام beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

اختبار رحلة مستخدم كاملة

سلسل الإجراءات لنمذجة تدفق كامل. يجب أن تُقرأ كل خطوة مثل نص يصف سلوك المستخدم.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

تشغيل الاختبارات

شغّل جميع المواصفات من CLI. أضف --headed لمشاهدة المتصفح، أو --ui لفتح مشغّل الاختبارات التفاعلي في Playwright.

npx playwright test
npx playwright test --headed
npx playwright test --ui

تصحيح حالات الفشل

عند الفشل، يستطيع Playwright التقاط لقطات شاشة ومقاطع فيديو وتتبع يمكنك إعادة تشغيله خطوة بخطوة. يعرض عارض التتبع DOM عند كل إجراء، مما يجعل تشخيص حالات الفشل غير المستقرة سهلًا.

npx playwright test --trace on
npx playwright show-trace trace.zip

عزل الاختبارات مهم

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

تحقّق سريعًا

لماذا يجب تجنّب waitForTimeout؟

مراجعة

يستخدم اختبار Playwright تجهيزة page: استخدم goto للتنقل، وLocators الدلالية (getByRole وgetByLabel) للعثور على العناصر، وfill/click للتفاعل. يلغي الانتظار التلقائي فترات النوم غير المستقرة. جمّع الاختبارات باستخدام describe، وشغّلها باستخدام npx playwright test، وصحّح الأخطاء باستخدام التتبعات.

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

هل درس «كتابة اختبارات Playwright» مجاني؟

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

ماذا ستتعلم في «كتابة اختبارات Playwright»؟

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

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

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

كم من الوقت يستغرق درس «كتابة اختبارات Playwright»؟

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

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

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

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

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