टाइपस्क्रिप्ट के साथ नाटककार | जावास्क्रिप्ट इंस्टालेशन

Playwright Puppeteer टीम के सहयोग से Microsoft का आधुनिक वेब आधारित और API ऑटोमेशन टूल है, Puppeteer एक JavaScript लाइब्रेरी है जो DevTools प्रोटोकॉल या WebDriver BiDi पर Chrome या Firefox को नियंत्रित करने के लिए एक उच्च-स्तरीय API प्रदान करता है। कठपुतली डिफ़ॉल्ट रूप से हेडलेस (कोई दृश्यमान यूआई नहीं) में चलती है।

नाटककार एकल एपीआई के माध्यम से वेब एप्लिकेशन के स्वचालन के लिए आधुनिक वेब आधारित ब्राउज़र का समर्थन करता है और एपीआई के लिए स्वचालन का भी समर्थन करता है।

नाटककार की वास्तुकला

नाटककार वेब सॉकेट प्रोटोकॉल पर काम करता है, एक बार कनेक्शन स्थापित हो जाने के बाद परीक्षण शुरू हो जाएगा और वेब सॉकेट प्रोटोकॉल का उपयोग करके सर्वर पर JSON प्रारूप में अनुरोध भेजता है, जिसका अर्थ है कि एक बार नाटककार द्वारा कनेक्शन स्थापित करने के बाद अनुरोध भेजने के लिए दोबारा कनेक्शन स्थापित करने की आवश्यकता नहीं है। पूर्ण परीक्षण निष्पादन तक सर्वर। नाटककार को playwright.quit() विधि द्वारा कनेक्शन डिस्कनेक्ट करना होगा।

आइए HTTP प्रोटोकॉल कनेक्शन वेब सॉकेट प्रोटोकॉल कनेक्शन के बीच अंतर को समझें

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

क्रॉस-प्लेटफ़ॉर्म। विंडोज़, लिनक्स और मैकओएस पर स्थानीय स्तर पर या सीआई पर, हेडलेस या हेडेड परीक्षण करें।

अंतरभाषा। टाइपस्क्रिप्ट, जावास्क्रिप्ट, पायथन, .NET, जावा में प्लेराइट एपीआई का उपयोग करें।

मोबाइल वेब का परीक्षण करें। एंड्रॉइड और मोबाइल सफारी के लिए Google Chrome का मूल मोबाइल अनुकरण। वही रेंडरिंग इंजन आपके डेस्कटॉप और क्लाउड पर काम करता है।

1. लचीला • कोई परतदार परीक्षण नहीं

स्वतः-प्रतीक्षा करें। नाटककार क्रिया करने से पहले तत्वों के क्रियाशील होने की प्रतीक्षा करता है। इसमें आत्मनिरीक्षण घटनाओं का एक समृद्ध समूह भी है। दोनों का संयोजन कृत्रिम टाइमआउट की आवश्यकता को समाप्त कर देता है - परतदार परीक्षणों का प्राथमिक कारण।

वेब-प्रथम दावे। नाटककार के दावे विशेष रूप से गतिशील वेब के लिए बनाए गए हैं। आवश्यक शर्तें पूरी होने तक चेक स्वचालित रूप से पुनः प्रयास किए जाते हैं।

ट्रेसिंग। फ्लेक को खत्म करने के लिए परीक्षण पुनः प्रयास रणनीति कॉन्फ़िगर करें, निष्पादन ट्रेस, वीडियो, स्क्रीनशॉट कैप्चर करें।

1. कोई समझौता नहीं • कोई सीमा नहीं

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

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

विश्वसनीय घटनाएँ। होवर तत्व, गतिशील नियंत्रणों के साथ इंटरैक्ट करते हैं, विश्वसनीय ईवेंट उत्पन्न करते हैं। नाटककार वास्तविक उपयोगकर्ता से अप्रभेद्य वास्तविक ब्राउज़र इनपुट पाइपलाइन का उपयोग करता है।

टेस्ट फ्रेम, पियर्स शैडो डोम। नाटककार चयनकर्ता छाया DOM में छेद करते हैं और फ्रेम में निर्बाध रूप से प्रवेश करने की अनुमति देते हैं।

1. पूर्ण अलगाव • तेजी से निष्पादन

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

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

1. शक्तिशाली टूलींग

कोडजेन। अपने कार्यों को रिकॉर्ड करके परीक्षण उत्पन्न करें। उन्हें किसी भी भाषा में सहेजें।

नाटककार निरीक्षक। पृष्ठ का निरीक्षण करें, चयनकर्ता उत्पन्न करें, परीक्षण निष्पादन के माध्यम से कदम उठाएं, क्लिक बिंदु देखें, निष्पादन लॉग का पता लगाएं।

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

आइए टाइपस्क्रिप्ट/जावास्क्रिप्ट के साथ प्लेराइट का उपयोग शुरू करें

टाइपस्क्रिप्ट/जावास्क्रिप्ट के लिए नाटककार की स्थापना
स्थापना के लिए पूर्व आवश्यकताएँ इस प्रकार हैं: Node.js 18

विंडोज 10, विंडोज सर्वर 2016 या लिनक्स के लिए विंडोज सबसिस्टम (डब्ल्यूएसएल)।
macOS 13 वेंचुरा, या macOS 14 सोनोमा।
डेबियन 11, डेबियन 12, उबंटू 20.04 या उबंटू 22.04, उबंटू 24.04, x86-64 और आर्म64 आर्किटेक्चर पर।
एनपीएम, यार्न या पीएनपीएम का उपयोग करके प्लेराइट स्थापित करके शुरुआत करें। वैकल्पिक रूप से आप वीएस कोड एक्सटेंशन का उपयोग करके भी शुरुआत कर सकते हैं और अपने परीक्षण चला सकते हैं।

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

नाटककार स्थापना
एंटर पर क्लिक करें और निम्न स्क्रीन दिखाई देगी और स्क्रिप्टिंग भाषा चुनें और फिर एंटर दबाएं

स्क्रिप्टिंग भाषा का चयन करें
स्क्रिप्टिंग भाषा का चयन करने और फिर एंटर दबाने के बाद निम्नलिखित स्क्रीन दिखाई देगी और आपसे पूछा जाएगा कि आप अपना अंतिम परीक्षण कहां करना चाहते हैं। चलो ऐसा ही हो।

नाटककार स्थापना
अब यह GitHub Actions वर्कफ़्लो मांगेगा। यदि आप कॉन्फ़िगर करना चाहते हैं तो Y दबाएं या फिर N दबाएं। यह आपसे ब्राउज़र इंस्टॉल करने के लिए कहेगा, यदि आप इंस्टॉल करना चाहते हैं तो Y चुनें जिसका अर्थ है सत्य। निम्नलिखित स्क्रीन दिखाई देगी।

नोट: प्लेराइट ब्राउज़र को नीचे दिए गए आदेश के माध्यम से मैन्युअल रूप से इंस्टॉल किया जा सकता है

एनपीएक्स नाटककार इंस्टॉल

नाटककार स्थापना
अब एंटर दबाएं और निम्नलिखित स्क्रीन दिखाई देंगी।

नाटककार स्थापना
नाटककार स्थापना

नाटककार स्थापना

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

एनपीएक्स नाटककार परीक्षण
एंड-टू-एंड परीक्षण चलाता है।

एनपीएक्स नाटककार परीक्षण --यूआई
इंटरैक्टिव यूआई मोड प्रारंभ करता है।

एनपीएक्स नाटककार परीक्षण --प्रोजेक्ट=क्रोमियम
परीक्षण केवल डेस्कटॉप क्रोम पर चलता है।

एनपीएक्स नाटककार परीक्षण उदाहरण
परीक्षणों को एक विशिष्ट फ़ाइल में चलाता है।

एनपीएक्स नाटककार परीक्षण --डीबग
परीक्षणों को डिबग मोड में चलाता है।

एनपीएक्स नाटककार कोडजेन
Codegen के साथ स्वतः परीक्षण उत्पन्न करें।

हमारा सुझाव है कि आप टाइप करके शुरुआत करें:

npx playwright test

अब निम्नलिखित कमांड का उपयोग करके और रिपोर्ट देखने के लिए परीक्षण स्क्रिप्ट निष्पादित करते हैं। नाटककार क्रोमियम, फ़ायरफ़ॉक्स और वेबकिट में समानांतर रूप से परीक्षण निष्पादित करेगा।

एनपीएक्स नाटककार परीक्षण

एनपीएक्स नाटककार शो-रिपोर्ट

नाटककार डिफ़ॉल्ट रूप से रिपोर्ट केवल टाइपस्क्रिप्ट/जावास्क्रिप्ट का समर्थन करता है
नाटककार डिफ़ॉल्ट रूप से आपकी परीक्षण स्क्रिप्ट को निम्न ब्राउज़र में हेडलेस मोड के साथ निष्पादित करने के लिए कॉन्फ़िगर करता है। कॉन्फ़िगरेशन playwright.config.js

'@playwright/test' से { defineConfig, डिवाइस } आयात करें;

/**

• फ़ाइल से पर्यावरण चर पढ़ें।
• https://github.com/motdotla/dotenv */ // 'dotenv' से dotenv आयात करें; // 'पथ' से आयात पथ; // dotenv.config({पथ: path.resolve(__dirname, '.env') });

/**

• https://playwright.dev/docs/test-configuration देखें।
  /
  निर्यात डिफॉल्ट डिफाइनकॉन्फिग({
  टेस्टडिर: './टेस्ट',
  / समानांतर में फ़ाइलों में परीक्षण चलाएँ /
  पूरी तरह से समानांतर: सत्य,
  / यदि आपने गलती से स्रोत कोड में test.only छोड़ दिया है तो CI पर निर्माण विफल हो जाता है। /
  केवल निषिद्ध: !!process.env.CI,
  / केवल सीआई पर पुनः प्रयास करें /
  पुनः प्रयास करें: प्रक्रिया.env.CI? 2 : 0,
  / सीआई पर समानांतर परीक्षणों से ऑप्ट आउट करें। /
  कार्यकर्ता: प्रक्रिया.env.CI? 1 : अपरिभाषित,
  / रिपोर्टर का उपयोग करें। https://playwright.dev/docs/test-reporters देखें /
  रिपोर्टर: 'एचटीएमएल',
  / नीचे सभी परियोजनाओं के लिए साझा सेटिंग्स। https://playwright.dev/docs/api/class-testoptions देखें। /
  उपयोग: {
  / wait page.goto('/') जैसी कार्रवाइयों में उपयोग के लिए बेस यूआरएल। */
  // बेसयूआरएल: 'http://127.0.0.1:3000',

  /* विफल परीक्षण का पुन: प्रयास करते समय ट्रेस एकत्र करें। देखें https://playwright.dev/docs/trace-viewer */
  ट्रेस: ​​'ऑन-फर्स्ट-रीट्री',
  },

/* प्रमुख ब्राउज़रों के लिए प्रोजेक्ट कॉन्फ़िगर करें */
परियोजनाएं: [
{
नाम: 'क्रोमियम',
उपयोग करें: { ...डिवाइसेस['डेस्कटॉप क्रोम'] },
},

{
  name: 'firefox',
  use: { ...devices['Desktop Firefox'] },
},

{
  name: 'webkit',
  use: { ...devices['Desktop Safari'] },
},

/* Test against mobile viewports. */
// {
//   name: 'Mobile Chrome',
//   use: { ...devices['Pixel 5'] },
// },
// {
//   name: 'Mobile Safari',
//   use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
//   name: 'Microsoft Edge',
//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
//   name: 'Google Chrome',
//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },

],

/* परीक्षण शुरू करने से पहले अपना स्थानीय डेव सर्वर चलाएं */
// वेबसर्वर: {
// कमांड: 'एनपीएम रन स्टार्ट',
// यूआरएल: 'http://127.0.0.1:3000',
// मौजूदा सर्वर का पुन: उपयोग करें: !process.env.CI,
// },
});
अब हम परीक्षण स्क्रिप्ट को गैर हेडलीज़ मोड (यूआई) और अतिरिक्त ब्राउज़र जोड़ने के साथ निष्पादित करने के लिए संशोधित करते हैं। नाटककार परीक्षण स्क्रिप्ट निष्पादन को रिकॉर्ड करने और दृश्य विकल्पों का पता लगाने के विकल्प भी प्रदान करता है जो डिबगिंग के लिए उपयोगी होगा। यदि आप ट्रेस व्यूअर विकल्प को सक्षम करते हैं तो यह देख पाएंगे कि परीक्षण से पहले स्थिति क्या है, परीक्षण के दौरान स्थिति क्या है और परीक्षण के बाद स्थिति क्या होगी। मैंने नाटककार कॉन्फ़िग फ़ाइल को संशोधित किया है और यह इस प्रकार है:

// @ts-check
const { defineConfig, डिवाइसेस } = require('@playwright/test');

मॉड्यूल.एक्सपोर्ट्स = डिफाइनकॉन्फिग({
टेस्टडिर: './टेस्ट',
पूरी तरह से समानांतर: सत्य,
केवल निषिद्ध: !!process.env.CI,
पुनः प्रयास करें: प्रक्रिया.env.CI? 2 : 0,
कार्यकर्ता: प्रक्रिया.env.CI? 1 : अपरिभाषित,
रिपोर्टर: 'एचटीएमएल',
उपयोग: {
ट्रेस: ​​'चालू', // ट्रेसिंग सक्षम करें
वीडियो: 'चालू', // प्रत्येक परीक्षण के लिए वीडियो रिकॉर्ड करें
हेडलेस: गलत, // हेडेड मोड में परीक्षण चलाएँ
},
परियोजनाएं: [
{
नाम: 'क्रोमियम',
उपयोग करें: { ...डिवाइसेस['डेस्कटॉप क्रोम'] },
},
{
नाम: 'फ़ायरफ़ॉक्स',
उपयोग करें: { ...डिवाइसेस['डेस्कटॉप फ़ायरफ़ॉक्स'] },
},
{
नाम: 'वेबकिट',
उपयोग करें: { ...डिवाइसेस['डेस्कटॉप सफारी'] },
},
{
नाम: 'माइक्रोसॉफ्ट एज',
उपयोग: {
...डिवाइस['डेस्कटॉप एज'],
चैनल: 'msedge'
},
},
{
नाम: 'Google Chrome',
उपयोग: {
...डिवाइस['डेस्कटॉप क्रोम'],
चैनल: 'क्रोम'
},
},
],
});
अब परीक्षण स्क्रिप्ट रिकॉर्डिंग, ट्रेस व्यूअर विकल्प के साथ नॉन हेडलेस मोड में कॉन्फ़िगरेशन फ़ाइल में उल्लिखित ब्राउज़र पर परीक्षण निष्पादित कर सकती हैं।

हैप्पी लर्निंग !! शुभ स्वचालन!! सुखद परीक्षण

किसी भी जानकारी/प्रश्न के लिए बेझिझक मुझे [email protected] और लिंक्डइन प्रोफाइल पर संपर्क करें

https://www.linkedin.com/in/santush-culkarni-ab571639/