प्लेराइट के साथ वेब एप्लिकेशन परीक्षण कौशल

--- name: web-application-testing-skill description: स्थानीय वेब अनुप्रयोगों के साथ इंटरैक्ट करने और परीक्षण करने के लिए एक टूलकिट, जो Playwright का उपयोग करता है। --- # वेब अनुप्रयोग परीक्षण यह कौशल Playwright स्वचालन का उपयोग करके स्थानीय वेब अनुप्रयोगों के व्यापक परीक्षण और डिबगिंग को सक्षम बनाता है। ## इस कौशल का उपयोग कब करें इस कौशल का उपयोग तब करें जब आपको आवश्यकता हो: - वास्तविक ब्राउज़र में फ्रंटएंड कार्यक्षमता का परीक्षण करने की - UI व्यवहार और इंटरैक्शन सत्यापित करने की - वेब अनुप्रयोग समस्याओं को डीबग करने की - दस्तावेज़ीकरण या डिबगिंग के लिए स्क्रीनशॉट कैप्चर करने की - ब्राउज़र कंसोल लॉग निरीक्षण करने की - फ़ॉर्म सबमिशन और उपयोगकर्ता प्रवाह मान्य करने की - विभिन्न व्यूपोर्ट में रिस्पॉन्सिव डिज़ाइन जांचने की ## आवश्यक शर्तें - सिस्टम पर Node.js स्थापित - एक स्थानीय रूप से चल रहा वेब अनुप्रयोग (या सुलभ URL) - Playwright स्वचालित रूप से स्थापित हो जाएगा यदि मौजूद नहीं है ## मुख्य क्षमताएँ ### 1. ब्राउज़र स्वचालन - URL पर नेविगेट करें - बटन और लिंक क्लिक करें - फ़ॉर्म फ़ील्ड भरें - ड्रॉपडाउन चुनें - डायलॉग और अलर्ट संभालें ### 2. सत्यापन - तत्व उपस्थिति की पुष्टि करें - टेक्स्ट सामग्री सत्यापित करें - तत्व दृश्यता जांचें - URL मान्य करें - रिस्पॉन्सिव व्यवहार का परीक्षण करें ### 3. डिबगिंग - स्क्रीनशॉट कैप्चर करें - कंसोल लॉग देखें - नेटवर्क अनुरोध निरीक्षण करें - असफल परीक्षणों को डीबग करें ## उपयोग उदाहरण ### उदाहरण 1: बुनियादी नेविगेशन परीक्षण ```javascript // एक पृष्ठ पर नेविगेट करें और शीर्षक सत्यापित करें await page.goto('http://localhost:3000'); const title = await page.title(); console.log('पृष्ठ शीर्षक:', title); ``` ### उदाहरण 2: फ़ॉर्म इंटरैक्शन ```javascript // एक फ़ॉर्म भरें और सबमिट करें await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### उदाहरण 3: स्क्रीनशॉट कैप्चर ```javascript // डिबगिंग के लिए स्क्रीनशॉट कैप्चर करें await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## दिशानिर्देश 1. **हमेशा सत्यापित करें कि ऐप चल रहा है** - परीक्षण चलाने से पहले जांचें कि स्थानीय सर्वर सुलभ है 2. **स्पष्ट प्रतीक्षा का उपयोग करें** - इंटरैक्ट करने से पहले तत्वों या नेविगेशन के पूरा होने की प्रतीक्षा करें 3. **विफलता पर स्क्रीनशॉट कैप्चर करें** - समस्याओं को डीबग करने में मदद के लिए स्क्रीनशॉट लें 4. **संसाधनों को साफ करें** - समाप्त होने पर हमेशा ब्राउज़र बंद करें 5. **टाइमआउट को शालीनता से संभालें** - धीमे संचालन के लिए उचित टाइमआउट सेट करें 6. **क्रमिक रूप से परीक्षण करें** - जटिल प्रवाह से पहले सरल इंटरैक्शन से शुरू करें 7. **चयनकर्ताओं का समझदारी से उपयोग करें** - CSS कक्षाओं पर data-testid या भूमिका-आधारित चयनकर्ताओं को प्राथमिकता दें ## सामान्य पैटर्न ### पैटर्न: तत्व की प्रतीक्षा करें ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### पैटर्न: जांचें कि तत्व मौजूद है ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### पैटर्न: कंसोल लॉग प्राप्त करें ```javascript page.on('console', msg => console.log('ब्राउज़र लॉग:', msg.text())); ``` ### पैटर्न: त्रुटियों को संभालें ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## सीमाएँ - Node.js वातावरण की आवश्यकता है - देशी मोबाइल ऐप्स का परीक्षण नहीं कर सकते (इसके बजाय React Native Testing Library का उपयोग करें) - जटिल प्रमाणीकरण प्रवाह के साथ समस्याएँ हो सकती हैं - कुछ आधुनिक फ्रेमवर्क को विशिष्ट कॉन्फ़िगरेशन की आवश्यकता हो सकती है