تجريف التطبيقات ذات الصفحة الواحدة مع الكاتب المسرحي: دليل متعمق

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

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

في هذا الدليل الشامل الذي يزيد عن 3200 كلمة، ستتعلم تقنيات مجربة لمعالجة العقبات الشائعة التي تواجهها عند استخراج المنتجعات الصحية الحديثة باستخدام Playwright.

لماذا يمثل تجريف المنتجعات الصحية (SPA) تحديًا؟

قبل أن نتعمق في الحلول، من المهم أن نفهم ما الذي يجعل من الصعب استخلاص التطبيقات ذات الصفحة الواحدة في المقام الأول.

الاستخدام المكثف لجافا سكريبت من جانب العميل

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

تحميل البيانات غير المتزامن

تقوم SPA في كثير من الأحيان بجلب محتوى جديد بشكل غير متزامن في الخلفية وتحديث الصفحة دون إعادة تحميل كاملة. غالبًا ما لا تكون البيانات متاحة مقدمًا عند تحميل الصفحة لأول مرة.

وفقًا لمقاييس Radware، تقدم صفحة الويب المتوسطة أكثر من 100 طلب إلى موارد خارجية أثناء العرض.

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

معالجة DOM الديناميكية

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

إن محاولة استهداف العناصر من خلال موضعها الأولي في DOM أمر هش نظرًا لأنه يتغير بشكل متكرر.

الاعتماد على واجهات برمجة التطبيقات وطلبات AJAX

تستخدم SPA على نطاق واسع طلبات REST APIs وGraphQL وWebSockets وAJAX لجلب البيانات من الخوادم الخلفية. ثم يتم تقديم المحتوى من جانب العميل.

إن تبادل البيانات بين العميل والخادم غير مرئي بالنسبة لأساليب الكشط التقليدية التي لا ترى سوى استجابة HTML الأولية.

الجلسات والحالة التي تم المصادقة عليها

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

يجب التعامل مع ملفات تعريف الارتباط التي تخزن معرفات الجلسة ومعرفات المستخدم والرموز المميزة لتقليد جلسة مستخدم تمت مصادقتها.

الحاجة إلى تنفيذ جافا سكريبت

على عكس المواقع الثابتة، فإن تحليل HTML البحت لا يكفي للمنتجعات SPA. يجب أن يتم عرض الصفحة عن طريق تنفيذ JavaScript في بيئة تشبه المتصفح لإنشاء بنية البيانات النهائية.

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

هذه التحديات تجعل عملية تجريف SPA الفعالة مختلفة تمامًا عن عملية تجريف الويب التقليدية. دعونا نرى الآن كيف يمكن للكاتب المسرحي أن يساعدك في التغلب على هذه العقبات.

لماذا استخدام الكاتب المسرحي لتخريب المنتجعات الصحية؟

Playwright هي مكتبة Node.js لأتمتة متصفحات الويب الشائعة مثل Chromium وFirefox وWebKit. تشمل القدرات الرئيسية ذات الصلة بتجريف SPA ما يلي:

أتمتة المتصفح بدون رأس

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

في انتظار العناصر والشروط

تعمل آليات الانتظار الذكية المدمجة على منع أخطاء إلغاء البيانات عن طريق انتظار وصول العناصر أو الوظائف إلى الحالات المطلوبة قبل التفاعل.

السخرية من طلبات API

يسمح Playwright باعتراض الطلبات والاستجابة ببيانات وهمية بدلاً من استدعاء واجهات برمجة التطبيقات الحقيقية. وهذا يتيح لك تجريف بيانات AJAX.

اختبار الاستجابة

محاكاة الأجهزة المحمولة والمناطق الجغرافية وتقييد وحدة المعالجة المركزية للتعامل مع احتياجات اختبار التصميم سريع الاستجابة.

عارض التتبع

تصور البرامج النصية للكاتب المسرحي لفهم تفاعلات المتصفح الدقيقة وتشخيص المشكلات.

التعامل التلقائي مع النوافذ المنبثقة ومربعات الحوار

يتعامل الكاتب المسرحي تلقائيًا مع التنبيهات والتأكيد والمطالبات وطلبات المصادقة والتنزيلات لتبسيط منطق البرنامج النصي.

المحددات وDOM API

واجهة برمجة تطبيقات غنية لاستخراج البيانات عبر محددات CSS أو اجتياز عناصر DOM مباشرةً مثل صفحة ويب عادية.

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

بعد ذلك، دعنا نستعرض بعض أمثلة التعليمات البرمجية التي توضح أنماط استخراج المفاتيح باستخدام Playwright.

أنماط القشط للمنتجعات الصحية باستخدام الكاتب المسرحي

سنستكشف أدناه بعض تقنيات الكشط الشائعة للتغلب على تحديات SPA المحددة.

انتظر حتى يتم تحميل المحتوى

أحد أهم تحديات تجريف SPA هو إتاحة الوقت لتحميل المحتوى قبل الاستخراج.

بدلاً من محاولة استخراج البيانات على الفور، نحتاج إلى الانتظار حتى ينتهي عرض JavaScript غير المتزامن من ملء الصفحة.

الكاتب المسرحي page.waitForSelector() تتيح الطريقة انتظار ظهور محدد محدد قبل تنفيذ أوامر أخرى:

// Navigate to SPA
await page.goto(‘https://spa.com‘);

// Wait for content to load
await page.waitForSelector(‘.content‘);

// Extract data now that .content exists
const data = await page.$eval(‘.content‘, elem => elem.textContent); 

هذا ينتظر حتى العنصر مع الفئة content متاح في DOM قبل استخراج محتواه النصي.

وبدون هذا الانتظار .content قد لا يكون موجودًا بعد إذا كان لا يزال يتم التحميل بشكل غير متزامن مما يسبب أخطاء. يتيح هذا التأخير البسيط وقتًا لـ SPA لجلب البيانات الجديدة وتقديمها مما يتيح الاستخراج اللاحق.

انتظر الوظيفة

في بعض الحالات، قد نحتاج إلى الانتظار حتى تصبح شروط JavaScript الأكثر تعقيدًا صحيحة بدلاً من الانتظار لمحدد بسيط. هنا يمكننا استخدام page.waitForFunction():

// Wait for data to load
await page.waitForFunction(() => {
  return window.store.articles.length > 0 ;
});

// Store now has loaded articles
const articles = await page.evaluate(() => {
  return window.store.articles; 
});

هذا يستقصي الصفحة حتى العرف window.store.articles الشرط يعود صحيحا قبل قراءة البيانات.

يمنع الانتظار الذكي للمحددات والشروط فشل عملية الحذف بسبب تحميل بيانات الصفحة بشكل غير متزامن.

التعامل مع تحديثات المحتوى الديناميكي

يمكن لتطبيقات الصفحة الواحدة تحديث المحتوى ديناميكيًا استجابةً لإدخال المستخدم والأحداث دون إعادة تحميل الصفحة.

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

للتعامل مع العناصر المضافة ديناميكيًا، يمكننا الاستماع إلى تغييرات DOM باستخدام مراقبي الطفرات:

// Monitor mutations
await page.evaluate(() => {

  const observer = new MutationObserver(mutations => {
    console.log(‘Added nodes:‘, mutations[0].addedNodes);
  });

  observer.observe(document, { 
    childList: true,
    subtree: true
  });

});

• observer سيتم إعلامك عند إضافة عناصر جديدة إلى نص الصفحة. يمكننا بعد ذلك تفعيل منطق الكشط الخاص بنا استجابةً لهذه الطفرات.

يتيح ذلك التكيف مع تحديثات المحتوى بدلاً من مجرد التعامل مع التحميل الأولي للصفحة.

طلبات API وهمية

تستخدم SPA على نطاق واسع واجهات برمجة تطبيقات REST وGraphQL لجلب البيانات من جانب العميل.

لاعتراض هذه الطلبات، يمكننا تحديد طرق في Playwright للاستجابات الساخرة:

await page.route(‘/api/articles‘, route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify([
      {title: ‘Article 1‘},
      {title: ‘Article 2‘}  
    ])
  }); 
});

// Mock response will be returned from /api/articles
await page.goto(‘/page-that-calls-api‘) 

عندما يحاول SPA الاتصال /api/articles، سوف يستجيب معالجنا بالاستجابة المزيفة المحددة بدلاً من الوصول إلى واجهة برمجة التطبيقات الحقيقية.

وهذا يسمح لك باستخراج بيانات واجهة برمجة التطبيقات (API) دون آثار جانبية. يمكننا بناء استجابات قوية للتعامل مع السيناريوهات المختلفة التي قد يتوقعها رمز SPA الخاص بنا.

مصادقة الجلسة

يتطلب كشط مناطق الحساب الخاص في SPA معالجة المصادقة بشكل صحيح.

تتمثل الطريقة البسيطة في تسجيل الدخول بشكل طبيعي من خلال واجهة المستخدم قبل إجراء عملية الكشط:

// Navigate to login page
await page.goto(‘/login‘);

// Enter credentials and submit form 
await page.type(‘#email‘, ‘[email protected]‘);
await page.type(‘#password‘, ‘secret‘);
await page.click(‘#submit‘);

// Session now authenticated
// Crawl member pages 

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

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

التعامل مع التصميم المستجيب

تقوم SPA في كثير من الأحيان بتكييف تصميمها ومحتواها لتناسب أحجام الأجهزة المختلفة. لاختبار هذه السيناريوهات المستجيبة، يمكننا محاكاة متصفحات الهاتف المحمول باستخدام page.emulate():

await page.emulate({
  viewport: {
    width: 400,  
    height: 800
  },
  userAgent: ‘...‘,
});

يتيح تعيين منفذ عرض iPhone ووكيل المستخدم عرض الصفحة كما يفعل الجهاز المحمول.

الجمع بين مضاهاة waitForSelector ويمكنك التعامل مع التصميمات سريعة الاستجابة بشكل موثوق.

تساعد محاكاة بيئات مختلفة على ضمان تكيف مكشطة البيانات الخاصة بك مع SPA عبر سطح المكتب والهاتف المحمول.

مكتبات مساعد المكشطة

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

يمكن لهذه الأدوات تبسيط كتابة نصوص SPA القوية بنفسك.

السيناريو العملي للكاتب المسرحي

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

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

(async () => {

  const browser = await chromium.launch();
  const page = await browser.newPage();  

  // Login to scrape private content
  await page.goto(‘/login‘);
  await page.type(‘#email‘, ‘[email protected]‘);
  await page.type(‘#password‘, ‘secret‘); 
  await page.click(‘#submit‘);

  await page.waitForNavigation();

  // Navigate to SPA
  await page.goto(‘/app‘);

  // Wait for content to load
  await page.waitForSelector(‘.content‘);

  // Monitor mutations
  page.evaluate(() => {
    new MutationObserver().observe(document, {
      childList: true 
    });    
  });

  // Mock API response
  page.route(‘/api/articles‘, route => {
    route.fulfill({ /*...mock response...*/ }); 
  });

  // Extract content 
  const data = await page.evaluate(() => {
    const content = document.querySelector(‘.content‘);
    return content.innerText;
  });

  console.log(data);

  await browser.close();

})();

يقوم هذا البرنامج النصي بتسجيل الدخول إلى التطبيق الخاص، وينتظر تحميل المحتوى المصادق عليه، ويتعامل مع الطفرات الديناميكية، ويسخر من استجابة واجهة برمجة التطبيقات (API) ويستخرج البيانات إلى const data.

يمكن تكييف التقنيات لتطوير كاشطات قوية للمنتجعات الصحية في العالم الحقيقي.

تجريف المنتجعات الصحية على نطاق واسع

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

كشط خدمات API

واجهات برمجة تطبيقات تجريف الويب مثل ScraperAPI التعامل مع أتمتة المتصفح وملفات تعريف الارتباط والوكلاء والتناوب على نطاق واسع. يؤدي ذلك إلى تبسيط عملية استخراج مواقع JavaScript الثقيلة بما في ذلك SPA.

مزارع المتصفحات مقطوعة الرأس

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

الزواحف المستضافة

بدلاً من تشغيل البنية التحتية الخاصة بك للتجريد، تفضل برامج الزحف المستضافة الزحف و ProxyCrawl التعامل مع تنسيق المتصفحات والوكلاء والأتمتة للزحف إلى المواقع المعقدة.

روبوتات تجريف الويب

أدوات مثل الوهمية, Dexi.io و ParseHub توفير تكوين بالنقر والنقر للكاشطات للمنتجعات الصحية بدون تشفير. تكتشف هذه الروبوتات محتوى الصفحة تلقائيًا، وتنتظر، وتنقر، وما إلى ذلك، مما يتيح الإعداد بدون تعليمات برمجية.

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

بديل أسهل: كرولي

كرولي يوفر زاحف ويب مبتكرًا كخدمة لمواقع JavaScript المعروضة.

يتعامل تلقائيًا مع تحديات الكشط الشائعة مثل:

• انتظار تحميل العناصر أو عناوين URL قبل الاستخراج
• مصادقة الجلسات وتخزين ملفات تعريف الارتباط
• اعتراض طلبات API والتعامل مع بيانات AJAX
• التمرير عبر صفحات التمرير اللانهائية
• إعادة تشغيل عمليات الاستخراج الفاشلة لتحسين المرونة

يمكن لـ Crawlee الزحف عبر مناطق SPA المعقدة خارج الصندوق دون الحاجة إلى برمجة نصوص Playwright للانتظار والمصادقة ومعالجة AJAX وما إلى ذلك.

القدرات الأساسية:

• قم بالتكوين عبر واجهة مرئية بدلاً من البرمجة
• الانتظار التلقائي لعناوين URL والمحددات قبل استخراج البيانات
• يقوم الزحف ذو الحالة بنقل ملفات تعريف الارتباط عبر الصفحات
• اعتراض طلب واجهة برمجة التطبيقات (API) للتعامل مع بيانات XHR وFetch وJSON
• عرض Chrome بدون رأس بشكل افتراضي
• أدوات مرئية لفحص وتصحيح الزحف
• الواجهة الخلفية للزاحف الموزعة والقابلة للتطوير أفقيًا

يؤدي هذا إلى تبسيط عملية استخراج تطبيقات الويب JavaScript المعقدة دون الحاجة إلى برمجة Playwright. يعد زاحف Crawlee كخدمة مثاليًا للمستخدمين الذين لا يرغبون في إدارة البنية التحتية الخاصة بهم.

تشمل التطبيقات المدعومة ما يلي:

• تطبيقات React وNext.js
• المنتجعات الصحية الزاويّة
• صفحات Vue.js
• مواقع ويب باك
• صفحات أجاكس الثقيلة
• تطبيقات PWAs والإلكترون
• تصاميم ديناميكية وسريعة الاستجابة

إن توفير الدعم الجاهز لمواجهة تحديات الكشط مثل ظروف الانتظار والجلسات المعتمدة وتغييرات المحتوى الديناميكية يجعل Crawlee خيارًا مقنعًا لكشط SPA دون كتابة نصوص برمجية معقدة.

وفي الختام

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

تشمل الاستراتيجيات الرئيسية التي يغطيها هذا الدليل ما يلي:

• انتظار تحميل المحتوى الأولي والتحديثات الديناميكية قبل الاستخراج
• الاستماع إلى تغييرات DOM لاكتشاف المحتوى الجديد الذي يتم عرضه
• اعتراض طلبات REST API وGraphQL للوصول إلى البيانات الخلفية
• محاكاة الأجهزة المحمولة والتحكم في التعامل مع التصميمات سريعة الاستجابة
• مصادقة الجلسات وإدارة ملفات تعريف الارتباط للوصول إلى بيانات المستخدم الخاصة

سيساعدك اتباع هذه الأنماط على تطوير كاشطات Playwright التي يمكن صيانتها حتى لمنتجعات SPA المعقدة التي تعتمد بشكل كبير على JavaScript وواجهات برمجة التطبيقات من جانب العميل.

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

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

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