कंपोनेंट टेस्टिंग

WebdriverIO के ब्राउज़र रनर के साथ आप एक वास्तविक डेस्कटॉप या मोबाइल ब्राउज़र में परीक्षण चला सकते हैं, जबकि WebdriverIO और WebDriver प्रोटोकॉल का उपयोग करके स्वचालित कर सकते हैं और जो पृष्ठ पर प्रदर्शित होता है, उसके साथ इंटरैक्ट कर सकते हैं। इस दृष्टिकोण में अन्य परीक्षण फ्रेमवर्क की तुलना में कई फायदे हैं जो केवल JSDOM के खिलाफ परीक्षण की अनुमति देते हैं।

यह कैसे काम करता है?

ब्राउज़र रनर एक टेस्ट पेज को रेंडर करने और ब्राउज़र में आपके परीक्षणों को चलाने के लिए एक टेस्ट फ्रेमवर्क को आरंभ करने के लिए Vite का उपयोग करता है। वर्तमान में यह केवल Mocha का समर्थन करता है, लेकिन Jasmine और Cucumber रोडमैप पर हैं। यह किसी भी प्रकार के कंपोनेंट का परीक्षण करने की अनुमति देता है, यहां तक कि उन प्रोजेक्ट्स के लिए भी जो Vite का उपयोग नहीं करते हैं।

WebdriverIO टेस्टरनर द्वारा Vite सर्वर शुरू किया जाता है और इस तरह से कॉन्फ़िगर किया जाता है कि आप सभी रिपोर्टर और सेवाओं का उपयोग कर सकें जैसे कि आप सामान्य e2e परीक्षणों के लिए उपयोग करते थे। इसके अलावा यह एक browser इंस्टेंस को आरंभ करता है जो आपको WebdriverIO API के एक सबसेट तक पहुंचने की अनुमति देता है ताकि आप पृष्ठ पर किसी भी तत्व के साथ इंटरैक्ट कर सकें। e2e परीक्षणों के समान आप उस इंस्टेंस तक ग्लोबल स्कोप से जुड़े browser वेरिएबल के माध्यम से या @wdio/globals से इम्पोर्ट करके पहुंच सकते हैं, यह injectGlobals की सेटिंग पर निर्भर करता है।

WebdriverIO में निम्नलिखित फ्रेमवर्क के लिए अंतर्निहित समर्थन है:

• Nuxt: WebdriverIO का टेस्टरनर एक Nuxt एप्लिकेशन का पता लगाता है और स्वचालित रूप से आपके प्रोजेक्ट कंपोजेबल्स को सेट करता है और Nuxt बैकएंड को मॉक करने में मदद करता है, अधिक जानकारी के लिए Nuxt डॉक्स पढ़ें
• TailwindCSS: WebdriverIO का टेस्टरनर पता लगाता है कि क्या आप TailwindCSS का उपयोग कर रहे हैं और परीक्षण पृष्ठ में वातावरण को ठीक से लोड करता है

सेटअप

ब्राउज़र में यूनिट या कंपोनेंट टेस्टिंग के लिए WebdriverIO को सेट अप करने के लिए, एक नया WebdriverIO प्रोजेक्ट शुरू करें:

npm init wdio@latest ./
# या
yarn create wdio ./

एक बार कॉन्फ़िगरेशन विजार्ड शुरू हो जाता है, यूनिट और कंपोनेंट टेस्टिंग चलाने के लिए browser चुनें और यदि वांछित हो तो प्रीसेट में से एक चुनें, अन्यथा यदि आप केवल बेसिक यूनिट टेस्ट चलाना चाहते हैं तो "Other" के साथ जाएं। यदि आप अपने प्रोजेक्ट में पहले से ही Vite का उपयोग करते हैं तो आप एक कस्टम Vite कॉन्फ़िगरेशन भी कॉन्फ़िगर कर सकते हैं। अधिक जानकारी के लिए सभी रनर विकल्प देखें।

जानकारी

नोट: WebdriverIO डिफॉल्ट रूप से CI में ब्राउज़र टेस्ट हेडलेसली चलाएगा, जैसे CI पर्यावरण वेरिएबल '1' या 'true' पर सेट है। आप रनर के लिए headless विकल्प का उपयोग करके इस व्यवहार को मैन्युअल रूप से कॉन्फ़िगर कर सकते हैं।

इस प्रक्रिया के अंत में आपको एक wdio.conf.js मिलना चाहिए जिसमें विभिन्न WebdriverIO कॉन्फ़िगरेशन हैं, जिसमें एक runner प्रॉपर्टी भी शामिल है, उदाहरण के लिए:

wdio.comp.conf.js

loading...

View on GitHub

विभिन्न capabilities को परिभाषित करके आप अपने परीक्षणों को अलग-अलग ब्राउज़रों में, यदि चाहें तो समानांतर रूप से चला सकते हैं।

अगर आप अभी भी अनिश्चित हैं कि सब कुछ कैसे काम करता है, तो WebdriverIO में कंपोनेंट टेस्टिंग के साथ शुरुआत कैसे करें, इस पर निम्नलिखित ट्यूटोरियल देखें:

टेस्ट हार्नेस

यह पूरी तरह से आप पर निर्भर है कि आप अपने परीक्षणों में क्या चलाना चाहते हैं और आप कंपोनेंट्स को कैसे रेंडर करना चाहते हैं। हालांकि हम Testing Library को यूटिलिटी फ्रेमवर्क के रूप में उपयोग करने की सलाह देते हैं क्योंकि यह विभिन्न कंपोनेंट फ्रेमवर्क जैसे React, Preact, Svelte और Vue के लिए प्लगइन प्रदान करता है। यह टेस्ट पेज में कंपोनेंट्स को रेंडर करने के लिए बहुत उपयोगी है और यह स्वचालित रूप से हर परीक्षण के बाद इन कंपोनेंट्स को साफ कर देता है।

आप Testing Library प्रिमिटिव्स को WebdriverIO कमांड्स के साथ जैसा चाहें मिला सकते हैं, उदाहरण के लिए:

component-testing/svelte-example.js

loading...

View on GitHub

नोट: Testing Library से रेंडर मेथड्स का उपयोग करना परीक्षणों के बीच बनाए गए कंपोनेंट्स को हटाने में मदद करता है। यदि आप Testing Library का उपयोग नहीं करते हैं तो सुनिश्चित करें कि आप अपने टेस्ट कंपोनेंट्स को ऐसे कंटेनर से जोड़ें जो परीक्षणों के बीच साफ हो जाए।

सेटअप स्क्रिप्ट्स

आप Node.js या ब्राउज़र में मनमाने ढंग से स्क्रिप्ट चलाकर अपने परीक्षणों को सेट अप कर सकते हैं, जैसे स्टाइल इंजेक्ट करना, ब्राउज़र API को मॉक करना या किसी तीसरे पक्ष की सेवा से कनेक्ट करना। WebdriverIO hooks का उपयोग Node.js में कोड चलाने के लिए किया जा सकता है, जबकि mochaOpts.require आपको परीक्षण लोड होने से पहले ब्राउज़र में स्क्रिप्ट इम्पोर्ट करने की अनुमति देता है, उदाहरण के लिए:

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // ब्राउज़र में चलाने के लिए एक सेटअप स्क्रिप्ट प्रदान करें
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // Node.js में टेस्ट एनवायरमेंट सेट करें
    }
    // ...
}

उदाहरण के लिए, अगर आप अपने परीक्षण में सभी fetch() कॉल को निम्नलिखित सेटअप स्क्रिप्ट के साथ मॉक करना चाहते हैं:

import { fn } from '@wdio/browser-runner'

// सभी परीक्षणों के लोड होने से पहले कोड चलाएं
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // टेस्ट फाइल लोड होने के बाद कोड चलाएं
}

export const mochaGlobalTeardown = () => {
    // स्पेक फाइल निष्पादित होने के बाद कोड चलाएं
}

अब आप अपने परीक्षणों में सभी ब्राउज़र अनुरोधों के लिए कस्टम प्रतिक्रिया मान प्रदान कर सकते हैं। ग्लोबल फिक्स्चर के बारे में अधिक जानकारी के लिए Mocha डॉक्स पढ़ें।

टेस्ट और एप्लिकेशन फाइलों को वॉच करें

आप अपने ब्राउज़र टेस्ट को डीबग करने के कई तरीके हैं। सबसे आसान तरीका है WebdriverIO टेस्टरनर को --watch फ्लैग के साथ शुरू करना, उदाहरण के लिए:

$ npx wdio run ./wdio.conf.js --watch

यह शुरू में सभी परीक्षणों के माध्यम से चलेगा और एक बार सभी चल जाने पर रुक जाएगा। फिर आप व्यक्तिगत फाइलों में परिवर्तन कर सकते हैं जिन्हें फिर से अलग-अलग चलाया जाएगा। यदि आप filesToWatch को अपनी एप्लिकेशन फाइलों की ओर इशारा करते हुए सेट करते हैं, तो जब आपके ऐप में परिवर्तन किए जाते हैं, तो यह सभी परीक्षणों को फिर से चलाएगा।

डीबगिंग

हालांकि आपके IDE में ब्रेकपॉइंट सेट करना और उन्हें रिमोट ब्राउज़र द्वारा पहचाना जाना (अभी तक) संभव नहीं है, आप परीक्षण को किसी भी बिंदु पर रोकने के लिए debug कमांड का उपयोग कर सकते हैं। यह आपको DevTools खोलने की अनुमति देता है और फिर सोर्स टैब में ब्रेकपॉइंट सेट करके परीक्षण को डीबग कर सकते हैं।

जब debug कमांड कॉल की जाती है, तो आपको अपने टर्मिनल में एक Node.js repl इंटरफ़ेस भी मिलेगा, जो कहता है:

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

परीक्षण जारी रखने के लिए Ctrl या Command + c दबाएं या .exit दर्ज करें।

सेलेनियम ग्रिड का उपयोग करके चलाएं

यदि आपके पास सेलेनियम ग्रिड सेट अप है और आप अपने ब्राउज़र को उस ग्रिड के माध्यम से चलाते हैं, तो आपको ब्राउज़र रनर विकल्प host सेट करना होगा ताकि ब्राउज़र सही होस्ट तक पहुंच सके जहां टेस्ट फाइलें सर्व की जा रही हैं, उदाहरण के लिए:

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // उस मशीन का नेटवर्क IP जो WebdriverIO प्रोसेस चलाता है
        host: 'http://172.168.0.2'
    }]
}

यह सुनिश्चित करेगा कि ब्राउज़र उस इंस्टेंस पर होस्ट किए गए सही सर्वर इंस्टेंस को सही ढंग से खोलता है जो WebdriverIO परीक्षण चलाता है।

उदाहरण

आप हमारे example repository में लोकप्रिय कंपोनेंट फ्रेमवर्क का उपयोग करके कंपोनेंट्स का परीक्षण करने के लिए विभिन्न उदाहरण पा सकते हैं।