E2E परीक्षण TypeScript: डेवलपर के लिए पूर्ण गाइड

आपका एप्लिकेशन काम करता है? इसे TypeScript पर E2E परीक्षणों से साबित करें

क्या आपने कभी यह वाक्यांश सुना है: "हमारा सब कुछ काम करता है, हमने मैन्युअल रूप से परीक्षण किया है"? और ठीक अगले दिन, प्रोडक्शन क्रैश हो जाता है? परिचित लगता है, है ना? मैन्युअल परीक्षण कॉफी के मैदान पर भविष्यवाणी करने जैसा है। आप कभी नहीं जानते कि आप उस बटन को दबाएंगे जो उपयोगकर्ता के पूरे फ्लो को तोड़ देगा।

TypeScript पर E2E (एंड-टू-एंड) परीक्षण आपका डिजिटल QA इंजीनियर है जो सोता नहीं, कॉफी नहीं पीता, और 24/7 हर बटन की जांच करता है। इस लेख में हम सिर्फ यह नहीं बताएंगे कि E2E परीक्षण क्या हैं। हम उन्हें एक साथ लिखेंगे: इंस्टॉलेशन से लेकर वास्तविक CI/CD पाइपलाइन तक। तैयार हो जाइए, यह गर्म और उपयोगी होगा!

E2E परीक्षणों के लिए विशेष रूप से TypeScript क्यों?

ऐसा लगता है कि E2E परीक्षण किसी भी चीज़ पर लिखे जा सकते हैं: JavaScript, Python, यहां तक कि Java (लेकिन चलिए दुखद बातों पर नहीं जाते)। हालांकि, TypeScript आपको एक सुपरपावर देता है - स्टैटिक टाइपिंग। अब आप रनटाइम पर Cannot read property 'click' of undefined जैसे बग नहीं पकड़ेंगे। आपका IDE परीक्षण चलाने से पहले ही त्रुटि को हाइलाइट कर देगा।

इसके अलावा, यदि आपका एप्लिकेशन TypeScript में लिखा गया है (और आज 90% टीमें ऐसा करती हैं), तो उसी भाषा में परीक्षण लिखना तर्कसंगत है। आप समान प्रकार, समान इंटरफ़ेस, समान उपयोगिताओं का उपयोग करते हैं। इससे संज्ञानात्मक भार कम होता है और विकास में तेजी आती है।

टूल चुनना: Playwright बनाम Cypress

TypeScript के लिए E2E टूल का बाजार छोटा है, लेकिन दो स्पष्ट नेता हैं: Cypress और Playwright। हम Playwright का उपयोग करेंगे। क्यों?

\n
• बॉक्स से बाहर मल्टी-ब्राउज़र समर्थन: Chromium, Firefox, WebKit (Safari)। Cypress अभी तक Safari के साथ ठीक से काम नहीं कर पाता।
\n
• गति: Playwright प्रॉक्सी सर्वर के बजाय DevTools प्रोटोकॉल के माध्यम से काम करता है, जो परीक्षणों को तेज़ बनाता है।
\n
• iframe और टैब के साथ काम: Playwright कई टैब या क्रॉस-डोमेन iframe के साथ काम करने पर कोई प्रतिबंध नहीं लगाता।
\n
• TypeScript first: Playwright TypeScript में लिखा गया है और पूरी तरह से इसका समर्थन करता है।
\n

लेकिन यदि आप नौसिखिया हैं, तो शुरुआत के लिए Cypress आसान हो सकता है। चुनाव आपका है। हम Playwright के साथ युद्ध में जा रहे हैं।

प्रोजेक्ट की स्थापना और कॉन्फ़िगरेशन

एक नया प्रोजेक्ट बनाएं और Playwright इंस्टॉल करें। टर्मिनल खोलें और निष्पादित करें:

mkdir e2e-typescript-guide\ncd e2e-typescript-guide\nnpm init -y\nnpm install @playwright/test\nnpx playwright install

अंतिम कमांड ब्राउज़र (Chromium, Firefox, WebKit) डाउनलोड करेगा। इसमें कुछ मिनट लगेंगे - कॉफी ले आएं।

प्रोजेक्ट रूट में playwright.config.ts फ़ाइल बनाएं:

import { defineConfig } from '@playwright/test';\n\nexport default defineConfig({\n  testDir: './tests',\n  fullyParallel: true,\n  retries: 1,\n  use: {\n    baseURL: 'http://localhost:3000',\n    trace: 'on-first-retry',\n  },\n  projects: [\n    {\n      name: 'chromium',\n      use: { browserName: 'chromium' },\n    },\n  ],\n});

हमने बेस URL कॉन्फ़िगर किया (इसे अपने एप्लिकेशन के पते से बदलें), डिबगिंग के लिए ट्रेसिंग सक्षम की, और निर्दिष्ट किया कि परीक्षण tests फ़ोल्डर में होंगे।

TypeScript पर पहला E2E परीक्षण लिखना

tests फ़ोल्डर और login.spec.ts फ़ाइल बनाएं। मान लें कि हमारे पास एक सरल लॉगिन फॉर्म है।

import { test, expect } from '@playwright/test';\n\ntest.describe('उपयोगकर्ता प्रमाणीकरण', () => {\n  test('सही डेटा के साथ सफल लॉगिन', async ({ page }) => {\n    // चरण 1: लॉगिन पेज खोलें\n    await page.goto('/login');\n\n    // चरण 2: फ़ील्ड भरें\n    await page.getByLabel('ईमेल').fill('user@example.com');\n    await page.getByLabel('पासवर्ड').fill('securepassword123');\n\n    // चरण 3: "लॉगिन" बटन दबाएं\n    await page.getByRole('button', { name: 'लॉगिन' }).click();\n\n    // चरण 4: डैशबोर्ड पर रीडायरेक्ट की प्रतीक्षा करें\n    awai