प्लेराइट टेस्टिंग फ्रेमवर्क के साथ टेस्ट कैसे लिखें

आप इस पोस्ट में क्या सीखने जा रहे हैं?

इस पोस्ट में, आप सीखेंगे कि अभिकथन, लोकेटर, और बहुत कुछ का उपयोग करके नाटककार के साथ परीक्षण कैसे लिखें।

परीक्षण लिखें

आइए एक उदाहरण से शुरू करते हैं

 test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); });

इस उदाहरण में, मैंने दो नई चीजें, getByRole और toContainText पेश कीं। getByRole लोकेटर का हिस्सा है और toContainText अभिकथन का हिस्सा है, और अब हम इन नई चीजों में डुबकी लगाएंगे।

लोकेटर

लोकेटर नाटककार की ऑटो-वेटिंग और रिट्री-क्षमता का केंद्रीय हिस्सा हैं। लोकेटर किसी भी क्षण पृष्ठ पर तत्व (तत्वों) को खोजने के तरीके का प्रतिनिधित्व करते हैं।

लोकेटर का उपयोग करके, आप इन आदेशों द्वारा अपने डोम में तत्वों को पुनः प्राप्त कर सकते हैं:

• page.getByRole(role[, विकल्प]) स्पष्ट और निहित अभिगम्यता विशेषताओं द्वारा पता लगाने के लिए।
• page.getByText(text[, options]) पाठ सामग्री द्वारा पता लगाने के लिए।
• page.getByLabel(text[, options]) संबद्ध लेबल के पाठ द्वारा प्रपत्र नियंत्रण का पता लगाने के लिए।
• page.getByPlaceholder(text[, options]) प्लेसहोल्डर द्वारा एक इनपुट का पता लगाने के लिए।
• page.getByAltText(text[, options]) इसके पाठ विकल्प द्वारा एक तत्व, आमतौर पर छवि का पता लगाने के लिए।
• page.getByTitle(text[, options]) शीर्षक विशेषता द्वारा किसी तत्व का पता लगाने के लिए।
• page.getByTestId(testId) इसके data-testid विशेषता के आधार पर एक तत्व का पता लगाने के लिए (अन्य विशेषताओं को कॉन्फ़िगर किया जा सकता है)।
• page.locator(चयनकर्ता) इसके चयनित (सीएसएस या XPath) पर एक तत्व आधार का पता लगाने के लिए

जैसा कि आप देख सकते हैं, इन आठ आदेशों का उपयोग करके, आप अपने पृष्ठों पर सभी तत्वों को खोज सकते हैं।

पिछले उदाहरण को देखते हुए, आप देख सकते हैं कि कैसे getByRole विधि का उपयोग करके आप अपने DOM में पैराग्राफ प्राप्त कर सकते हैं और फिर जो चाहें चेक कर सकते हैं। ठीक है, तो लोकेटर क्या हैं इसका एक त्वरित पुनर्कथन: लोकेटर ऐसे तरीके हैं जो आपको DOM में तत्वों को खोजने में मदद करते हैं।

इस प्रकार के दावे

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

जैसा कि आप कल्पना कर सकते हैं, इन दो चीजों का संयोजन आपको अपने आवेदन के व्यवहार की जांच करने के लिए कई परीक्षण बनाने की अनुमति देता है।

इसलिए यदि आप पिछले उदाहरण पर वापस जाते हैं और अपने टर्मिनल में npm run e2e टाइप करते हैं, तो आपको निम्न परिणाम मिलता है।

 npm run e2e > [email protected] e2e > playwright test Running 6 tests using 4 workers 6 passed (5s)

वाह, यह काम करता है। 😀 और अब आप जानते हैं कि नाटककार के साथ अपने परीक्षण बनाने के लिए क्या उपयोग करना है।

अपने परीक्षण अलग करें

यदि आप परीक्षण ढांचे से परिचित हैं, तो आप शायद जानते हैं कि परीक्षण सूची को समूहित करने का एक तरीका है। नाटककार के साथ ऐसा करने के लिए, आपको निम्नलिखित उदाहरण के अनुसार, test वस्तु द्वारा उजागर की गई describe विधि का उपयोग करना होगा।

 import { expect, test } from "@playwright/test"; test.describe("On View", () => { test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); });

ग्रुपिंग का लाभ रिपोर्ट में भी दिखाई दे रहा है जो अब ऐसा प्रतीत होता है।

जैसा कि आप देख सकते हैं, On View लेबल प्रत्येक परीक्षण से पहले मौजूद होता है।

तो अब, यदि आपको इसकी आवश्यकता है तो आप अपनी परीक्षण फ़ाइल को विभिन्न संदर्भों में विभाजित कर सकते हैं।

हुक्स

यदि आप टेस्ट फ्रेमवर्क के साथ काम करना पसंद करते हैं तो एक और महत्वपूर्ण विशेषता हुक है। हुक आपको परीक्षण निष्पादन से पहले या बाद में कोड का एक टुकड़ा चलाने की अनुमति देते हैं। आम तौर पर उन्हें कहा जाता है: beforeEach beforeAll afterEach afterAll और आप जानते हैं कि उन्हें नाटककार में क्या कहा जाता है? ठीक उसी तरह 🚀

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

 import { expect, test } from "@playwright/test"; test.describe("On View", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test("show tic tac toe page", async ({ page }) => { await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); });

परिणाम पहले जैसा ही है, लेकिन अब आपके पास केवल beforeEach हुक के अंदर नेविगेशन कमांड है। ये हुक बहुत अच्छे हैं यदि आपको एपीआई का मज़ाक उड़ाना है या यदि आपको परीक्षण से पहले या बाद में कुछ करना है।

अपने डोम के साथ खेलें

इन सब बातों के बाद अब इस पोस्ट की आखिरी कसौटी लिखने का समय आ गया है। अब आप एक परीक्षण लिखेंगे जो अनुप्रयोगों में उपयोगकर्ता के व्यवहार का अनुकरण करता है। परीक्षण शीर्ष बाएँ वर्ग में खिलाड़ी "X" के क्लिक का अनुकरण करता है और फिर जाँचता है कि अगला खिलाड़ी "O" है या नहीं।

 test.describe("Users behaviours", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test('the first player select the top-left square and then the next player is the "O"', async ({ page, }) => { const squares = await page.getByRole("button"); const topLeftSquare = squares.first(); await topLeftSquare.click(); const topLeftSquareImg = await topLeftSquare.getByRole("img"); await expect(topLeftSquareImg).toHaveAttribute("title", "X"); await expect(topLeftSquareImg).toHaveAttribute("src", /x.png/i); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("O"); }); });

यह उदाहरण पेचीदा होने लगता है। जैसा कि आप देख सकते हैं, कुछ नई चीजें हैं। आइए पहले वाले से शुरू करते हैं, first तरीका। इस मामले में, getByRole कई तत्व लौटाता है, और परीक्षण में केवल पहले की आवश्यकता होती है। first विधि का उपयोग करके, आप सूची में पहला तत्व प्राप्त कर सकते हैं। फिर जब आपके पास बोर्ड पर पहला वर्ग होता है, तो आप उपयोगकर्ता द्वारा इस तत्व के क्लिक का अनुकरण कर सकते हैं। click विधि का उपयोग करके, आप ऐसा कर सकते हैं। ईसी पीसी लेमन स्क्यूजी। लेकिन अब चीजें "जटिल" होने लगी हैं। जैसा कि आप देख सकते हैं, अब आप वर्ग तत्व से getByRole उपयोग कर सकते हैं, और विधि इस तत्व के छवि बच्चे को खोजने का प्रयास करती है। उसके बाद, toHaveAttribute अभिकथन का उपयोग करके, आप जांचते हैं कि क्या इस छवि का शीर्षक "X" मान के साथ है और यदि स्रोत में "x.png" मान है। अंतिम चरण पिछले पोस्ट के समान ही है, जहां आप पैराग्राफ प्राप्त करते हैं और जांचते हैं कि अगला खिलाड़ी अब "ओ" खिलाड़ी है या नहीं। ठीक है, यह रॉकेट साइंस नहीं है लेकिन पिछले उदाहरण की तुलना में थोड़ा अधिक जटिल है।

निष्कर्ष

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

• लोकेटर

• इस प्रकार के दावे

• अपने परीक्षण को कैसे अलग करें

• हुक्स

  
  

मेरा सुझाव है कि आप इन विषयों के साथ अपना हाथ खराब करें क्योंकि वे नाटककार के साथ आपकी परीक्षा के मूलभूत सिद्धांत होंगे।

ठीक है, वह सब लोक है, जल्द ही मिलते हैं।

बाय बाय 👋

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