Playwright के साथ अनंत-स्क्रॉल प्रोडक्ट कलेक्शन्स को कैसे क्रॉल करें

Scrapeless Agent Browser, Playwright-संचालित क्लाउड सेशन्स चलाता है, और Scrapeless Residential Proxies, उपयुक्त संग्रह कार्यों के लिए स्थान-लक्षित रूट्स प्रदान करते हैं।

अगला कलेक्शन पेज क्या लोड करता है, पहचानें

एक अनंत-स्क्रोल उत्पाद संग्रह तब अधिक आइटम मांगता है जब उपयोगकर्ता किसी ट्रिगर तक पहुँचता है, जो पेज के किनारे, एक सेंटिनल एलिमेंट या किसी नेस्टेड कंटेनर का निचला भाग हो सकता है। Intersection Observer विनिर्देशन बताता है कि एक पेज कैसे किसी लक्ष्य को व्यूपोर्ट या कंटेनर सीमा को पार करते हुए देख सकता है। DevTools आपकी मदद कर सकता है यह पहचानने में कि वास्तव में कौन-सा एलिमेंट स्क्रॉल हो रहा है और क्या कोई फ़ेच उस कार्रवाई के बाद होता है। किसी फ़िल्टर बदलाव के बाद भी जाँच करें। खोज, सॉर्टिंग और स्टॉक फ़िल्टर में से प्रत्येक एक अलग संग्रह शुरू कर सकता है।

सबसे पहले किसी अनुमत संरचित स्रोत की तलाश करें। एक स्टोर-स्वामित्व वाले फ़ीड या समर्थित पेजिनेशन एंडपॉइंट सीधे एक कर्सर, स्थिर आइटम पहचानकर्ता और समाप्ति फ़्लैग प्रदान कर सकते हैं। उस संग्रह को परिभाषित करने वाले किसी भी फ़िल्टर को यथावत रखें। जब स्वयं उपयोगकर्ता अनुभव लक्ष्य हो, तो यह देखने के लिए ब्राउज़र का उपयोग करें कि अगला बैच कैसे लोड होता है और कौन‑सी स्थिति ग्राहक को बताती है कि संग्रह समाप्त हो गया है। प्रत्येक सतह से प्राप्त डेटा को मालिक के साथ सहमत दायरे के अनुसार संसाधित करें।

प्रकट होने वाली पेज की ऊँचाई भ्रामक हो सकती है। एक वर्चुअलाइज्ड सूची माउंट की गई कार्डों के एक छोटे से सेट को बनाए रखती है और जैसे-जैसे उपयोगकर्ता स्क्रोल करता है, उन्हें पुनः उपयोग करती है। इसकी ऊँचाई शुरू से ही सुरक्षित रखी जा सकती है। ऐसे में, प्रगति का संकेत एक नए देखे गए आइटम ID या बैच कर्सर से मिलता है, और पूर्णता का संकेत एप्लिकेशन से आता है। अंतिम दृश्य पंक्ति की स्थिति केवल एक संकेत है।

पूर्वापेक्षाएँ और स्थापना

Playwright और Chromium के साथ एक Node.js वातावरण का उपयोग करें। एक छोटे प्रोजेक्ट में Playwright पैकेज जोड़ें, उसका Chromium ब्राउज़र इंस्टॉल करें या किसी कॉन्फ़िगर किए गए Chromium executable का उपयोग करें, और एक ऐसे स्टोरफ़्रंट फ़िक्स्चर से शुरू करें जिस पर आपका नियंत्रण हो। एक वास्तविक इंटीग्रेशन में, टिकाऊ कार्ड IDs और एक completion signal के लिए मार्कअप का निरीक्षण करें। उदाहरण के test IDs फ़िक्स्चर एट्रीब्यूट हैं। जब आप इस फ़ंक्शन को किसी वास्तविक स्टोर के लिए अनुकूलित करेंगे, तो उनके बदलने की अपेक्षा है।

Use Playwright लोकेटर कलेक्शन के लिए प्रोडक्ट एलिमेंट्स की सीमा निर्धारित करने के लिए। एक व्यापक लिंक सेलेक्टर नेविगेशन, एडिटोरियल कार्ड्स और रिकमेंडेशन कैरोसेल्स को पकड़ सकता है। कार्ड पर एक अपरिवर्तनीय प्रोडक्ट ID या सत्यापित URL पैटर्न को प्राथमिकता दें। साक्ष्य के रूप में मूल लिंक को बनाए रखें और केवल ज्ञात नियमों के अंतर्गत URL घटकों को सामान्यीकृत करें। URL मानक ब्राउज़र के URL पार्सिंग और सीरियलाइज़ेशन व्यवहार का वर्णन करता है।

DOM छोड़ने से पहले प्रत्येक बैच एकत्र करें

स्क्रॉल स्थिति को बदलने से पहले वर्तमान कार्डों को स्थिर ID के आधार पर कुंजी वाले मैप में पढ़ें। प्रदर्शित शीर्षक और हल किया हुआ उत्पाद URL को ID के साथ संग्रहीत करें। जब उपयोगकर्ता वापस स्क्रॉल करता है और कोई कार्ड फिर से दिखाई देता है, तो मैप उस उत्पाद के लिए एक ही डिस्कवरी पंक्ति बनाए रखता है। यदि कई वेरिएंट जानबूझकर अलग-अलग कार्डों के रूप में दिखाई देते हैं, तो ऐसी कुंजी का उपयोग करें जो इच्छित डिस्कवरी इकाई का प्रतिनिधित्व करे।

निम्न उदाहरण एक नियंत्रित स्टोरफ्रंट फ़िक्स्चर पर चलता है जिसमें एक स्क्रॉल करने योग्य पैनल, एक बैच मार्कर, क्रमिक रूप से माउंट किए गए दो प्रोडक्ट कार्ड और एक स्पष्ट एंड मार्कर होता है। अनुमतियाँ और पेजिनेशन व्यवहार की पुष्टि करने के बाद, स्टोर-विशिष्ट सेलेक्टर्स के साथ उसी पैटर्न का उपयोग करें। एक सक्रिय एजेंट ब्राउज़र सत्र के लिए Scrapeless अकाउंट और क्विकस्टार्ट में वर्णित कनेक्शन सेटअप की आवश्यकता होती है।

async function collect(page, targetUrl, maxRounds = 12) {
  await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
  const grid = page.getByTestId('collection');
  const cards = grid.locator('[data-product-id]');
  const scroller = page.getByTestId('scroll-pane');
  const seen = new Map();

  for (let round = 0; round < maxRounds; round += 1) {
    await cards.first().waitFor({ state: 'visible' });
    const batch = await cards.evaluateAll(nodes => nodes.map(node => ({
      id: node.getAttribute('data-product-id'),
      title: node.querySelector('a')?.textContent.trim(),
      url: node.querySelector('a')?.href
    })));
    for (const item of batch) {
      if (item.id && item.title && item.url) seen.set(item.id, item);
    }
    if (await page.getByTestId('collection-end').isVisible()) {
      return { status: 'complete', items: [...seen.values()] };
    }
    const batchId = await grid.getAttribute('data-batch');
    if (!batchId) throw new Error('Collection batch identifier is missing');
    await scroller.hover();
    await page.mouse.wheel(0, 240);
    try {
      await page.waitForFunction(previous => {
        const root = document.querySelector('[data-testid="collection"]');
        return root?.getAttribute('data-batch') !== previous;
      }, batchId, { timeout: 3000 });
    } catch (error) {
      if (error.name !== 'TimeoutError') throw error;
      return { status: 'no_progress', items: [...seen.values()] };
    }
  }
  return { status: 'round_limit', items: [...seen.values()] };
}

फिक्स्चर पहले कार्ड के DOM से हटाए जाने के बाद पूर्ण स्थिति के साथ आइटम आईडी A और B लौटाती है। उदाहरण का बैच मार्कर फिक्स्चर के इम्प्लीमेंटेशन का एक विवरण है। जिस स्टोर को आप संचालित करते हैं, उसके लिए, उसी फ़िल्टर और कर्सर से जुड़ी एक सफल रिक्वेस्ट तब उपयोगी प्रगति संकेत के रूप में काम कर सकती है जब संबंधित कार्ड रेंडर हो जाएँ। एक विलंबित परिवर्तन को सीमित बिना-प्रगति परिणाम देना चाहिए। वह परिणाम आंशिक सूची को निरीक्षण के लिए उपलब्ध छोड़ देता है।

दाएँ स्क्रोल कंटेनर को आगे बढ़ाएँ

अगली क्रिया को उन तत्वों को लक्ष्य करना चाहिए जो और कार्ड लोड करने के लिए ज़िम्मेदार हैं। किसी मोडल या श्रेणी पैन में एम्बेड किया गया संग्रह विंडो स्क्रॉलिंग को नज़रअंदाज़ कर सकता है। उदाहरण में, पैन पर होवर करने से व्हील इनपुट सही क्षेत्र पर आ जाता है। ऐसा स्क्रॉल इन्क्रिमेंट इस्तेमाल करें जो माउंटेड पंक्तियों में ओवरलैप को बनाए रखे और मापें कि क्या आप चरणों के बीच IDs मिस कर रहे हैं। वर्चुअलाइज्ड ग्रिड्स एक छलांग बहुत बड़ी होने पर बीच के कार्ड्स को छोड़ सकते हैं।

लोडिंग संकेतकों का निरीक्षण करें और उन स्थितियों में अंतर करें जहाँ किसी कलेक्शन के लोड होने पर वह खाली है, और जहाँ रेंडर ने कभी कार्ड उत्पन्न ही नहीं किए हैं। एक इरादतन खाली स्थिति शून्य उत्पादों के साथ भी एक पूर्ण परिणाम हो सकती है। किसी कंकाल (skeleton), एक्सेस चुनौती, सहमति संवाद या टूटे हुए सेलेक्टर को एक व्याख्यात्मक परिणाम उत्पन्न करना चाहिए। स्वस्थ परिणाम मानने से पहले उन पथों को कवर करने के लिए फ़िक्स्चर को विस्तारित करें, और उसके बाद ही खाली परिणामों को सामान्य मानें।

एक लोड-मोर बटन को अलग क्रिया की ज़रूरत होती है लेकिन यह वही प्रगति मॉडल इस्तेमाल करता है। कलेक्शन के अंदर बटन को चुनें, एक बार क्लिक करें, फिर नए बैच या अंतिम स्थिति का इंतज़ार करें। पूर्णता की शर्त के रूप में वैश्विक निष्क्रियता से बचें। ग्रिड के बाहर लंबे समय तक चलने वाले अनुरोध सक्रिय रह सकते हैं, जबकि दृश्य कलेक्शन पहले से ही तैयार हो सकता है।

फ़िल्टरों के बीच पूर्णता को ट्रैक करें और बदलाव सहेजें

किसी क्रॉल का अपनी संग्रह कॉन्फ़िगरेशन और अपने देखे गए विंडो के लिए पूरा होना होता है। अनुरोधित श्रेणी, मार्केट, सॉर्ट, फ़िल्टर पैरामीटर, अंतिम URL, खोजी गई संख्या, पूर्णता का कारण और कलेक्टर संस्करण को स्टोर करें। यदि कोई विज्ञापित परिणाम गणना मौजूद है, तो उसे एक अलग तुलना के रूप में रिकॉर्ड करें। जॉब चलने के दौरान स्टोरफ़्रंट बदल सकता है, इसलिए असमानता कैटलॉग परिवर्तन या डुप्लिकेट डिस्प्ले के साथ-साथ कलेक्टर दोष को भी दर्शा सकती है।

डिस्कवरी को ऑफ़र एक्सट्रैक्शन से स्वतंत्र रखें। एक संग्रह कार्ड किसी उत्पाद परिवार का प्रतिनिधित्व कर सकता है और एक शुरुआती कीमत दिखा सकता है। स्थिर डिस्कवरी IDs और लिंक को एक अलग डिटेल-पेज वर्कर में पास करें जो विक्रेता, वेरिएंट, कीमत और स्टॉक को रिज़ॉल्व करे। अनंत-स्क्रोल स्क्रैपिंग वॉकथ्रू अधिक पेजिनेशन पैटर्न को कवर करता है, और क्षेत्रीय तुलना के लिए मूल्य निगरानी समाधान प्रासंगिक है जब खोजे गए उत्पाद सेट मार्केट पर निर्भर करते हैं।

ऐसी छोटी संग्रह के साथ पेजिनेशन का परीक्षण करें जिसकी अपेक्षित पहचानें ज्ञात हों। ऐसा फ़िक्स्चर जोड़ें जहाँ बैचों के बीच माउंट किए गए नोड्स की संख्या स्थिर बनी रहे। फिर एक गायब एंड मार्कर और रुके हुए बैच का अभ्यास करें। वापस आए स्टेटस और आइटम IDs की तुलना फ़िक्स्चर डेटा से करें। यदि वही एडेप्टर किसी श्रेणी और उसके खोज परिणामों को कवर करता है तो फ़िल्टर-विशिष्ट परीक्षण जोड़ें।

जहाँ ज़रूरत हो, ब्राउज़र निष्पादन को क्लाउड में ले जाएँ

एक Playwright कलेक्टर एक लोकल ब्राउज़र पर या Scrapeless Agent Browserमें चल सकता है। Agent Browser Playwright quickstart रिमोट सत्रों के लिए समर्थित कनेक्शन सेटअप दिखाता है। डायनेमिक वेबसाइटों के लिए Agent Browser समाधान का उपयोग तब क्षमता की योजना बनाने के लिए करें जब प्रत्येक संग्रह को रेंडर किए गए कंट्रोल और इनपुट इवेंट्स के अनुक्रम की ज़रूरत हो। क्रॉल स्टेट और उसकी आखिरी स्वीकार की गई बैच को अपने एप्लिकेशन में रखें।

उपयोग करें Residential Proxies जहाँ अधिकृत अवलोकन के लिए भूगोल की ज़रूरत हो, और उस मार्केट को सत्यापित करें जिसे स्टोरफ़्रंट वास्तव में रेंडर करता है। एक पिन की हुई रीजन संग्रह की सॉर्ट या फ़िल्टर को निर्दिष्ट नहीं करती। उन सेटिंग्स को स्वतंत्र रूप से स्टोर करें और जब कुकीज़ कैटलॉग को प्रभावित कर सकती हों तो प्रत्येक मार्केट रन को अलग रखें। पूरे और आंशिक जॉब्स को उसी सैंपल में मापने के बाद क्लाउड ब्राउज़र समय और प्रॉक्सी ट्रैफ़िक का अनुमान Scrapeless pricing के विरुद्ध लगाएँ।

जो क्रॉल ने वास्तव में देखा उसे रिपोर्ट करें

स्पष्ट प्रोग्रेस मार्कर का उपयोग करें और एक स्थिर आइटम मैप बनाए रखें। पूर्णता का कारण खोजे गए URLs के साथ रखें ताकि डाउनस्ट्रीम जॉब एक पूर्ण संग्रह और आंशिक परिणाम के बीच अंतर कर सके। एक ज्ञात श्रेणी से शुरू करें और केवल तब स्रोत जोड़ें जब फ़िक्स्चर वर्चुअलाइज़ेशन, एक खाली संग्रह और रुकी हुई लोडर को कवर करे।