विजुअल रिपोर्टर @wdio/visual-service में शुरू की गई एक नई सुविधा है, जो वर्जन v5.2.0 से शुरू हुई है। यह रिपोर्टर उपयोगकर्ताओं को विजुअल टेस्टिंग सेवा द्वारा उत्पन्न JSON डिफ रिपोर्ट को देखने और उन्हें मानव-पठनीय प्रारूप में परिवर्तित करने की अनुमति देता है। यह टीमों को आउटपुट की समीक्षा के लिए एक ग्राफिकल इंटरफेस प्रदान करके विजुअल टेस्टिंग परिणामों का बेहतर विश्लेषण और प्रबंधन करने में मदद करता है।

इस सुविधा का उपयोग करने के लिए, सुनिश्चित करें कि आपके पास आवश्यक output.json फ़ाइल उत्पन्न करने के लिए आवश्यक कॉन्फ़िगरेशन है। यह दस्तावेज़ आपको विजुअल रिपोर्टर की सेटिंग, चलाने और समझने के लिए मार्गदर्शन करेगा।

पूर्वापेक्षाएँ

विजुअल रिपोर्टर का उपयोग करने से पहले, सुनिश्चित करें कि आपने विजुअल टेस्टिंग सेवा को JSON रिपोर्ट फ़ाइलें उत्पन्न करने के लिए कॉन्फ़िगर किया है:

export const config = {
    // ...
    services: [
        [
            "visual",
            {
                createJsonReportFiles: true, // Generates the output.json file
            },
        ],
    ],
};

अधिक विस्तृत सेटअप निर्देशों के लिए, WebdriverIO विजुअल टेस्टिंग डॉक्यूमेंटेशन या createJsonReportFiles देखें

इंस्टॉलेशन

विजुअल रिपोर्टर को इंस्टॉल करने के लिए, इसे npm का उपयोग करके अपने प्रोजेक्ट में एक डेवलपमेंट डिपेंडेंसी के रूप में जोड़ें:

npm install @wdio/visual-reporter --save-dev

यह सुनिश्चित करेगा कि आपके विजुअल टेस्ट से रिपोर्ट उत्पन्न करने के लिए आवश्यक फ़ाइलें उपलब्ध हैं।

उपयोग

विजुअल रिपोर्ट बनाना

जब आप अपने विजुअल टेस्ट चला लेते हैं और वे output.json फ़ाइल उत्पन्न कर देते हैं, तो आप CLI या इंटरैक्टिव प्रॉम्प्ट का उपयोग करके विजुअल रिपोर्ट बना सकते हैं।

CLI उपयोग

आप रिपोर्ट उत्पन्न करने के लिए CLI कमांड का उपयोग कर सकते हैं:

npx wdio-visual-reporter --jsonOutput=<path-to-output.json> --reportFolder=<path-to-store-report> --logLevel=debug

आवश्यक विकल्प:

• --jsonOutput: विजुअल टेस्टिंग सेवा द्वारा उत्पन्न output.json फ़ाइल का रिलेटिव पाथ। यह पाथ उस डायरेक्टरी के संबंध में है जिससे आप कमांड निष्पादित करते हैं।
• --reportFolder: वह रिलेटिव डायरेक्टरी जहां उत्पन्न रिपोर्ट संग्रहीत की जाएगी। यह पाथ भी उस डायरेक्टरी के संबंध में है जिससे आप कमांड निष्पादित करते हैं।

वैकल्पिक विकल्प:

• --logLevel: विस्तृत लॉगिंग के लिए debug पर सेट करें, विशेष रूप से समस्या निवारण के लिए उपयोगी है।

उदाहरण

npx wdio-visual-reporter --jsonOutput=/path/to/output.json --reportFolder=/path/to/report --logLevel=debug

यह निर्दिष्ट फ़ोल्डर में रिपोर्ट उत्पन्न करेगा और कंसोल में प्रतिक्रिया प्रदान करेगा। उदाहरण के लिए:

✔ Build output copied successfully to "/path/to/report".
⠋ Prepare report assets...
✔ Successfully generated the report assets.

रिपोर्ट देखना

चेतावनी

path/to/report/index.html को सीधे ब्राउज़र में लोकल सर्वर से सर्व किए बिना खोलना काम नहीं करेगा।

रिपोर्ट देखने के लिए, आपको sirv-cli जैसे एक सरल सर्वर का उपयोग करने की आवश्यकता है। आप निम्न कमांड के साथ सर्वर शुरू कर सकते हैं:

npx sirv-cli /path/to/report --single

यह नीचे दिए गए उदाहरण के समान लॉग्स प्रदान करेगा। ध्यान दें कि पोर्ट नंबर भिन्न हो सकता है:

  Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

अब आप अपने ब्राउज़र में प्रदान किया गया URL खोलकर रिपोर्ट देख सकते हैं।

इंटरैक्टिव प्रॉम्प्ट का उपयोग

वैकल्पिक रूप से, आप निम्न कमांड चला सकते हैं और रिपोर्ट उत्पन्न करने के लिए प्रॉम्प्ट के उत्तर दे सकते हैं:

npx @wdio/visual-reporter

प्रॉम्प्ट आपको आवश्यक पाथ और विकल्प प्रदान करने के लिए मार्गदर्शन करेंगे। अंत में इंटरैक्टिव प्रॉम्प्ट आपसे पूछेगा कि क्या आप रिपोर्ट देखने के लिए एक सर्वर शुरू करना चाहते हैं। यदि आप सर्वर शुरू करना चुनते हैं, तो टूल एक सरल सर्वर लॉन्च करेगा और लॉग में एक URL प्रदर्शित करेगा। आप इस URL को अपने ब्राउज़र में खोलकर रिपोर्ट देख सकते हैं।

रिपोर्ट देखना

चेतावनी

path/to/report/index.html को सीधे ब्राउज़र में लोकल सर्वर से सर्व किए बिना खोलना काम नहीं करेगा।

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

npx sirv-cli /path/to/report --single

यह नीचे दिए गए उदाहरण के समान लॉग्स प्रदान करेगा। ध्यान दें कि पोर्ट नंबर भिन्न हो सकता है:

  Your application is ready~! 🚀

  - Local:      http://localhost:8080
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

अब आप अपने ब्राउज़र में प्रदान किया गया URL खोलकर रिपोर्ट देख सकते हैं।

रिपोर्ट डेमो

यह देखने के लिए कि रिपोर्ट कैसी दिखती है, हमारे GitHub Pages डेमो पर जाएँ।

विजुअल रिपोर्ट को समझना

विजुअल रिपोर्टर आपके विजुअल टेस्ट परिणामों का एक व्यवस्थित दृश्य प्रदान करता है। प्रत्येक टेस्ट रन के लिए, आप निम्न कार्य कर पाएंगे:

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

यह विजुअल प्रस्तुति आपके टेस्ट परिणामों के विश्लेषण को सरल बनाती है, जिससे विजुअल रिग्रेशन की पहचान करना और उन्हें संबोधित करना आसान हो जाता है।

CI इंटीग्रेशन

हम जेंकिंस, GitHub Actions आदि जैसे विभिन्न CI टूल्स का समर्थन करने पर काम कर रहे हैं। यदि आप हमारी मदद करना चाहते हैं तो कृपया हमसे Discord - Visual Testing पर संपर्क करें।