Playwright और Scrapeless के साथ localStorage को कैसे स्क्रैप करें

एक ब्राउज़र DOM के बाहर उपयोगी पृष्ठ स्थिति को पकड़ सकता है। यह गाइड Playwright का उपयोग करके एक सार्वजनिक MDN डेमो पर localStorage का निरीक्षण करती है, UI के माध्यम से तीन वास्तविक प्राथमिकताओं को बदलती है, परिणामस्वरूप भंडारण घटनाओं को एक दूसरे टैब में कैप्चर करती है, और साबित करती है कि मान एक पुनः लोड से बचे रहते हैं इससे पहले कि उसी तर्क को Scrapeless Scraping Browser पर ले जाया जाए।

स्क्रैपिंग वर्कफ़्लो में वेब स्टोरेज क्या जोड़ता है

वेब स्टोरेज एपीआई एक प्रतिष्ठान को दो स्ट्रिंग-कुंजी वाले स्टोर प्रदान करता है:

• localStorage समान-स्रोत दस्तावेज़ों द्वारा साझा किया जाता है और सामान्य पृष्ठ पुनः लोड और ब्राउज़र पुनः आरंभ के दौरान बचे रहता है जब प्रोफ़ाइल स्थायी होती है।
• sessionStorage एक शीर्ष-स्तरीय ब्राउज़िंग संदर्भ तक सीमित होता है और उस पृष्ठ सत्र के लिए बना रहता है।

दोनों स्टोर कुकी जार नहीं हैं। वेब स्टोरेज के मान स्वचालित रूप से HTTP अनुरोधों से नहीं जुड़े होते हैं, और प्रत्येक कुंजी/मान एक स्ट्रिंग है। MDN का वेब स्टोरेज API गाइड उन दायरे और स्थिरता सीमाओं को परिभाषित करता है।

स्क्रैपिंग के लिए, भंडारण UI प्राथमिकताओं, कैश किए गए पहचानकर्ताओं, फीचर स्थिति, या सार्वजनिक डेटा को समाहित कर सकता है जिसे अनुप्रयोग पहले से लोड कर चुका है। इसे ब्राउज़र स्थिति के रूप में मानें जिसे मान्य किया जाना है, न कि प्रमाणीकरण टोकन या निजी उपयोगकर्ता डेटा एकत्र करने का कारण।

Scrapeless के साथ Playwright का उपयोग क्यों करें

Playwright पृष्ठ प्रतिष्ठान में जावास्क्रिप्ट का आकलन कर सकता है, उसी BrowserContext में दो पृष्ठ खोल सकता है, और ब्राउज़र की अपनी भंडारण घटना का अवलोकन कर सकता है। Scrapeless Scraping Browser एक होस्टेड क्रोमियम सत्र प्रदान करता है जबकि उन Playwright APIs को बनाए रखता है।

ब्राउज़र कनेक्शन connect_over_cdp का उपयोग करता है। एक बार जब एक page मौजूद हो जाता है, तो भंडारण निरीक्षण उसी तरह होता है चाहे क्रोमियम स्थानीय हो या होस्ट किया गया हो।

पूर्वापेक्षाएँ

• Python 3.10 या बाद का संस्करण।
• playwright 1.59.0 या वर्तमान संगत संस्करण।
• पूरा चलने योग्य उदाहरण के लिए स्थानीय Chrome/Chromium।
• क्लाउड कनेक्शन के लिए फंडेड Scrapeless खाता और SCRAPELESS_API_KEY। सत्यापन खाते पर नए ब्राउज़र सत्र ने कोड 14500 वापस किया, इसलिए कनेक्शन ब्लॉक एक स्पष्ट पूर्वापेक्षा अंतराल है।

इंस्टॉल करें

python -m pip install "playwright==1.59.0"

Scrapeless Scraping Browser से कनेक्ट करें

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

import os
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

params = urlencode({
    "token": os.environ["SCRAPELESS_API_KEY"],
    "sessionTTL": 120,
    "proxyCountry": "US",
})
cdp_url = f"wss://browser.scrapeless.com/api/v2/browser?{params}"

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(cdp_url)
    context = browser.contexts[0]
    page = context.pages[0]
    # भंडारण चरणों को नीचे की संदर्भ और पृष्ठ के साथ चलाएँ।
    browser.close()

वर्तमान कनेक्शन पैरामीटर के लिए Scrapeless डेवलपर डॉक्स का उपयोग करें।

प्रत्येक localStorage कुंजी का निरीक्षण करें

MDN का सार्वजनिक डेमो एक पृष्ठभूमि रंग, फ़ॉन्ट और छवि विकल्प को संग्रहीत करता है:

TARGET_URL = "https://mdn.github.io/dom-examples/web-storage/"

page.goto(TARGET_URL, wait_until="domcontentloaded")
stored = page.evaluate(
    "Object.fromEntries(Object.entries(localStorage))"
)
print("प्रारंभिक भंडारण:", stored)
print("सत्र भंडारण:", page.evaluate("sessionStorage.length"))

प्रारंभिक भंडारण: {'font': 'sans-serif', 'image': 'images/firefoxos.png', 'bgcolor': 'FF0000'}
सत्र भंडारण: 0

सभी प्रविष्टियों को पढ़ना निकालने वाले को एक कुंजी से जोड़ने से बचाता है। उत्पादन में प्रतिष्ठान को बनाए रखें क्योंकि उसी कुंजी का नाम किसी अन्य साइट पर कुछ अलग अर्थ रख सकता है।

दूसरे टैब में परिवर्तनों को कैप्चर करें

storage घटना अन्य समान-स्रोत दस्तावेज़ों में उत्पन्न होती है जो बदलते स्टोर को साझा करते हैं। यह उस टैब में नहीं फायर होती है जिसने बदलाव किया।

observer_page = context.new_page()
observer_page.goto(TARGET_URL, wait_until="domcontentloaded")
observer_page.evaluate("""
    window.capturedStorageEvents = [];
    addEventListener('storage', event => {
        capturedStorageEvents.push({
            key: event.key,
            oldValue: event.oldValue,
            newValue: event.newValue,
        });
    });
""")

दोनों पृष्ठों को एक ब्राउज़र संदर्भ और प्रतिष्ठान साझा करना चाहिए। एक दूसरा संदर्भ पृथक भंडारण रखता है और इन घटनाओं को प्राप्त नहीं करेगा।

वास्तविक UI कंट्रोल परिवर्तित करें

डेमो के नियंत्रणों को सीधे कुंजियों को लिखने के बजाय बदलें:

page.evaluate("""
    bgcolor.value = '00FF00';
    bgcolor.dispatchEvent(new Event('change', {bubbles: true}));
""")
page.select_option("#font", "serif")
page.select_option("#image", "images/crocodile.png")
page.wait_for_timeout(500)

print("अपडेट किया गया स्टोरेज:", page.evaluate(
    "Object.fromEntries(Object.entries(localStorage))"
))
print("इवेंट्स:", observer_page.evaluate("capturedStorageEvents"))

अपडेट किया गया स्टोरेज: {'font': 'serif', 'image': 'images/crocodile.png', 'bgcolor': '00FF00'}
इवेंट्स: [{'key': 'bgcolor', 'oldValue': 'FF0000', 'newValue': '00FF00'}, {'key': 'font', 'oldValue': 'sans-serif', 'newValue': 'serif'}, {'key': 'image', 'oldValue': 'images/firefoxos.png', 'newValue': 'images/crocodile.png'}]

यह आउटपुट एक ही समय में तीन चीजें साबित करता है: UI ने स्टोरेज लिखा, दूसरे टैब ने ठीक तीन बदलाव प्राप्त किए, और प्रत्येक इवेंट ने अपने पिछले मूल्य को संरक्षित रखा।

क्या आप एक होस्टेड सत्र में स्थिति का निरीक्षण करने के लिए तैयार हैं? एक मुफ्त Scrapeless खाता बनाएं और केवल ब्राउज़र निर्माण को बदलें।

साबित करें कि मान रीलोड को सहन करते हैं

page.reload(wait_until="domcontentloaded")
reloaded = page.evaluate(
    "Object.fromEntries(Object.entries(localStorage))"
)
controls = {
    "bgcolor": page.locator("#bgcolor").input_value(),
    "font": page.locator("#font").input_value(),
    "image": page.locator("#image").input_value(),
}

print("रीलोड किया गया स्टोरेज:", reloaded)
print("नियंत्रण मान:", controls)

रीलोड किया गया स्टोरेज: {'font': 'serif', 'image': 'images/crocodile.png', 'bgcolor': '00FF00'}
नियंत्रण मान: {'bgcolor': '00FF00', 'font': 'serif', 'image': 'images/crocodile.png'}

दृश्य नियंत्रणों को संग्रहीत स्थिति के साथ मेल करना केवल स्टोरेज की जांच करने से अधिक मजबूत है। यह साबित करता है कि एप्लिकेशन ने नेविगेशन के बाद सहेजे गए मानों का उपभोग किया।

पूरा चलाने योग्य स्क्रिप्ट

from playwright.sync_api import sync_playwright

TARGET_URL = "https://mdn.github.io/dom-examples/web-storage/"

with sync_playwright() as p:
    browser = p.chromium.launch(
        executable_path="/usr/bin/google-chrome",
        headless=True,
    )
    context = browser.new_context()
    page = context.new_page()
    observer_page = context.new_page()

    observer_page.goto(TARGET_URL, wait_until="domcontentloaded")
    observer_page.evaluate("""
        window.capturedStorageEvents = [];
        addEventListener('storage', event => {
            capturedStorageEvents.push({
                key: event.key,
                oldValue: event.oldValue,
                newValue: event.newValue,
            });
        });
    """)
    page.goto(TARGET_URL, wait_until="domcontentloaded")

    initial = page.evaluate(
        "Object.fromEntries(Object.entries(localStorage))"
    )
    page.evaluate("""
        bgcolor.value = '00FF00';
        bgcolor.dispatchEvent(new Event('change', {bubbles: true}));
    """)
    page.select_option("#font", "serif")
    page.select_option("#image", "images/crocodile.png")
    page.wait_for_timeout(500)

    updated = page.evaluate(
        "Object.fromEntries(Object.entries(localStorage))"
    )
    events = observer_page.evaluate("capturedStorageEvents")
    page.reload(wait_until="domcontentloaded")
    reloaded = page.evaluate(
        "Object.fromEntries(Object.entries(localStorage))"
    )
    controls = {
        "bgcolor": page.locator("#bgcolor").input_value(),
        "font": page.locator("#font").input_value(),
        "image": page.locator("#image").input_value(),
    }

    assert len(events) == 3
    assert updated == reloaded == controls
    assert page.evaluate("sessionStorage.length") == 0

    print("शीर्षक:", page.title())
    print("प्रारंभिक स्टोरेज:", initial)
    print("अपडेट किया गया स्टोरेज:", updated)
    print("इवेंट कुंजी:", [event["key"] for event in events])
    print("इवेंट की गिनती:", len(events))
    print("रीलोड किया गया स्टोरेज:", reloaded)
    print("नियंत्रण मान:", controls)
    print("सत्र स्टोरेज प्रविष्टियाँ:", page.evaluate("sessionStorage.length"))
    browser.close()

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

localStorage, sessionStorage, और कुकीज़

localStorage

समान-मूल दस्तावेजों द्वारा साझा किया जाता है, केवल स्ट्रिंग, और मिटाए जाने तक स्थायी होता है। इसका उपयोग तब करें जब एप्लिकेशन जानबूझकर विज़िट के बीच स्थिति को बनाए रखता है।

sessionStorage

प्रत्येक उच्च स्तर के पृष्ठ सत्र के लिए अलग। एक टैब को डुप्लिकेट करना या खोलना भले ही वही मूल हो, एक अलग जीवन चक्र पैदा कर सकता है। इसे उसी पृष्ठ से निरीक्षण करें जिसकी स्थिति मायने रखती है।

कुकीज़

कुकी नियमों के अनुसार मेल खाते HTTP अनुरोधों के साथ भेजी जाती हैं। उन्हें Web Storage के साथ भ्रमित करने के बजाय Playwright के संदर्भ कुकी एपीआई का उपयोग करें।

सुरक्षित निकासी सीमाएँ

स्टोरेज में क्रेडेंशियल, उपयोगकर्ता पहचानकर्ता या निजी स्थिति हो सकती है। उदाहरणों को सार्वजनिक डेमो पृष्ठों तक सीमित करें, केवल उन फ़ील्ड को इकट्ठा करें जो निर्दिष्ट कार्य के लिए आवश्यक हैं, और कभी भी टोकन या सत्र संबंधी सामग्री को प्रकाशित न करें। किसी ब्राउज़र के माध्यम से उत्पत्ति तक पहुँचने से आपके द्वारा पढ़े जा सकने वाले प्रत्येक मान का पुनः उपयोग करने की अनुमति नहीं मिलती है।

निष्कर्ष

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

स्क्रेपलेस के साथ शुरू करें, स्क्रेपलेस मूल्य निर्धारण की समीक्षा करें, और जानें कि CDP क्या उजागर करता है फैली हुई सत्रों को क्लब में ले जाने से पहले।

प्रश्नोत्तर

प्रश्न: क्या प्लेरेकाइट localStorage पढ़ सकता है?

हाँ। लक्षित उत्पत्ति के पृष्ठ के भीतर Object.fromEntries(Object.entries(localStorage)) का मूल्यांकन करें।

प्रश्न: हर चीज के लिए context.storage_state() का उपयोग क्यों न करें?

स्टोरेज स्थिति समर्थन की गई प्रमाणन स्थिति को निर्यात करने के लिए उपयोगी है, लेकिन प्रत्यक्ष पृष्ठ मूल्यांकन आपको लाइव कुंजी मानचित्र का निरीक्षण करने और इसे UI परिवर्तनों और स्टोरेज घटनाओं के साथ संबंधी करने की अनुमति देता है।

प्रश्न: क्या localStorage एक पुनः लोड को सहन करता है?

हाँ, जब तक ऐप्लिकेशन या ब्राउज़र इसे साफ़ नहीं करता। MDN डेमो के तीन परिवर्तित मानों ने परीक्षण किए गए पुनः लोड से बच गए और नियंत्रणों को फिर से भर दिया।

प्रश्न: क्या वह टैब जो localStorage में बदलाव करता है, एक स्टोरेज घटना प्राप्त करता है?

नहीं। यह घटना अन्य समान-उत्पत्ति दस्तावेजों को भेजी जाती है जो स्टोर को साझा करते हैं, यही कारण है कि उदाहरण एक दूसरे पृष्ठ में सुनता है।

प्रश्न: क्या sessionStorage टैबों के बीच साझा होता है?

नहीं। यह एक शीर्ष-स्तरीय ब्राउज़िंग संदर्भ के लिए सीमित है और इसके समान-उत्पत्ति चाइल्ड संदर्भों के लिए, इसलिए इसे विशिष्ट पृष्ठ सत्र से जांचें।

प्रश्न: क्या वेब स्टोरेज के मान हमेशा JSON होते हैं?

नहीं। हर मान को एक स्ट्रिंग के रूप में संग्रहीत किया जाता है। ऐप्लिकेशन के प्रारूप की पुष्टि होने पर ही JSON को पार्स करें, और अमान्य JSON को स्पष्ट रूप से संभालें।

प्रश्न: क्या ब्राउज़र स्टोरेज को स्क्रैप करना सुरक्षित है?

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