स्क्रीनशॉट कैप्चर के साथ विज़ुअल रिग्रेशन टेस्टिंग
डेव टीमें Webshot का उपयोग उन बग्स को पकड़ने के लिए करती हैं जिन्हें यूनिट टेस्ट पकड़ नहीं पाते - जैसे लेआउट का टूटना, फ़ॉन्ट फ़ॉलबैक, गायब आइकन, टूटी हुई रिस्पॉन्सिव स्थितियाँ। स्टेजिंग को कैप्चर करें, प्रोडक्शन को कैप्चर करें, और दोनों का अंतर निकालें। इस अंतर को एक PR कमेंट में डालें यह साबित करने के लिए कि आपका बदलाव सुरक्षित है (या यह साबित करने के लिए कि एक नया बग अभी-अभी आया है)।
सभी बटन पहले से कॉन्फ़िगर किए गए कैप्चर फ़ॉर्म को खोलते हैं। पेज लोड होने के बाद आप प्रारूप और व्यूपोर्ट बदल सकते हैं।
इसके लिए Webshot क्यों
पिक्सेल-सटीक कैप्चर
PNG मोड टेक्स्ट और किनारों को स्पष्ट बनाए रखता है - जो पिक्सेल-डिफिंग टूल (`pixelmatch`, ImageMagick `compare`) के लिए आदर्श है, जहाँ JPG कम्प्रेशन का शोर गलत पॉजिटिव परिणाम दे सकता है।
हर बार समान व्यूपोर्ट
Webshot हर रन पर बिल्कुल समान व्यूपोर्ट, स्क्रॉल स्थिति और फ़ॉन्ट-लोडिंग प्रतीक्षा समय पर कैप्चर करता है - जिससे अंतर के परिणाम विश्वसनीय होते हैं।
API-अनुकूल
मुफ्त Webshot API को अपने CI से जोड़ें: प्री-डिप्लॉय और पोस्ट-डिप्लॉय कैप्चर करें, `pixelmatch` के साथ अंतर निकालें, और यदि बदले हुए पिक्सेल थ्रेसहोल्ड से अधिक हैं तो बिल्ड को विफल करें।
कोई हेडलेस-Chrome बॉयलरप्लेट नहीं
Puppeteer सेटअप, फ़ॉन्ट इंस्टॉलेशन, सैंडबॉक्स फ़्लैग्स को छोड़ दें। Webshot ने यह सब हमारे इंफ्रा पर चालू कर रखा है। आपका CI बस एक HTTP कॉल करता है।
विज़ुअल रिग्रेशन टेस्टिंग कैसे कैप्चर करें
- उन पेजों को चुनें जिनकी आप निगरानी करना चाहते हैं - होमपेज, मुख्य लैंडिंग पेज, चेकआउट फ्लो, या कहीं भी जहाँ एक रिग्रेशन नुकसान पहुँचा सकता है।
- अपने वर्तमान प्रोडक्शन लुक को बेसलाइन करने के लिए प्रत्येक को PNG + डेस्कटॉप_फुल + मोबाइल_फुल पर कैप्चर करें।
- अपने अगले डिप्लॉय के बाद, उन्हीं URLs को फिर से कैप्चर करें। `pixelmatch` या ImageMagick के साथ पुराने बनाम नए का अंतर निकालें - 1% से अधिक पिक्सेल परिवर्तन पर मानवीय समीक्षा की आवश्यकता होती है।
- इसे CI में जोड़ें: एक प्री-डिप्लॉय हुक स्टेजिंग को कैप्चर करता है, एक पोस्ट-डिप्लॉय हुक प्रोडक्शन को कैप्चर करता है, और यदि अंतर आपके थ्रेसहोल्ड से अधिक हो जाता है तो बिल्ड विफल हो जाता है।
अक्सर पूछे जाने वाले प्रश्न
कैप्चर करने के लिए तैयार हैं?
मुफ़्त, कोई साइनअप नहीं, कोई वॉटरमार्क नहीं। बस एक URL पेस्ट करें।
📸 कैप्चर फ़ॉर्म खोलेंअन्य उपयोग के मामले: Google Maps स्क्रीनशॉट · WordPress स्क्रीनशॉट · लैंडिंग पेज QA · कानूनी साक्ष्य स्क्रीनशॉट · सोशल मीडिया स्क्रीनशॉट · डेवलपर वर्कफ़्लो स्क्रीनशॉट · सभी देखें →