कठपुतली स्थापित करें - कठपुतली ट्यूटोरियल 4 और 5 का एक उत्कृष्ट शिक्षण गाइड

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

कठपुतली ट्यूटोरियल

Tosca ट्यूटोरियल # 1: कठपुतली अवलोकन

Tosca ट्यूटोरियल 2 #: कठपुतली पर्यावरण चर

Tosca ट्यूटोरियल 3 #: Puppeteer वेब स्क्रैपिंग और Puppeteer टेस्ट स्वचालन अवलोकन

Tosca ट्यूटोरियल 4 #: कठपुतली स्थापित करें

Tosca ट्यूटोरियल 5 #: नमूना Puppeteer परियोजना

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

कठपुतली स्थापित करें

कठपुतली लिपियों के विकास को शुरू करने के लिए, हमें नीचे दिए गए घटकों को स्थापित और कॉन्फ़िगर करना होगा - 

1. NodeJS स्थापित करें

2. संपादक स्थापित करें

3. कठपुतली स्थापित करें

NodeJS स्थापित करें:

NodeJs एक मुक्त ओपन सोर्स सर्वर वातावरण है जिसे विभिन्न प्लेटफार्मों में चलाया जा सकता है। यह सर्वर साइड में जावास्क्रिप्ट का उपयोग करता है। Puppeteer एक तरह से NodeJS एप्लिकेशन है। तो Puppeteer सेटअप का पहला चरण NodeJS फ्रेमवर्क स्थापित करना है। NodeJS फ्रेमवर्क कई प्लेटफार्मों के लिए उपलब्ध है, जिसमें विंडोज, उबंटू, मैकओएस आदि शामिल हैं। इस संदर्भ में, हम 64 बिट विंडोज ऑपरेटिंग सिस्टम के लिए संस्करण पर काम करेंगे। NodeJS स्थापित करने के चरण हैं -

Step1 # डाउनलोड NodeJS: क्लिक करें यहाँ उत्पन्न करें NodeJS डाउनलोड लिंक नेविगेट करने के लिए। यहां, हम 64 बिट विंडोज़ इंस्टॉलर (.mts) डाउनलोड करेंगे। 

कठपुतली ट्यूटोरियल - NodeJs स्थापित करें
कठपुतली ट्यूटोरियल - NodeJs स्थापित करें

चरण 2# NodeJS स्थापित करें: डाउनलोड पूरा होने के बाद, हमें इंस्टॉलर (.msi) फ़ाइल पर डबल-क्लिक करके NodeJs स्थापित करना होगा। स्थापना के दौरान, हमें निर्देशों के अनुसार आगे बढ़ने की आवश्यकता है।

चरण 3# NodeJS सत्यापित करें: स्थापना के पूरा होने के बाद, हमें कमांड प्रॉम्प्ट को खोलने और कमांड को "नोड" के रूप में दर्ज करने की आवश्यकता है। यदि नीचे विवरण दिखाई दे रहे हैं, तो स्थापना सही है। मामले में, यदि कोई त्रुटि दिखाई देती है, तो इसका मतलब है कि स्थापना सही नहीं है।

कठपुतली ट्यूटोरियल - NodeJs सत्यापित करें
कठपुतली ट्यूटोरियल - NodeJs सत्यापित करें

कठपुतली के लिए संपादक स्थापित करें:

एक संपादक और कुछ नहीं बल्कि एक उपकरण है जो हमें हमारे कठपुतली कोड लिखने, संकलित करने और चलाने में मदद करता है। ऐसे कई उपकरण उपलब्ध हैं जिनका उपयोग जावा कोड संपादक के रूप में किया जा सकता है जिसमें विजुअल स्टूडियो कोड, नोट पैड ++, एडिट प्लस आदि शामिल हैं। यहां तक ​​कि हम डिफ़ॉल्ट "नोट पैड" एप्लिकेशन में भी कठपुतली कोड लिख सकते हैं। इसमें "कठपुतली स्थापित करें" ट्यूटोरियल, हम VSCode का उपयोग करेंगे क्योंकि यह NodeJS एप्लिकेशन के साथ मुफ़्त और आसानी से संगत है। VSCode और कुछ नहीं बल्कि विजुअल स्टूडियो का एक घटक है, जो मुफ्त में उपलब्ध है। VSCode को स्थापित करने के चरण हैं - 

Step1 # Downloadd VSCode: क्लिक करें यहाँ उत्पन्न करें डाउनलोड लिंक खोलने के लिए और ऑपरेटिंग सिस्टम के अनुसार VSCode इंस्टॉलर की इच्छा संस्करण डाउनलोड करें।

Step2 # स्थापित VSCode: किसी अन्य सॉफ़्टवेयर की तरह सिस्टम में इंस्टॉलर फ़ाइल से VSCode स्थापित करें। स्थापना के दौरान, केवल अनुशंसित सेटिंग के साथ आगे बढ़ें।

Step2 # VSCode सत्यापित करें: स्थापना के पूरा होने के बाद, यह सही ढंग से स्थापित है या नहीं यह जांचने के लिए एप्लिकेशन खोलें।

कठपुतली ट्यूटोरियल - कठपुतली के लिए संपादक
कठपुतली ट्यूटोरियल - कठपुतली के लिए संपादक

Puppeteer पैकेज स्थापित करें:

कठपुतली के संस्करण v1.7.0 से, हर रिलीज में दो पैकेज नीचे होते हैं -

  • कठपुतली कोर पैकेज
  • कठपुतली पैकेज

Puppeteer के दोनों संस्करणों को कंसोल कमांड का उपयोग करके इंस्टॉल किया जा सकता है। Puppeteer स्थापित करने के आदेश हैं - 

कठपुतली-कोर पैकेज स्थापित करें: यह नोड जेएस लाइब्रेरी का एक संग्रह है जिसे जावा में विकसित किया गया है। यह devtools प्रोटोकॉल पर काम करने की क्षमता है। कठपुतली-कोर पैकेज स्थापित करते समय क्रोमियम ब्राउज़र डाउनलोड नहीं हो रहा है। Puppeteer के प्रोग्रामेटिक इंटरफ़ेस पूरी तरह से कठपुतली-कोर लाइब्रेरी को चलाते हैं। एक और महत्वपूर्ण सीमा यह है कि पिल्ला-कोर सुविधाओं को किसी भी PUPPETEER_ * पर्यावरण चर में बदलकर बदला नहीं जा सकता है। 

स्थापना आदेश: npm कठपुतली-कोर स्थापित करें

नोट: कठपुतली-कोर पैकेज स्थापित करने से पहले नोड जेएस उपकरण को स्थापित करने की आवश्यकता है।

Puppeteer उत्पाद पैकेज स्थापित करें: कठपुतली संपूर्ण उत्पाद है जिसे क्रोम ब्राउज़र को नियंत्रित करने के लिए Google द्वारा विकसित किया गया है। संपूर्ण कठपुतली उत्पाद पैकेज होने के कारण, इंस्टॉलेशन के दौरान क्रोमियम ब्राउज़र का नवीनतम संस्करण डाउनलोड हो रहा है। उसके बाद संस्थापन कठपुतली-कोर द्वारा संचालित होता है। PUPPETEER_* पर्यावरण चर को बदलकर कठपुतली सुविधाओं को अनुकूलित करना संभव है। 

स्थापना आदेश: npm कठपुतली स्थापित करें

इस "Puppeteer स्थापित करें" ट्यूटोरियल में, हम Puppeteer पैकेज की स्थापना पर काम करेंगे क्योंकि इन दोनों संस्करणों के बीच बहुत अंतर नहीं हैं।

नमूना Puppeteer परियोजना

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

सेटअप नमूना प्यूपेचर परियोजना में शामिल कदम नीचे दिखाए गए हैं - 

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

Step2 # स्थापित Puppeteer: नीचे दिए गए आदेश का उपयोग करके, हम रूट निर्देशिका में Puppeteer का पूरा पैकेज स्थापित कर सकते हैं। यह कमांड मूल रूप से सभी ओपन-सोर्स NodeJS लाइब्रेरी को डाउनलोड करता है नमूना परियोजना फ़ोल्डर। स्थापना प्रक्रिया नेटवर्क की गति के आधार पर कुछ समय लेती है। यह लगभग 350MB डेटा डाउनलोड करेगा। स्थापना के बाद, नोड_मॉडल फ़ोल्डर, जिसमें विभिन्न कठपुतली घटक और पैकेज- lock.json फ़ाइल होती है, नमूना Pupeteer प्रोजेक्ट रूट फ़ोल्डर में बनाया जाएगा।

कठपुतली ट्यूटोरियल - स्थापना लॉग
कठपुतली ट्यूटोरियल - स्थापना लॉग

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

स्थिरांक कठपुतली = आवश्यकता('कठपुतली'); //Puppeteer लाइब्रेरी को शामिल करें puppeteer.launch({headless:true}).then(async ब्राउज़र => { const pageNew = wait ब्राउज़र.newPage(); // ब्राउज़र कंसोल लॉन्च करें। लॉग ('चरण 1 - ब्राउज़र खोलें'); / /प्रदर्शन संदेश प्रतीक्षित पृष्ठनया .setViewport({चौड़ाई: 1280, ऊंचाई: 800 }) प्रतीक्षित पृष्ठनया .goto('https://techiescience.com/'); : 'स्क्रीनशॉट_लैम्ब्डा.पीएनजी' }); कंसोल.लॉग('स्टेप2 - लैम्ब्डागीक्स नेविगेट करें और स्क्रीनशॉट लें'); प्रतीक्षा करें ब्राउज़र.क्लोज(); कंसोल.लॉग('स्टेप3 - ब्राउज़र बंद' });

इस कोड को फ़ाइल नाम के साथ नमूना कठपुतली परियोजना की जड़ निर्देशिका में संग्रहीत किया जाना चाहिए नमूना_स्क्रिप्ट.जेएस। प्यूपेटेर-कोर का इंच, हमें स्क्रिप्ट की शुरुआत में 'कठपुतली' के बजाय 'कठपुतली-कोर' को शामिल करने की आवश्यकता है। मुख्य ब्राउज़र के लिए, हमें कोड को बदलना होगा ”{headless:true}” with “{headless:false}”.

Step4 # निष्पादित नमूना Puppeteer स्क्रिप्ट: नमूना स्क्रिप्ट को कमांड प्रॉम्प्ट से नीचे कमांड का उपयोग करके निष्पादित किया जा सकता है -

npm नोड sample_script.js

निष्पादन के बाद, स्क्रीनशॉट को रूट निर्देशिका में "स्क्रीनशॉट_lambda.png" के रूप में कैप्चर और स्टोर किया जाएगा।

कठपुतली ट्यूटोरियल - नमूना कठपुतली परियोजना
कठपुतली ट्यूटोरियल - नमूना कठपुतली परियोजना

अब हम amazon web application पर एक और नमूना Puppeteer script दिखाएंगे। यह स्क्रिप्ट प्रत्येक चरण में सत्यापन के साथ नीचे दिए गए चरणों का प्रदर्शन करेगी -

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

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

/** * @नाम अमेज़न में खोजें */ const puppeteer = require('puppeteer'); const रिपोर्टPathDir = 'C:\\\\LambdaGeeks\\\\puppteer_proj_sample\\\\output\\\\'; कॉन्स्ट स्क्रीनशॉटफ़ाइल = 'स्क्रीन1.पीएनजी'; प्रयास करें { (async () => { \t//ब्राउज़र और पेज ऑब्जेक्ट इंस्टेंस बनाएं और URL पर नेविगेट करें const ब्राउज़रवेब = wait puppeteer.launch({ हेडलेस: false }); const पेजवेब = प्रतीक्षा ब्राउज़रWeb.newPage() प्रतीक्षा पेजवेब .setViewport({चौड़ाई: 1280, ऊंचाई: 800 }); wait pageWeb.goto('https://www.amazon.in/'); \t \t//अमेज़ॅन खोज मापदंड दर्ज करें \tlet searchBoxAmazon = wait pageWeb .waitForXPath("//*/input[@id='twotabsearchtextbox']",{visible: true }); \tif (searchBoxAmazon === null) \t{ \t\tconsole.log('Amazon स्क्रीन नहीं है प्रदर्शित'); \t} \telse{\t\t \t\tawait searchBoxAmazon.type('परीक्षण पुस्तक'); \t\tconsole.log('खोज मानदंड दर्ज किया गया है'); \t} \t\ t \t \t//खोज बटन पर क्लिक किया \tlet btnSearchAmazon = wait pageWeb.waitForXPath("//*/input[@id='nav-search-submit-button']",{visible: true }); \ tif (btnSearchAmazon === null) \t{ \t\tconsole.log('खोज बटन नहीं दिख रहा है'); \t} \telse{ \t\tawait btnSearchAmazon.click(); \t\tconsole.log( 'खोज बटन पर क्लिक किया'); \t}\t \t \t//विशिष्ट खोज परिणाम पर क्लिक करें \tlet myBookAmazon = wait pageWeb.waitForXPath("//*[contains(text(),'Selenium Testing Tools Cookbook सेकेंड संस्करण')]",{ दृश्यमान: सत्य }) \tif (myBookAmazon === null) \t{ \t\tconsole.log('पुस्तक उपलब्ध नहीं है'); \t} \telse{ \t\tawait myBookAmazon.click(); \t\tconsole.log('ऑर्डर करने के लिए विशिष्ट पुस्तक पर क्लिक करें'); \t} \t \t \t// पहचानें कि क्या नया टैब खुला है \tconst pageTarget = pageWeb.target(); \tconst newTarget = wait ब्राउज़रवेब.waitForTarget(target => target.opener() === pageTarget); \t//नया पृष्ठ ऑब्जेक्ट प्राप्त करें: \tconst page2 = wait newTarget.page();\t \tawait page2.setViewport({ width: 1280, ऊँचाई: 800 }); \t \t//कार्ट में जोड़ें \tlet addToCartAmazon = wait page2.waitForXPath("//*/input[@id='add-to-cart-button']",{visible: true }); \tif (addToCartAmazon === null) \t{ \t\tconsole.log('कार्ट में जोड़ें बटन उपलब्ध नहीं है'); \t} \telse{ \t\tconsole.log('कार्ट में जोड़ें बटन पर क्लिक करें'); \t\tawait addToCartAmazon.click();\t\t \t} \t\t \t//सत्यापित करें कि कार्ट में जोड़ें प्रक्रिया\t \tlet successfulMessageAmazon = wait page2.waitForXPath("//*[contains(text( ),'कार्ट में जोड़ा गया')]",{ दृश्यमान: सत्य }); \tif (successMessageAmazon === null) \t{ \t\tconsole.log('आइटम कार्ट में नहीं जोड़ा गया है'); \t} \telse{ \t\tconsole.log('आइटम सफलतापूर्वक कार्ट में जोड़ा गया');\t\t \t} \t \t \t// कार्ट का नंबर कैप्चर करें \tlet cartCountAmazon = wait page2.waitForXPath ("//*/span[@id='nav-cart-count']",{ दृश्यमान: सत्य}); \tlet valueCount = wait page2.evaluate(el => el.textContent, cartCountAmazon) \tconsole.log('Cart count: ' + valueCount); \tcartCountAmazon.focus(); \प्रतीक्षा करें पृष्ठ2.स्क्रीनशॉट({पथ: स्क्रीनशॉटफ़ाइल }); \t \tawait pageWeb.waitForTimeout(3000); \प्रतीक्षा करें पृष्ठ2.बंद करें(); \wait pageWeb.close(); ब्राउज़र का इंतजार करेंWeb.close(); })() } पकड़ो (ई) { कंसोल.लॉग(ई) }

नोट: हम अगले लेखों में स्क्रिप्ट लिखने के लिए विवरण चरणों की व्याख्या करेंगे।

निष्कर्ष:

"कठपुतली ट्यूटोरियल" से "कठपुतली स्थापित करें" के बारे में इस परिचयात्मक लेख में, हमने खरोंच से अलग Puppeteer संकुल स्थापित करने के लिए विस्तृत चरणों के बारे में बताया है। कठपुतली सेटअप में अलग-अलग घटक इंस्टॉलेशन शामिल हैं जैसे कि, NodeJs स्थापित करें, VSCode स्थापित करें, Puppeteer स्थापित करें, Puppeteer नमूना प्रोजेक्ट बनाएं और निष्पादित करें। अगले Puppeteer ट्यूटोरियल में, हम Puppeteer को वेब स्क्रैपिंग टूल के रूप में उपयोग करने के लिए विस्तृत चरणों की व्याख्या करेंगे। फिर से लॉगिन करने के लिए  यहाँ उत्पन्न करें संदर्भ पोर्टल से पढ़ने के लिए।

एक टिप्पणी छोड़ दो