हेडलैस कॉमर्स स्टोर्स पर डायनेमिक प्रोडक्ट पेजेज़ को कैसे स्क्रैप करें

Scrapeless Agent Browser प्रबंधित ब्राउज़र सत्रों में JavaScript स्टोरफ्रंट्स को रेंडर करता है, और Scrapeless Residential Proxies अधिकृत क्षेत्रीय कैप्चर के लिए स्थान-लक्षित एक्सेस का समर्थन करते हैं।

यह पहचानें कि कौन-सी सतह प्रस्ताव की मालिक है

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

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

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

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

Playwright पैकेज और Chromium के साथ एक Node.js प्रोजेक्ट का उपयोग करें। Playwright Chromium रनटाइम इंस्टॉल करें या किसी मौजूदा संगत ब्राउज़र को कॉन्फ़िगर करें। किसी स्वीकृत स्टोरफ्रंट या एक अलग टेस्ट फ़िक्सचर का चयन करें। एक ऐसे वैरिएंट को शामिल करें जो राशि बदलता हो, एक उपलब्ध न होने वाला विकल्प और एक ऐसा बाज़ार जो अलग मुद्रा का उपयोग करता हो। रिमोट रन के लिए Scrapeless अकाउंट और प्रलेखित Agent Browser कनेक्शन सेटिंग्स आवश्यक हैं।

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

चरण 1. उत्पाद और चयनित बाज़ार की खोज करें

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

The URL मानक बताता है कि जब ब्राउज़र किसी URL को रिसॉल्व और सीरियलाइज़ करता है तो वह किन घटकों का उपयोग करता है। उन घटकों को स्टोर के व्यवहार के अनुसार संभालें। ट्रैकिंग पैरामीटर पहचान के लिए अप्रासंगिक हो सकते हैं, जबकि किसी वास्तविक वैरिएंट चयन के लिए क्वेरी पैरामीटर साक्ष्य के लिए महत्वपूर्ण होता है। रूट को सामान्य करने से पहले पेज को उसके साथ और उसके बिना टेस्ट करें।

चरण 2. एक वैरिएंट प्रतिक्रिया का सहसंबंध करें और UI को सत्यापित करें

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

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

async function readMarketVariant(page, targetUrl, variant, market) {
  await page.goto(targetUrl, { waitUntil: 'domcontentloaded' });
  await page.getByTestId('product-ready').waitFor({ state: 'visible' });

  // Register the response listener before selecting the variant.
  const data = page.waitForResponse(response => {
    const url = new URL(response.url());
    return url.origin === new URL(targetUrl).origin &&
      url.pathname === '/fixture/offer' &&
      url.searchParams.get('variant') === variant &&
      url.searchParams.get('market') === market &&
      response.request().method() === 'GET' && response.ok();
  }, { timeout: 5000 });
  await Promise.all([
    data,
    page.getByRole('button', { name: variant, exact: true }).click()
  ]);

  const offer = await (await data).json();
  const panel = page.getByTestId('rendered-offer');
  await panel.getByText(offer.display, { exact: true }).waitFor();
  const visible = await panel.evaluate(node => ({
    variant: node.dataset.variant,
    market: node.dataset.market,
    currency: node.dataset.currency,
    display: node.querySelector('[data-testid="amount"]').textContent.trim()
  }));
  if (offer.variant !== variant || offer.market !== market ||
      visible.variant !== variant || visible.market !== market ||
      visible.currency !== offer.currency || visible.display !== offer.display) {
    throw new Error('Offer response and rendered state disagree');
  }
  return { url: page.url(), ...visible, observedAt: new Date().toISOString() };
}

फिक्स्चर Olive का चयन करता है, बाज़ार GB के लिए GBP ऑफ़र प्राप्त करता है और प्रदर्शित £74.00 को सत्यापित करता है। यह तब विफल हो जाता है जब रेंडर किया गया मार्केट या वैरिएंट प्रतिक्रिया से भिन्न होता है। वास्तविक स्टोरफ़्रंट बिना नया अनुरोध भेजे भी हाइड्रेट कर सकते हैं, उदाहरण के लिए जब आवश्यक डेटा पहले से ही उपलब्ध कराया गया हो या प्रीफ़ेच किया गया हो। उस स्थिति में, ऐसा सत्यापित रेंडर्ड-स्टेट चेक चुनें जो चयनित ऑफ़र की पहचान करे, बिना ऐसे इवेंट की अपेक्षा किए जो कभी घटित ही नहीं होता।

चरण 3. उत्पाद मूल्य, स्टॉक और सशर्त ऑफ़र की व्याख्या करें

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

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

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

चरण 4. ब्राउज़र और प्रॉक्सी की ज़िम्मेदारियाँ निर्धारित करें

उपयोग करें Scrapeless Agent Browser जब Playwright को स्टोरफ़्रंट निष्पादित करना हो और उसके कंट्रोल्स के साथ इंटरेक्ट करना हो। Agent Browser solution for dynamic websites ब्राउज़र‑आधारित वर्कफ़्लो को कवर करता है। Residential Proxies का उपयोग तब करें जब किसी अधिकृत ऑब्ज़र्वेशन के लिए चुने हुए नेटवर्क लोकेशन की आवश्यकता हो। proxy price monitoring solution प्रासंगिक है जब एक ही कैटलॉग को बाज़ारों के बीच बार‑बार तुलना करनी हो। ब्राउज़र पेज निष्पादित करता है और प्रॉक्सी नेटवर्क रूट प्रदान करता है। मार्केट स्वीकार्यता कलेक्शन लॉजिक की ज़िम्मेदारी होती है।

The Playwright guide for Shopify variant data निकालने से पहले सही स्रोत चुनने का एक और उदाहरण देता है। लाइव वर्कलोड का अनुमान Scrapeless pricing का उपयोग करके लगाएँ, जब आप माप लें कि ब्राउज़र सत्र कितनी देर खुले रहते हैं और प्रत्येक रीजन कितना नेटवर्क ट्रांसफ़र उपयोग करता है। समान बर्ताव वाले पेजों को एक साथ समूहित करें ताकि कोई जटिल इंटरैक्टिव टेम्पलेट सरल प्रोडक्ट पेजों के अनुमान को न बिगाड़े।

आपको बदले में क्या मिलता है

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

स्केल करने से पहले स्टोरफ़्रंट स्टेट सत्यापित करें

एक ज्ञात प्रोडक्ट चुनें और शुरुआती HTML, स्वीकृत संरचित डेटा और रेंडर की गई ऑफ़र की तुलना करें। सटीक चयन को स्वचालित करें और कार्रवाई के बाद क्या बदलता है, इसे रिकॉर्ड करें। स्कोप का विस्तार तब करें जब आपका कलेक्टर अनुरोधित ऑफ़र को किसी डिफ़ॉल्ट, प्रीफ़ेच्ड या रीजन‑मिसमैच्ड स्टेट से अलग पहचान सके।