كيفية استخدام بلاي رايت في اختبار الأتمتة

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

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

ما هو Playwright ولماذا يجب أن تهتم به؟

Playwright هو إطار عمل مفتوح المصدر لاختبار الأتمتة، تم بناؤه بواسطة Microsoft ويعمل ببساطة. يتيح لك التحكم في المتصفحات برمجيًا—النقر على الأزرار، وملء النماذج، والتحقق من السلوك—دون المتاعب المعتادة. على عكس الأدوات القديمة التي تبدو هشة وبطيئة، يتعامل Playwright مع تطبيقات الويب الحديثة بسلاسة، وينتظر بذكاء ظهور العناصر، ويُشغّل الاختبارات عبر Chrome و Firefox و Safari بنفس الكود. إذا كنت تريد اختبارات موثوقة لا تضيع وقتك، فإن Playwright يستحق اهتمامك.

لماذا تختار Playwright لاختبار الأتمتة؟

تعتمد الفرق على Playwright لاختبار الأتمتة لأنه يقدم مزايا ملموسة:

1. اختبار حقيقي عبر المتصفحات: اكتب مرة واحدة، وشغّل في كل مكان. Chrome، Firefox، Safari، Edge—كلها مدعومة بشكل أصلي.
2. سرعة فائقة: التنفيذ المتوازي بشكل افتراضي يعني أن مجموعات الاختبار التي كانت تستغرق ساعات تُنجز الآن في دقائق.
3. مصمم للتطبيقات الحديثة: SPAs، Shadow DOM، المحتوى الديناميكي—يتعامل Playwright مع الويب اليوم دون حلول بديلة.
4. موثوقية ذكية: الانتظار التلقائي (Auto-waiting) يزيل الاختبارات المتقطعة (flaky tests). لا داعي لإضافة مؤقتات نوم عشوائية بعد الآن.
5. تصحيح الأخطاء بسهولة: تُظهر التتبعات المفصلة ولقطات الشاشة ومقاطع الفيديو ما حدث بالضبط عند حدوث الأعطال.

إعداد أول اختبار Playwright لك

أ. الإعداد اليدوي

البدء مع Playwright سهل بشكل منعش. لست بحاجة إلى الصراع مع التكوينات المعقدة أو طقوس الإعداد الغامضة.

أولاً، ستحتاج إلى تثبيت Node.js على جهازك. بمجرد أن يصبح جاهزًا، قم بإنشاء دليل مشروع جديد وشغّل:

npm init playwright@latest

يرشدك هذا الأمر خلال عملية إعداد بسيطة. يسألك عن المتصفحات التي تريد الاختبار عليها (نصيحة احترافية: ابدأ بالمتصفحات الثلاثة للحصول على أقصى تغطية) وما إذا كنت تريد إضافة سير عمل GitHub Actions. يستغرق الإعداد بالكامل حوالي دقيقتين.

بمجرد الانتهاء، سيكون لديك هيكل مشروع يتضمن:

• دليل tests/ لملفات الاختبار الخاصة بك
• ملف playwright.config.js للتكوين

• ملفات اختبار نموذجية لتبدأ بها

ب. تكامل سلس لبيئة التطوير المتكاملة (IDE) مع VS Code و Cursor

إذا كنت تستخدم VS Code أو Cursor، يصبح البدء مع Playwright أكثر سلاسة. يمنحك ملحق Playwright الرسمي تسجيل الاختبار بنقرة واحدة وتصحيح الأخطاء والتنفيذ مباشرة داخل محرر الكود الخاص بك.

ثبّته من المتجر، وسترى أوامر "Record new test" (تسجيل اختبار جديد) و "Pick locator" (اختيار محدد المواقع) التي تزيل التخمين.

لتحقيق تكامل أعمق للمشروع، يمكن لمستخدمي Cursor الاستفادة من خادم Playwright MCP (بروتوكول سياق النموذج) لأتمتة إنشاء الاختبار وإعداد المشروع عبر اللغة الطبيعية. إليك تكوين يبسط سير عملك:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PW_TEST_DIR": "./tests",
        "PW_CONFIG_PATH": "./playwright.config.js"
      }
    }
  }
}

باستخدام هذا التكوين، يمكنك أن تطلب من Cursor "إنشاء اختبار تسجيل دخول باستخدام نموذج كائن الصفحة" أو "إضافة فحوصات إمكانية الوصول إلى تدفق الدفع"، وسيقوم بإنشاء ملفات اختبار منظمة بشكل صحيح تتبع اتفاقيات مشروعك. يتفهم خادم MCP قاعدة التعليمات البرمجية الموجودة لديك، مما يجعل إعداد أعضاء الفريق الجدد والحفاظ على معايير الاختبار أمرًا سهلاً تقريبًا.

كتابة أول نص برمجي للاختبار

لننشئ شيئًا عمليًا. تخيل أنك تختبر صفحة تسجيل الدخول لتطبيقك. إليك كيف يمكنك كتابة هذا الاختبار:

const { test, expect } = require('@playwright/test');

test('successful login flow', async ({ page }) => {
  await page.goto('https://your-app.com/login');
  
  await page.locator('data-testid=username').fill('testuser');
  await page.locator('data-testid=password').fill('securepassword');
  await page.locator('button:has-text("Login")').click();
  
  await expect(page.locator('h1')).toContainText('Dashboard');
  await expect(page).toHaveURL('**/dashboard');
});

لاحظ مدى سهولة قراءتها؟ الكود يكاد يروي قصة: انتقل إلى صفحة تسجيل الدخول، املأ بيانات الاعتماد، انقر على الزر، وتأكد من وصولك إلى المكان الصحيح. هذا هو جمال Playwright لاختبار الأتمتة—فهو لا يعترض طريقك ويسمح لك بالتركيز على ما تختبره، وليس كيفية اختباره.

نصيحة أفضل الممارسات: استخدم أسماء اختبارات ذات معنى وأضف سمات data-testid إلى عناصرك. هذا يجعل اختباراتك أكثر مرونة لتغييرات واجهة المستخدم وأسهل لفريقك في الفهم.

الميزات الرئيسية وأفضل الممارسات للنجاح

الآن بعد أن أصبحت لديك الأساسيات، دعنا نتحدث عن أفضل الممارسات التي تميز الهواة عن المحترفين عند استخدام Playwright لاختبار الأتمتة.

1. استخدم نموذج كائن الصفحة (Page Object Model)

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

class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameInput = page.locator('data-testid=username');
    this.passwordInput = page.locator('data-testid=password');
    this.loginButton = page.locator('button:has-text("Login")');
  }
  
  async login(username, password) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

2. الاستفادة من قوة التكوين

ملف playwright.config.js هو مركز القيادة الخاص بك. لا تقبل الإعدادات الافتراضية فقط—قم بتخصيصها لتلبية احتياجاتك. قم بتكوين مشاريع مختلفة لبيئات مختلفة (تطوير، اختبار، إنتاج)، وقم بإعداد استراتيجيات إعادة المحاولة، وحدد أحجام منفذ العرض (viewport sizes) لاختبار الاستجابة.

3. إتقان استراتيجيات محدد المواقع (Locator Strategies)

يقدم Playwright طرقًا متعددة للعثور على العناصر، ولكن بعضها أكثر موثوقية من البعض الآخر. بترتيب الأفضلية:

1. محددات الأدوار (Role locators) (page.getByRole('button', { name: 'Submit' })) - الأكثر سهولة وقوة
2. معرفات الاختبار (Test IDs) (page.locator('data-testid=submit-button')) - رائعة للعناصر التي ليس لها أدوار واضحة
3. النص (Text) (page.locator('text=Submit')) - جيدة للنص المرئي للمستخدم
4. CSS/XPath - استخدمها كملاذ أخير عندما لا يعمل أي شيء آخر

4. تشغيل الاختبارات في CI/CD مبكرًا

يتألق Playwright في بيئات التكامل المستمر (CI). يقدم أمر الإعداد حتى إنشاء سير عمل GitHub Actions لك. تشغيل مجموعة اختبارات الأتمتة الخاصة بك على كل طلب سحب (pull request) يكتشف الانحدارات قبل أن تصل إلى الإنتاج. اجعل هذا عادة من اليوم الأول.

5. استخدام خطافات الاختبار (Test Hooks) بحكمة

تعتبر خطافات beforeEach و afterEach مثالية للإعداد والتفكيك، لكن لا تبالغ في استخدامها. حافظ على استقلالية الاختبارات—الحالة المشتركة هي عدو اختبار الأتمتة الموثوق به. يجب أن يكون كل اختبار قادرًا على التشغيل بمعزل عن غيره.

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

أحد الأسباب التي جعلت Playwright يتمتع بشعبية كبيرة في اختبار الأتمتة هو مدى أناقته في التعامل مع التعقيدات الواقعية:

تحميل الملفات: على عكس بعض الأدوات التي تتطلب حلولًا بديلة، يتعامل Playwright مع تحميل الملفات كعنصر أساسي. ما عليك سوى استخدام page.locator('input[type="file"]').setFiles().

اعتراض الشبكة: هل تحتاج إلى اختبار كيفية تعامل تطبيقك مع الشبكات البطيئة أو فشل واجهات برمجة التطبيقات (APIs)؟ يتيح لك Playwright اعتراض وتعديل طلبات الشبكة أثناء التنفيذ.

await page.route('**/api/data', async route => {
  await route.fulfill({
    status: 500,
    body: JSON.stringify({ error: 'Server error' })
  });
});

المصادقة: هل تختبر ميزات تتطلب تسجيل الدخول؟ استخدم storageState لإعادة استخدام حالة المصادقة عبر الاختبارات، مما يوفر الوقت ويتجنب خطوات تسجيل الدخول المتكررة.

الأسئلة المتكررة

س1: هل Playwright مخصص لمطوري JavaScript فقط؟

ج: ليس على الإطلاق! بينما تم بناء Playwright في الأصل لـ Node.js، فإنه يحتوي الآن على روابط لغوية رسمية لـ Python و Java و .NET. يمكن للفرق اختيار اللغة التي تناسب مجموعتهم التقنية بشكل أفضل مع الاستمتاع بنفس إمكانيات اختبار الأتمتة القوية.

س2: كيف يقارن Playwright بـ Selenium لاختبار الأتمتة؟

ج: فكر في Selenium كسيارة قديمة موثوقة—توصلك إلى وجهتك، لكنها تتطلب المزيد من الصيانة وتقود ببطء. Playwright هي السيارة الكهربائية الحديثة—أسرع، أكثر موثوقية، ومصممة لويب اليوم. تمنح آلية الانتظار التلقائي في Playwright وأدوات تصحيح الأخطاء الأفضل والتنفيذ المتوازي الأصلي ميزة كبيرة.

س3: هل يمكنني ترحيل اختباراتي الحالية إلى Playwright؟

ج: بالتأكيد. تنجح العديد من الفرق في الترحيل من Selenium أو Cypress أو أدوات أخرى. يوفر Playwright أيضًا ميزة إنشاء الكود (codegen) التي يمكنها تسجيل إجراءاتك وإنشاء كود الاختبار، مما يساعدك على إعادة إنشاء سيناريوهات الاختبار الموجودة بسرعة.

س4: ماذا عن اختبار الأجهزة المحمولة؟

ج: يدعم Playwright محاكاة منفذ العرض المحمول وأحداث اللمس، مما يتيح لك اختبار التصاميم المتجاوبة بفعالية. لاختبار تطبيقات الهاتف المحمول الأصلية، ستحتاج إلى البحث عن أدوات أخرى، ولكن لاختبار أتمتة الويب على الأجهزة المحمولة، Playwright ممتاز.

س5: ما مدى صعوبة منحنى التعلم للمبتدئين؟

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

خواطر أخيرة

يجعل Playwright اختبار الأتمتة سهل المنال دون التضحية بالقوة. ابدأ باختبار تدفقات المستخدم الحيوية، وشغلها في CI/CD من اليوم الأول، وتوسع تدريجيًا. تتطور الأداة معك—من البرامج النصية البسيطة المسجلة إلى مجموعات شاملة عبر المتصفحات. الفرق التي تتعامل مع Playwright كجزء من عملية التطوير الخاصة بها، وليس مجرد فكرة لاحقة، تكتسب الثقة في كل إصدار. منحنى التعلم لطيف، لكن التأثير فوري. امنحها يومًا واحدًا، وستتساءل لماذا انتظرت.