HI
RU
EN
ES
ZH
FR
DE
PT
AR
"मैन्युअल क्लिकिंग" अब क्यों काम नहीं करता?
\n\nकल्पना करें: आपने एक फीचर पूरा किया, एडिटर में "Run" दबाया, ब्राउज़र में सब कुछ बिल्कुल सही दिखता है। आप इसे प्रोडक्शन में डालते हैं। और एक घंटे बाद - घबराहट: रजिस्ट्रेशन फॉर्म टूट गया, क्योंकि किसी ने गलती से CSS-क्लास बदल दिया, और आपके सहकर्मी ने ध्यान नहीं दिया। परिचित लगता है? यदि आप JavaScript में लिखते हैं और बैकएंड पर Python का उपयोग करते हैं, तो आपने शायद ऐसी स्थिति का सामना किया है जहां E2E परीक्षण JavaScript अनुप्रयोगों का आपकी शाम बचा सकता था।
\n\nएंड-टू-एंड (E2E) परीक्षण कोई विलासिता नहीं है, बल्कि किसी भी गंभीर प्रोजेक्ट के लिए बुनियादी स्वच्छता है। वे वास्तविक उपयोगकर्ता के कार्यों का अनुकरण करते हैं: क्लिक, डेटा इनपुट, स्क्रॉलिंग, सर्वर प्रतिक्रियाओं की जाँच। और हाँ, वे आपके स्टैक के साथ काम करते हैं - चाहे वह React, Vue, Angular या सिर्फ वेनिला JS हो।
\n\nइस लेख में, हम देखेंगे कि कैसे वेब अनुप्रयोगों का एंड-टू-एंड परीक्षण बिना दर्द के लागू किया जाए, आधुनिक टूल का उपयोग करके। आप JavaScript में वास्तविक कोड उदाहरण देखेंगे, जानेंगे कि E2E को Python-बैकएंड के साथ कैसे जोड़ा जाए, और कार्यान्वयन के लिए एक चेकलिस्ट प्राप्त करेंगे। चलिए शुरू करते हैं!
\n\nE2E परीक्षण क्या है और आपको इसकी आवश्यकता क्यों है?
\n\nE2E परीक्षण (एंड-टू-एंड) शुरू से अंत तक पूरे उपयोगकर्ता पथ की जाँच करने की प्रक्रिया है। उदाहरण के लिए: साइट खोलें → उत्पाद खोजें → कार्ट में जोड़ें → ऑर्डर करें → जाँचें कि ईमेल आया है या नहीं।
\n\nयूनिट परीक्षणों (जो एक फंक्शन की जाँच करते हैं) या एकीकरण परीक्षणों (जो दो मॉड्यूल के बीच संबंध की जाँच करते हैं) के विपरीत, JavaScript के एंड-टू-एंड परीक्षण पूरे सिस्टम की जाँच करते हैं - फ्रंटएंड, बैकएंड, डेटाबेस, बाहरी API।
\n\nE2E परीक्षण कब विशेष रूप से आवश्यक हैं
\n- \n
- आप पुराने कोड को नए फ्रेमवर्क में फिर से लिख रहे हैं। \n
- आपके पास माइक्रोसर्विस आर्किटेक्चर + बैकएंड पर Python है। \n
- आप अक्सर रिलीज़ करते हैं और रिग्रेशन से डरते हैं। \n
- ग्राहक "गड़बड़ियों" की शिकायत करते हैं जो स्थानीय रूप से दोबारा नहीं होतीं। \n
E2E के बिना, आपको बग के बारे में उपयोगकर्ता से पता चलने का जोखिम है। E2E के साथ, आपको डिप्लॉयमेंट से एक मिनट पहले इसके बारे में पता चल जाएगा।
\n\nटूल चुनना: Playwright बनाम Cypress
\n\nबाजार में JavaScript परीक्षण स्वचालन के लिए दो मुख्य खिलाड़ी हैं: Playwright (Microsoft से) और Cypress (उसी नाम की कंपनी से)। दोनों शक्तिशाली हैं, लेकिन कुछ बारीकियाँ हैं।
\n\nPlaywright
\n- \n
- सभी ब्राउज़रों का समर्थन करता है: Chromium, Firefox, WebKit (Safari)। \n
- iframe, टैब, कई पेजों के साथ काम करता है। \n
- JS/TS, Python, C#, Java में लिखा जाता है। \n
- जटिल परिदृश्यों के लिए उपयुक्त: फ़ाइल अपलोड, नेटवर्क अनुरोधों को इंटरसेप्ट करना, मोबाइल उपकरणों का अनुकरण। \n
Cypress
\n- \n
- सरल सिंटैक्स, बिल्ट-इन डैशबोर्ड। \n
- केवल Chromium में काम करता है (और Firefox प्रयोगात्मक रूप से)।
- एक से अधिक टैब नहीं खोल सकता।
- छोटे प्रोजेक्ट और त्वरित शुरुआत के लिए आदर्श।
लेख के लिए हमारी पसंद Playwright है, क्योंकि यह Python डेवलपर्स के करीब है (आधिकारिक Python API है) और 99% परिदृश्यों को कवर करता है। लेकिन हम Cypress का एक उदाहरण भी दिखाएंगे।
\n\nPlaywright (JavaScript) पर पहला E2E परीक्षण लिखना
\n\nइंस्टॉलेशन सरल है:
\nnpm init -y\nnpm install @playwright/test\nnpx playwright installअब एक फ़ाइल बनाएं tests/example.spec.js। मान लें कि हम साइट pythonlib.ru पर लॉगिन पेज का परीक्षण कर रहे हैं (हाँ, यह एक काल्पनिक उदाहरण है, लेकिन तर्क वास्तविक है)।
const { test, expect } = require('@playwright/test');\n\ntest('उपयोगकर्ता सिस्टम में लॉग इन कर सकता है', async ({ page }) => {\n // 1. लॉगिन पेज खोलें\n await page.goto('https://pythonlib.ru/login');\n\n // 2. फ़ील्ड भरें\n await page.fill('#email', 'test@example.com');\n await page.fill('#password', 'securePassword123');\n\n // 3. "लॉग इन" बटन दबाएं\n await page.click('button[type="submit"]');\n\n // 4. डैशबोर्ड पर रीडायरेक्ट की प्रतीक्षा करें\n await page.waitForURL('**/dashboard');\n\n // 5. जाँचें कि 
