नाटककार के साथ टेस्ट कोड कैसे जनरेट करें

नमस्ते,

आज आप सीखेंगे कि अपने परीक्षणों के लिए कोड कैसे जनरेट करें।

सबसे पहले, आपको एप्लिकेशन को चलाना है, इसलिए अपने टर्मिनल में टाइप करें npm run dev , और आपका एप्लिकेशन http://localhost:5173 पते पर चालू और चालू हो जाएगा।

अब आपको Playwright कोड जनरेटर चलाना है। ऐसा करने के लिए, आपको अपने टर्मिनल में एक और टैब खोलना होगा और npx playwright codegen टाइप करना होगा। यह आदेश एक नया ब्राउज़र और नाटककार निरीक्षक खोलता है।

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

अब, आप एक वर्ग पर क्लिक कर सकते हैं और दो खिलाड़ियों के बीच खेल का अनुकरण कर सकते हैं, आप देख सकते हैं कि निरीक्षक इन सभी चरणों को रिकॉर्ड करता है और आपके लिए परीक्षण का मुख्य भाग बनाता है। इन्हीं क्रियाओं का परिणाम यह है

 test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

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

अब हमारी परीक्षण फ़ाइल में कोड को कॉपी और पेस्ट करने और उसकी सामग्री में सुधार करने का समय आ गया है।

आइए परीक्षण के नाम को test से बदलकर should win the player "X" और गोटो मान को http://localhost:5173/ से / में बदलना चाहिए क्योंकि हमारा आधार रूट होम पेज से मेल खाता है।

फिर पहले क्लिक को रिफैक्टर करना शायद परीक्षण में सुधार करने के लिए एक अच्छा रिफैक्टर है, इसलिए आपको await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click(); और अंतिम लेकिन कम से कम, अभिकथन जोड़ें। इस मामले में, यदि परीक्षण का नाम should win the player "X" सबसे अच्छा दावा कुछ ऐसा है

 const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

तो कोड विजेता पाठ के साथ पैराग्राफ प्राप्त करने का प्रयास करता है और जांचता है कि क्या मूल्य में X मान है। अंतिम परिणाम यह है

 test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

अब, आप परीक्षण चला सकते हैं और परिणाम देख सकते हैं जो हरे रंग का होना चाहिए।

ठीक है, मुझे लगता है कि यह सब कोड जनरेशन से है।

इस लेख में, आपने अपने कदमों को रिकॉर्ड करना और उन्हें अपने परीक्षणों के लिए कोड में बदलना सीखा। कृपया, जैसा कि मैंने पहले कहा, इस उपकरण का जिम्मेदारी से उपयोग करें और हर बार उत्पन्न कोड की जांच करें।

बस इतना ही, लोक।

जल्द मिलते हैं 👋

पीएस आप इस लेख का परिणाम यहां पा सकते हैं