Playwright के साथ एक Shopify स्क्रैपर कैसे बनाएं

संक्षेप (TL;DR):

• Shopify स्क्रेपर को फ़ील्ड निकालने से पहले प्रोडक्ट URL खोजने चाहिए। समान-ओरिजिन प्रोडक्ट लिंक्स थीम की स्टाइलिंग क्लासेज़ से ज़्यादा टिकाऊ होते हैं।
• पब्लिक स्ट्रक्चर्ड प्रोडक्ट डेटा हर स्वैच पर क्लिक किए बिना वेरिएंट्स प्रकट कर सकता है। उस पर निर्भर होने से पहले टार्गेट स्टोर पर रिस्पॉन्स जाँचें।
• Playwright ब्राउज़र कॉन्टेक्स्ट को स्टोरफ्रंट डेटा पढ़ते समय संरक्षित रख सकता है। प्रोडक्ट और करेंसी रिक्वेस्ट्स को उसी कॉन्टेक्स्ट के अंदर रखें।
• लोकल उदाहरण वेरिएंट आइडेंटिफ़ायर्स और रॉ प्राइस वैल्यूज़ लौटाता है। करेंसी कन्वर्ज़न और क्रॉस-स्टोर मैचिंग अलग काम रहते हैं।
• फ्री से शुरू करें। नए Scrapeless अकाउंट्स में मुफ़्त Scraping Browser रनटाइम शामिल है — app.scrapeless.com पर साइन अप करें।

परिचय: प्रोडक्ट कार्ड हर वेरिएंट का वर्णन नहीं करते

स्टोरफ्रंट प्रोडक्ट कार्ड अक्सर कई खरीदे जा सकने वाले वेरिएंट्स को समरी में दिखाता है। कार्ड पर दिखाई देने वाली कीमत डिस्कवरी के लिए उपयोगी है, लेकिन वह हर साइज़ या रंग की कीमत और उपलब्धता स्थापित नहीं कर सकती।

यह Shopify प्रोडक्ट डेटा एक्सट्रैक्शन ट्यूटोरियल Playwright का उपयोग करके एक पब्लिक स्टोरफ्रंट खोलता है, प्रोडक्ट लिंक खोजता है, और पेज के ब्राउज़र कॉन्टेक्स्ट में स्ट्रक्चर्ड वेरिएंट डेटा पढ़ता है। उदाहरण को जानबूझकर एक ही प्रोडक्ट तक सीमित रखा गया है। आप बड़ा कैटलॉग जॉब बनाने से पहले लौटाए गए फ़ील्ड्स की जाँच कर सकते हैं।

Playwright ब्राउज़र को नियंत्रित करता है; आपका एक्सट्रैक्शन कॉन्ट्रैक्ट तय करता है कि वैध रिकॉर्ड का अर्थ क्या है। प्राइस-ड्रॉप अलर्ट वर्कफ़्लो समझाता है कि रिकॉर्ड की गई ऑब्ज़र्वेशंस डाउनस्ट्रीम इवेंट्स कैसे बन सकती हैं।

सेलेक्टर से पहले एक्सट्रैक्शन सोर्स चुनें

सबसे उपयोगी सोर्स वह सबसे स्थिर पब्लिक सरफेस है जिसमें ज़रूरी फ़ील्ड्स मौजूद हों।

उदाहरण एक देखे गए /products/<handle> लिंक का उपयोग करता है, फिर प्रोडक्ट की पब्लिक .js रिस्पॉन्स पढ़ता है। Shopify का Ajax product interface इस रूट और लोकेल-अवेयर रिक्वेस्ट्स को डॉक्युमेंट करता है। इसकी वेरिएंट एरे की एक प्रलेखित सीमा है; केवल इसलिए बड़े वेरिएंट कैटलॉग की पूरी कवरेज का दावा न करें कि रिक्वेस्ट सफल हो गई।

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

पूर्वापेक्षाएँ और इंस्टॉलेशन

लोकल उदाहरण को Node.js, pnpm, और Playwright का Chromium रनटाइम चाहिए।

इंस्टॉल किए गए Playwright पैकेज द्वारा सपोर्टेड Node.js रिलीज़ का उपयोग करें। सत्यापित एनवायरनमेंट में Node.js 24 इस्तेमाल किया गया था। क्लाउड एक्सटेंशन को अतिरिक्त रूप से एक सक्रिय Scrapeless अकाउंट और SCRAPELESS_API_KEY में सर्विस API कुंजी की ज़रूरत है; यह क्रेडेंशियल पूर्वापेक्षा है, और लोकल कलेक्टर के लिए आवश्यक नहीं है।

इन कमांड्स को किसी नए वर्किंग डायरेक्टरी में चलाएँ:

pnpm add playwright @scrapeless-ai/sdk
pnpm exec playwright install chromium

Playwright की browser library installation पैकेज को ब्राउज़र डाउनलोड से अलग रखती है। JavaScript उदाहरणों को .mjs फ़ाइलों के रूप में सेव करें ताकि Node.js उन्हें ES मॉड्यूल की तरह ट्रीट करे। क्लाउड एक्सटेंशन Scrapeless Node.js SDK का उपयोग करता है।

लोकल Discover-and-Extract कलेक्टर बनाएँ

कलेक्टर एक जाँचा हुआ प्रोडक्ट ऐंकर ढूँढता है और स्ट्रक्चर्ड रिस्पॉन्स से हर वेरिएंट लौटाता है।

इसे shopify.mjs के रूप में सेव करें और node shopify.mjs चलाएँ। चुना गया प्रोडक्ट एक पब्लिक उदाहरण है, इसलिए इसे दोबारा उपयोग करने से पहले URL और स्टोर पॉलिसी को फिर जाँचें। स्क्रिप्ट किसी दूसरी आइटम पर चुपचाप स्विच करने के बजाय अनुपस्थित डिस्कवरी ऐंकर की रिपोर्ट करती है।

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
try {
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.taylorstitch.com/', {
    waitUntil: 'domcontentloaded', timeout: 45000
  });

  const result = await page.evaluate(async () => {
    const link = Array.from(document.querySelectorAll('a[href]'))
      .map(a => new URL(a.href))
      .find(u => u.origin === location.origin &&
        /^\/products\/jack-in-valley-plaid-waffle-2610\/?$/.test(u.pathname));
    if (!link) throw new Error('Expected product anchor is absent');

    const root = window.Shopify.routes.root;
    const productResponse = await fetch(link.pathname.replace(/\/$/, '') + '.js');
    const cartResponse = await fetch(root + 'cart.js');
    if (!productResponse.ok || !cartResponse.ok) {
      throw new Error('Product or currency response unavailable');
    }
    const product = await productResponse.json();
    const cart = await cartResponse.json();
    if (!product.id || !Array.isArray(product.variants) || !cart.currency) {
      throw new Error('Incomplete public product response');
    }
    return {
      product_id: String(product.id), title: product.title,
      source_url: link.href, currency: cart.currency,
      observed_at: new Date().toISOString(),
      variants: product.variants.map(v => ({
        variant_id: String(v.id), options: v.options,
        price_raw: v.price, compare_at_price_raw: v.compare_at_price ?? null,
        available: v.available, sku: v.sku ?? null
      }))
    };
  });
  console.log(JSON.stringify(result, null, 2));
} finally {
  await browser.close();
}

domcontentloaded नेविगेशन बाउंडरी है, न कि यह वादा कि हर विजेट पूरा हो चुका है। जाँचा हुआ होमपेज उस बाउंडरी पर प्रोडक्ट ऐंकर को एक्सपोज़ करता है। किसी दूसरे थीम के लिए, एक्सट्रैक्ट करने से पहले उस वास्तविक लिंक या प्रोडक्ट कंट्रोल का इंतज़ार करें जिसकी आपको ज़रूरत है।

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

लौटाए गए वेरिएंट कॉन्ट्रैक्ट को सुरक्षित रखें

परिणाम एक उत्पाद एनवलप है जिसमें वेरिएंट ऐरे है, न कि पहले से तैयार प्रतिस्पर्धी मूल्य इतिहास।

जाँचे गए उत्पाद में छह वेरिएंट थे और संदर्भ ने USD रिपोर्ट किया। ये अवलोकन यह स्थापित करते हैं कि यह पथ चुने गए स्रोत से वास्तविक उत्पाद डेटा निकालता है; वे यह स्थापित नहीं करते कि हर Shopify स्टोरफ्रंट एक ही थीम या एक्सेस कॉन्फ़िगरेशन उपयोग करता है।

product vocabulary किसी ऑफ़र के बदलते व्यावसायिक फ़ील्ड से पहचान और वर्णनात्मक गुणों को अलग करने में उपयोगी है। जब वेरिएंट को वेयरहाउस पंक्तियों में फ्लैट करें, तो उस सीमा को बनाए रखें।

Start Scraping with Scrapeless

Scrapeless के साथ अपना वेब स्क्रैपिंग और ऑटोमेशन वर्कफ़्लो पावर अप करें!
आज ही साइन अप करें और $5 का फ्री क्रेडिट पाएं — कोई क्रेडिट कार्ड आवश्यक नहीं।

अपना फ्री क्रेडिट अभी Scrapeless Dashboard में क्लेम करें।

कैटलॉग सीमा खोए बिना डिस्कवरी का विस्तार करें

कैटलॉग डिस्कवरी के लिए एक स्पष्ट स्टॉपिंग नियम और विज़िट की गई URLs का स्थायी सेट होना चाहिए।

कलेक्शन-आधारित स्क्रैपर के लिए, वास्तविक नेक्स्ट-पेज लिंक या स्टोरफ्रंट की प्रलेखित पेजिनेशन प्रणाली का निरीक्षण करें। कलेक्शन डिस्कवरी को उत्पाद एक्सट्रैक्शन से अलग रखें। कैनोनिकल उत्पाद पथों को डीडुप्लिकेट करें ताकि कई कलेक्शनों में दिखाई देने वाला एक आइटम कई उत्पाद न बन जाए।

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

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

Playwright के लिए क्लाउड एक्सटेंशन

Scrapeless Agent Browser एक Playwright सत्र को रिमोटली चला सकता है जबकि आपका कलेक्टर अपना स्वयं का वैलिडेशन लॉजिक बनाए रखता है।

जब लोकल ब्राउज़र होस्टिंग परिचालन बोझ बन जाए, तो प्रलेखित Playwright connection का उपयोग करें। SDK ब्राउज़र सत्र बनाता है; Playwright उसके रिटर्न किए गए एंडपॉइंट से अटैच होता है।

नोट: निम्नलिखित क्लाउड कनेक्शन के लिए SCRAPELESS_API_KEY में एक सक्रिय Scrapeless सर्विस API कुंजी आवश्यक है। लोकल कलेक्शन उदाहरण स्वतंत्र रूप से चलता है। इस क्रेडेंशियल-निर्भर चरण को क्लाउड पथ डिप्लॉय करने से पहले आपके खाते में निष्पादित किया जाना चाहिए।

import { Scrapeless } from '@scrapeless-ai/sdk';
import { chromium } from 'playwright';

const client = new Scrapeless();
const { browserWSEndpoint } = await client.browser.create({
  sessionName: 'shopify-public-product',
  sessionTTL: 180,
  proxyCountry: 'US'
});
const browser = await chromium.connectOverCDP(browserWSEndpoint);
try {
  const page = await browser.newPage();
  await page.goto('https://www.taylorstitch.com/', {
    waitUntil: 'domcontentloaded'
  });
  console.log(await page.title());
} finally {
  await browser.close();
}

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

स्रोत सीमा पर मिसिंग डेटा का ट्रबलशूट करें

मिसिंग डेटा को संग्रहीत उत्पाद रिकॉर्ड बनने से पहले डायग्नोज़ किया जाना चाहिए।

काम निर्धारित करने से पहले स्टोर के एक्सेस नियमों की समीक्षा करें। क्रॉलर बहिष्करण मानक रोबोट की प्राथमिकताओं का वर्णन करता है, जबकि नियम और अनुमतियाँ व्यापक एक्सेस सीमा को नियंत्रित करते हैं।

निष्कर्ष: डिस्कवरी, संदर्भ, और आउटपुट को साथ रखें

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

अपनी Shopify कलेक्शन वर्कफ़्लो बनाने के लिए तैयार हैं?

हमारे समुदाय से जुड़ें, एक मुफ़्त प्लान प्राप्त करें, और ब्राउज़र-आधारित ईकॉमर्स कलेक्शन पर काम कर रहे डेवलपर्स से कनेक्ट हों: Discord · Telegram.

app.scrapeless.com पर साइन अप करें और अपनी स्वीकृत प्रोडक्ट स्रोतों पर जाँचे हुए एक्सट्रैक्शन कॉन्ट्रैक्ट को लागू करें।

सामान्य प्रश्न (FAQ)

प्रश्न: क्या सार्वजनिक Shopify प्रोडक्ट डेटा को स्क्रैप करना कानूनी है?

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

प्रश्न: Shopify स्क्रेपर बनाने के लिए क्या आपको प्रॉक्सी की ज़रूरत है?

जाँचा गया लोकल उदाहरण बिना प्रॉक्सी के सुलभ सार्वजनिक स्रोत पढ़ता है। क्लाउड एक्सटेंशन proxyCountry को US पर सेट करता है ताकि रूटिंग सुसंगत रहे; मुद्रा और मार्केट चयन के लिए अभी भी अलग मान्यता की आवश्यकता होती है।

प्रश्न: स्क्रेपर को WAF या Access Denied पेज को कैसे संभालना चाहिए?

परिणाम को प्रोडक्ट डेटा नहीं, बल्कि अपुष्ट कलेक्शन के रूप में ट्रीट करें। अधिकृत क्लाउड वर्कफ़्लो के लिए, उसी सत्र में पहले होमपेज खोलें, फिर किसी वास्तविक प्रोडक्ट मार्कर का इंतज़ार करें। जब स्टोरफ़्रंट अनुरोधित एक्सेस की अनुमति न दे, तब रुक जाएँ।

प्रश्न: जब Shopify थीम अपने DOM क्लासेज़ को बदलती है तो क्या बदलता है?

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

प्रश्न: क्या यह बिना AI एजेंट के चल सकता है?

हाँ। लोकल स्क्रिप्ट सीधे Node.js के साथ चलती है। कोई एजेंट किसी दूसरे स्टोरफ़्रंट का निरीक्षण करने में मदद कर सकता है, लेकिन कलेक्टर को चलाने के लिए आवश्यक नहीं है।

प्रश्न: कन्करेंसी और प्रोडक्ट URLs को कैसे संभाला जाना चाहिए?

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