أتمتة المتصفح باستخدام Puppeteer أو Playwright.

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

إيش هي أتمتة المتصفح؟

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

ليش نستخدم Puppeteer أو Playwright؟

• توفير الوقت والجهد: المهام المتكررة تصير بدقائق بدل ساعات.
• الاختبارات الآلية: تتأكد إن موقعك أو تطبيقك شغال صح بعد كل تحديث.
• جمع البيانات (Web Scraping): تسحب معلومات من مواقع معينة بطريقة منظمة.
• إنشاء تقارير ومستندات: مثل تحويل صفحات الويب إلى PDF أو صور.

ملاحظة: أتمتة المتصفحات أداة قوية، بس انتبه لا تستخدمها بشكل يضر المواقع أو يخالف شروط استخدامها. استخدمها بمسؤولية يا بطل.

Puppeteer ولا Playwright؟

الاثنين ممتازين، بس فيه فروقات بسيطة:

• Puppeteer: سوته قوقل، ويشتغل أساساً مع متصفحات Chromium (كروم، إيدج). بسيط وسهل للمبتدئين.
• Playwright: سوته مايكروسوفت، ويدعم كل المتصفحات الرئيسية (كروم، فايرفوكس، سفاري) من نفس الـ API. يعتبر أقوى شوي في التعامل مع سيناريوهات معقدة ومتعددة المتصفحات.

شخصياً، لو بتبدأ اليوم، Playwright يعطيك مرونة أكبر لأنه يدعم متصفحات أكثر Out of the box.

يلا نبدأ! (Getting Started)

أول شي، لازم يكون عندك Node.js مثبت. بعدين، افتح الطرفية (Terminal) وسوي مشروع جديد:

mkdir browser-automation-project
cd browser-automation-project
npm init -y

تثبيت Puppeteer:

npm install puppeteer

مثال بسيط مع Puppeteer:

سوي ملف اسمه puppeteer-example.js وحط فيه الكود التالي:

const puppeteer = require('puppeteer');

async function runPuppeteer() {
  const browser = await puppeteer.launch({ headless: true }); // شغل المتصفح بوضع الخفي
  const page = await browser.newPage(); // افتح صفحة جديدة

  await page.goto('https://example.com'); // روح للموقع
  console.log(await page.title()); // اطبع عنوان الصفحة

  await page.screenshot({ path: 'example-puppeteer.png' }); // خذ لقطة شاشة

  await browser.close(); // سكر المتصفح
}

runPuppeteer();

شغل الكود بالطرفية: node puppeteer-example.js

تثبيت Playwright:

npm install playwright

أو عشان ينزل لك كل المتصفحات (كروم، فايرفوكس، ويب كيت):

npx playwright install

مثال بسيط مع Playwright:

سوي ملف اسمه playwright-example.js وحط فيه الكود التالي:

const { chromium } = require('playwright'); // تقدر تستخدم firefox أو webkit

async function runPlaywright() {
  const browser = await chromium.launch({ headless: true }); // شغل المتصفح بوضع الخفي
  const page = await browser.newPage(); // افتح صفحة جديدة

  await page.goto('https://example.com'); // روح للموقع
  console.log(await page.title()); // اطبع عنوان الصفحة

  await page.screenshot({ path: 'example-playwright.png' }); // خذ لقطة شاشة

  await browser.close(); // سكر المتصفح
}

runPlaywright();

شغل الكود بالطرفية: node playwright-example.js

مهام شائعة (Common Tasks)

التنقل بين الصفحات والضغط على الأزرار:

كل من Puppeteer و Playwright عندهم دوال مشابهة. هنا مثال بـ Playwright:

// ...
await page.goto('https://www.google.com');
await page.fill('textarea[name="q"]', 'أتمتة المتصفح'); // عبي حقل البحث
await page.press('textarea[name="q"]', 'Enter'); // اضغط Enter
await page.waitForNavigation(); // انتظر لين الصفحة تتحمل
console.log(await page.title());
// ...

ملاحظة: page.waitForNavigation() مهم جداً بعد أي عملية تؤدي لتغيير الصفحة عشان تتأكد إن الصفحة الجديدة تحملت بالكامل قبل ما تكمل شغلك.

التقاط لقطات شاشة وتحويل إلى PDF:

شفنا مثال لقطة الشاشة فوق. عشان تحول لـ PDF (غالباً Puppeteer أفضل هنا):

// Puppeteer example
await page.goto('https://example.com');
await page.pdf({ path: 'example.pdf', format: 'A4' });

نصائح وحركات (Tips and Tricks)

• وضع الـ headless: المتصفح يشتغل بالخلفية بدون واجهة رسومية. هذا أسرع وأفضل للسيرفرات. لو تبي تشوف وش قاعد يصير، حط headless: false.
• الانتظار الذكي: لا تعتمد على setTimeout. استخدم page.waitForSelector(), page.waitForLoadState(), page.waitForFunction() عشان تتأكد إن العنصر أو الحالة اللي تبغاها صارت موجودة.
• التعامل مع الـ iframes: بعض المواقع تحط محتوى داخل iframe. لازم تدخل داخل الـ iframe عشان تتعامل مع عناصره، مثلاً بـ Playwright: page.frameLocator('iframe[name="my-iframe"]').locator('button').
• إعدادات الوكيل (Proxies): إذا بتسوي سكرابينج لكمية كبيرة من البيانات، قد تحتاج تستخدم بروكسيات عشان ما ينحظر الـ IP حقك.

ختاماً

أتمتة المتصفحات بتفتح لك أبواب كثيرة في عالم البرمجة. سواء كنت مطور ويب، مهندس اختبارات، أو حتى هاوي، الأدوات زي Puppeteer و Playwright بتخليك تسوي أشياء رهيبة. ابدأ بتجارب بسيطة، وبعدين ابدع في مشاريعك الخاصة. بالتوفيق يا بطل!

← السابقالفهرس