आप इस पोस्ट में क्या सीखने जा रहे हैं? इस पोस्ट में, आप सीखेंगे कि अभिकथन, लोकेटर, और बहुत कुछ का उपयोग करके नाटककार के साथ परीक्षण कैसे लिखें। परीक्षण लिखें आइए एक उदाहरण से शुरू करते हैं 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 इसके चयनित (सीएसएस या XPath) पर एक तत्व आधार का पता लगाने के लिए page.locator(चयनकर्ता) जैसा कि आप देख सकते हैं, इन आठ आदेशों का उपयोग करके, आप अपने पृष्ठों पर सभी तत्वों को खोज सकते हैं। पिछले उदाहरण को देखते हुए, आप देख सकते हैं कि कैसे विधि का उपयोग करके आप अपने DOM में पैराग्राफ प्राप्त कर सकते हैं और फिर जो चाहें चेक कर सकते हैं। ठीक है, तो लोकेटर क्या हैं इसका एक त्वरित पुनर्कथन: लोकेटर ऐसे तरीके हैं जो आपको DOM में तत्वों को खोजने में मदद करते हैं। getByRole इस प्रकार के दावे किसी भी परीक्षण ढाँचे की तरह जिसका सम्मान किया जाता है, नाटककार के अपने दावे हैं। हमारे परिणामों की जांच करने के लिए अभिकथन का उपयोग किया जाता है, और डेवलपर्स के रूप में, हम उनका उपयोग यह सुनिश्चित करने के लिए करते हैं कि एप्लिकेशन या कोड अपेक्षित रूप से चलता है। इस सुविधा के लिए नाटककार हुड के नीचे जेस्ट द्वारा निर्मित फ़ंक्शन का उपयोग करता है। इसलिए अगर आप से परिचित हैं, तो आपको नाटककार से कोई समस्या नहीं होगी। आप जिन सबसे प्रसिद्ध अभिकथनों का उपयोग कर सकते हैं वे हैं: , , , और बहुत कुछ। यह जांचने के लिए कि आपका आवेदन अपेक्षित रूप से चलता है, अभिकथन आपके सबसे अच्छे मित्र हैं। अपेक्षित जेस्ट toEqual toContain toMatch toBe जैसा कि आप कल्पना कर सकते हैं, इन दो चीजों का संयोजन आपको अपने आवेदन के व्यवहार की जांच करने के लिए कई परीक्षण बनाने की अनुमति देता है। इसलिए यदि आप पिछले उदाहरण पर वापस जाते हैं और अपने टर्मिनल में टाइप करते हैं, तो आपको निम्न परिणाम मिलता है। npm run e2e npm run e2e > react-e2e@0.0.0 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"); }); }); यह उदाहरण पेचीदा होने लगता है। जैसा कि आप देख सकते हैं, कुछ नई चीजें हैं। आइए पहले वाले से शुरू करते हैं, तरीका। इस मामले में, कई तत्व लौटाता है, और परीक्षण में केवल पहले की आवश्यकता होती है। विधि का उपयोग करके, आप सूची में पहला तत्व प्राप्त कर सकते हैं। फिर जब आपके पास बोर्ड पर पहला वर्ग होता है, तो आप उपयोगकर्ता द्वारा इस तत्व के क्लिक का अनुकरण कर सकते हैं। विधि का उपयोग करके, आप ऐसा कर सकते हैं। ईसी पीसी लेमन स्क्यूजी। लेकिन अब चीजें "जटिल" होने लगी हैं। जैसा कि आप देख सकते हैं, अब आप वर्ग तत्व से उपयोग कर सकते हैं, और विधि इस तत्व के छवि बच्चे को खोजने का प्रयास करती है। उसके बाद, अभिकथन का उपयोग करके, आप जांचते हैं कि क्या इस छवि का शीर्षक "X" मान के साथ है और यदि स्रोत में "x.png" मान है। अंतिम चरण पिछले पोस्ट के समान ही है, जहां आप पैराग्राफ प्राप्त करते हैं और जांचते हैं कि अगला खिलाड़ी अब "ओ" खिलाड़ी है या नहीं। ठीक है, यह रॉकेट साइंस नहीं है लेकिन पिछले उदाहरण की तुलना में थोड़ा अधिक जटिल है। first getByRole first click getByRole toHaveAttribute निष्कर्ष ठीक है, मुझे लगता है कि अभी आपके पास अध्ययन करने के लिए सामग्री है! 😃तो, आपने इस पोस्ट में क्या सीखा है: लोकेटर इस प्रकार के दावे अपने परीक्षण को कैसे अलग करें हुक्स मेरा सुझाव है कि आप इन विषयों के साथ अपना हाथ खराब करें क्योंकि वे नाटककार के साथ आपकी परीक्षा के मूलभूत सिद्धांत होंगे। ठीक है, वह सब लोक है, जल्द ही मिलते हैं। बाय बाय 👋 पीएस आप इस लिंक पर इस पोस्ट का परिणाम पा सकते हैं
