नाटककार परीक्षण ढांचे का परिचय

पिछले दौर में, फ्रंटएंड इकोसिस्टम में, एक नया e2e टूल सामने आया है और यह प्रसिद्ध होने लगा है; इसका नाम नाटककार है। इस छोटी श्रृंखला में, मैं आपको इस पर कुछ जानकारी देना चाहता हूं और आरंभ करने के तरीके के बारे में सुझाव देना चाहता हूं।

क्या है वह?

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

यदि आप आधिकारिक वेबसाइट खोलते हैं, तो आप इन विशेषताओं को पा सकते हैं:

• कोई भी ब्राउज़र कोई भी प्लेटफ़ॉर्म वन एपीआई
• लचीला कोई परतदार परीक्षण नहीं
• कोई समझौता नहीं कोई सीमा नहीं
• पूर्ण अलगाव तेजी से निष्पादन
• शक्तिशाली टूलींग

मेरी राय में, उपकरण इन सभी विशेषताओं को दर्शाता है।

टिकटॉको आवेदन

मैं इस श्रृंखला में vite+react के साथ निर्मित एक TicTacToe एप्लिकेशन का उपयोग करना चाहता हूं। और आप इसे यहाँ पा सकते हैं।

जैसा कि आप देख सकते हैं, एप्लिकेशन सीधा है, लेकिन इसके साथ, हम Playwright के साथ पहले चरण की ओर बढ़ना शुरू कर सकते हैं।

नाटककार स्थापित करें

Playwright का उपयोग करने के लिए पहला कदम इसे स्थापित करना है, यह आसान है। अपना टर्मिनल खोलें और npm init playwright@latest टाइप करें (मैं npm का उपयोग करता हूं लेकिन यदि आप यार्न या pnpm का उपयोग करना चाहते हैं तो डॉक्स पढ़ें)। ठीक है, अब स्थापना आपसे कुछ प्रश्न पूछती है:

1. अपने एंड-टू-एंड परीक्षण कहां करें? डिफ़ॉल्ट विकल्प tests है लेकिन मैं फ़ोल्डर e2e का उपयोग करना पसंद करता हूं।
2. एक GitHub क्रियाएँ कार्यप्रवाह जोड़ें? डिफ़ॉल्ट विकल्प false है; इस डेमो में, मैं इस विकल्प को अभी के लिए असत्य पर छोड़ देता हूँ।
3. Playwright ब्राउज़र स्थापित करें (मैन्युअल रूप से 'npx playwright install' के माध्यम से किया जा सकता है)? डिफ़ॉल्ट विकल्प true है, और मैंने इस मान का उपयोग किया है

4. 
   

और अब आपको स्थापना समाप्त होने तक प्रतीक्षा करनी होगी। जब स्थापना पूर्ण हो जाती है... बधाई हो, आप नाटककार के साथ अपने हाथ गंदे करने के लिए तैयार हैं!

पहली झलक

आपके रिपॉजिटरी में बनाई गई स्थापना 3 नई फाइलें:

• नाटककार.config.ts

• e2e/example.spec.ts

• परीक्षण-उदाहरण/डेमो-टूडू-app.spec.ts

  
  

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

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

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

अपना पहला परीक्षण चलाएँ

नाटककार को काम करते हुए देखने का समय आ गया है, इसलिए अपना टर्मिनल फिर से खोलें और निम्न कमांड चलाएँ npx playwright test । नतीजा कुछ इस प्रकार है

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

अपना पहला परीक्षण लिखें

ठीक है, अच्छा है, लेकिन अब समय आ गया है कि आप नाटककार के साथ अपना पहला टेस्ट लिखें। ऐसा करने से पहले, आपको परीक्षण शुरू करने से पहले अपने एप्लिकेशन को चलाने में सक्षम होने के लिए Playwright को कॉन्फ़िगर करना होगा। ऐसा करने के लिए, आपको playwright.config.ts खोलना होगा और निम्न कॉन्फ़िगरेशन जोड़ना होगा

 const config: PlaywrightTestConfig = { ... webServer: { command: "npm run dev", port: 5173, }, ... };

NB अपने पोर्ट की जाँच करें कमांड चलाकर npm run dev आपको उसी पोर्ट का उपयोग करना है जिसे vite द्वारा उजागर किया गया है।

और अब यह आपके पहले परीक्षण का समय है। फ़ाइल e2e/example.spec.ts खोलें और उसका नाम बदलकर e2e/tit-tac-toe.spec.ts कर दें। फिर फ़ाइल में सब कुछ साफ़ करें और import { expect, test } from "@playwright/test"; .

अब अपना पहला टेस्ट जोड़ें

 test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); });

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

अब, यह जांचने का समय है कि परीक्षण Playwright में चलता है या नहीं, लेकिन ऐसा करने से पहले, आप package.json में एक नई स्क्रिप्ट जोड़कर Playwright के साथ बातचीत को आसान बना सकते हैं, जैसा कि यहां दिखाया गया है

 .... "scripts": { ... "e2e": "playwright test" },

अब अपने टर्मिनल में, आप npm run e2e और वॉइला टाइप कर सकते हैं, आपका परीक्षण चला गया ✅

अपने package.json में अन्य स्क्रिप्ट जोड़कर, आप अपने ब्राउज़र में रिपोर्ट परिणाम खोल सकते हैं

 .... "scripts": { ... "e2e": "playwright test", "e2e:report": "playwright show-report" },

और अब, यदि आप अपने ब्राउज़र में npm run e2e:report कमांड चलाते हैं, तो आप अपने पहले परीक्षण का परिणाम देख सकते हैं।

ठीक है, मुझे लगता है कि अभी के लिए बस इतना ही। इस पोस्ट में आपने सीखा:

• नाटककार कैसे स्थापित करें
• अपना परीक्षण कैसे करें
• नाटककार के साथ अपना पहला टेस्ट कैसे लिखें

अगली पोस्ट में हम नाटककार की दुनिया में अपनी यात्रा जारी रखेंगे, लेकिन अभी के लिए बस इतना ही! जल्द ही मिलते हैं, लोग।

अलविदा

ps आप इस पोस्ट का परिणाम इस लिंक पर पा सकते हैं