Playwright لجافا سكريبت (Node.js): دليل شامل مع أمثلة

Playwright هي مكتبة حديثة مفتوحة المصدر لأتمتة المتصفحات، طورتها شركة Microsoft. توفر واجهة برمجة تطبيقات (API) موحدة للتحكم في متصفحات Chromium و Firefox و WebKit (محرك Safari) عبر بروتوكول DevTools. على عكس Selenium، صُممت Playwright من البداية للعمل مع تطبيقات الويب الحديثة وتدعم سيناريوهات مثل اعتراض طلبات الشبكة، ومحاكاة الأجهزة المحمولة، والعمل مع عدة صفحات وعلامات تبويب، بالإضافة إلى الانتظار التلقائي للعناصر.

الاستخدام الأساسي لـ Playwright هو اختبار التطبيقات من البداية إلى النهاية (E2E). لكن إمكانياتها تتجاوز بكثير مجرد الاختبار: تُستخدم المكتبة لاستخراج البيانات من المواقع الديناميكية (SPA)، وأتمتة المهام الروتينية (مثل ملء النماذج)، وإنشاء لقطات الشاشة وتقارير PDF، وكذلك لمراقبة أداء صفحات الويب. بفضل دعمها لمحركات المتصفحات الثلاثة الرئيسية، يمكنك التأكد من أن تطبيقك يعمل بشكل صحيح في أي بيئة.

الميزة الرئيسية لـ Playwright مقارنة بالمنافسين هي السرعة والموثوقية. تستخدم المكتبة بنية غير متزامنة (asynchronous) تعتمد على Promises، وتنتظر تلقائيًا ظهور العناصر (لا حاجة لكتابة sleep())، كما يمكنها العمل مع iframe والنوافذ المنبثقة واعتراض رسائل وحدة التحكم في المتصفح. توفر Playwright أيضًا أداة مدمجة لتوليد الاختبارات (codegen) تسجل تحركاتك في المتصفح وتحولها إلى كود جاهز.

تثبيت Playwright

لتثبيت Playwright في مشروع Node.js، قم بتنفيذ الأوامر التالية في الطرفية (Terminal):

npm init -y
npm install playwright
npx playwright install

الأمر الأول ينشئ ملف package.json، والثاني يقوم بتثبيت المكتبة نفسها، والثالث يقوم بتحميل المتصفحات (Chromium و Firefox و WebKit). إذا كنت تريد تثبيت متصفح واحد فقط، استخدم npx playwright install chromium.

بالنسبة لـ TypeScript، قم بتثبيت الأنواع (types) الإضافية:

npm install -D @playwright/test

إذا كنت تستخدم Playwright كإطار عمل للاختبار، يُنصح بتثبيت @playwright/test الذي يتضمن مشغل الاختبارات (test runner) والإعدادات المسبقة (fixtures) والتكوين.

بداية سريعة: مثال عملي بسيط

أنشئ ملفًا باسم example.js وأضف الكود التالي:

const { chromium } = require('playwright');

(async () => {
  // تشغيل المتصفح (headless: true يعني بدون واجهة رسومية)
  const browser = await chromium.launch({ headless: true });
  // إنشاء صفحة جديدة (علامة تبويب)
  const page = await browser.newPage();
  
  // الانتقال إلى موقع
  await page.goto('https://example.com');
  
  // الحصول على عنوان الصفحة
  const title = await page.title();
  console.log('عنوان الصفحة:', title);
  
  // أخذ لقطة شاشة
  await page.screenshot({ path: 'example.png' });
  
  // إغلاق المتصفح
  await browser.close();
})();

قم بتشغيل السكريبت باستخدام الأمر node example.js. ستظهر في وحدة التحكم عنوان الصفحة، وسيتم إنشاء ملف example.png يحتوي على لقطة الشاشة في المجلد.

يوضح هذا المثال دورة العمل الأساسية مع Playwright: تشغيل المتصفح، إنشاء صفحة، التنقل، التفاعل مع DOM، والإغلاق.