स्क्रीनशॉट टेस्टिंग, आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) की पुष्टि करने का एक बहुत ही असरदार तरीका है. स्क्रीनशॉट की जांच, कॉम्पोनेंट, सुविधा, और ऐप्लिकेशन की जांच में की जा सकती है.
इंस्ट्रुमेंटेड और लोकल स्क्रीनशॉट टेस्ट, दोनों बनाने के लिए तीसरे पक्ष के टूल का इस्तेमाल किया जा सकता है. Compose का इस्तेमाल करने वाले लोग, Compose की झलक दिखाने वाले स्क्रीनशॉट की जांच करने वाले आधिकारिक टूल का इस्तेमाल कर सकते हैं.
परिभाषा
स्क्रीनशॉट टेस्ट, यूज़र इंटरफ़ेस (यूआई) का स्क्रीनशॉट लेते हैं और उसकी तुलना पहले से मंज़ूरी पा चुकी इमेज से करते हैं. इस इमेज को "रेफ़रंस" या "गोल्डन" कहा जाता है:
अगर इमेज एक जैसी हैं, तो टेस्ट पास हो जाता है. अगर इनमें अंतर है, तो टूल एक रिपोर्ट बनाता है:
इस रिपोर्ट से आपको दो तरह के नतीजे मिल सकते हैं:
- नए कोड में गड़बड़ी का पता लगाएं और उसे ठीक करें.
- नए स्क्रीनशॉट को मंज़ूरी दें और पहचान इमेज को नए स्क्रीनशॉट से बदलें.
स्क्रीनशॉट टेस्ट का वर्कफ़्लो सामान्य टेस्ट से अलग होता है, क्योंकि फ़ेल होने का मतलब हमेशा यह नहीं होता कि कोई गड़बड़ी हुई है.
फ़ायदे
स्क्रीनशॉट टेस्ट के फ़ायदे या स्क्रीनशॉट:
- स्क्रीनशॉट टेस्ट में हर टेस्ट के लिए कई एश्योरेंस किए जाते हैं. उदाहरण के लिए, एक ही जांच में रंग, मार्जिन, साइज़, और फ़ॉन्ट की जांच की जा सकती है.
- स्क्रीनशॉट टेस्ट में लिखना, उसे समझना, और उसे बनाए रखना ज़्यादा आसान होता है.
- ये खास तौर पर तब काम आते हैं, जब अलग-अलग स्क्रीन साइज़ पर, परफ़ॉर्मेंस में गिरावट की पुष्टि करने और उसे ठीक करने की ज़रूरत हो.
नुकसान
हालांकि, स्क्रीनशॉट टेस्ट के कुछ नुकसान भी हैं:
- रेफ़रंस इमेज का इस्तेमाल करना मुश्किल हो सकता है, क्योंकि किसी बड़े प्रोजेक्ट में हज़ारों PNG हो सकते हैं.
- अलग-अलग प्लैटफ़ॉर्म (Linux, Max, और Windows) से थोड़े अलग स्क्रीनशॉट मिलते हैं.
- ये, मिलते-जुलते व्यवहार की जांच से धीमे होते हैं.
- स्क्रीनशॉट की बड़ी संख्या में जांच करने से समस्याएं आ सकती हैं. उदाहरण के लिए, जब किसी एक बदलाव का असर हज़ारों स्क्रीनशॉट पर पड़ता है.
नीचे दिए गए सेक्शन में, इन समस्याओं को हल करने के सुझाव दिए गए हैं.
स्क्रीनशॉट टेस्ट को कम से कम रखें
आपको रिग्रेशन के लिए फ़ीडबैक और कवरेज को बढ़ाते हुए स्क्रीनशॉट टेस्ट की संख्या कम करनी चाहिए.
यूज़र इंटरफ़ेस (यूआई) की अलग-अलग स्थितियों के कॉम्बिनेशन से, टेस्ट की संख्या बहुत तेज़ी से बढ़ सकती है. यहां कुछ ऐसे तरीके बताए गए हैं जिनसे अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के किसी हिस्से की पुष्टि की जा सकती है:
- अलग-अलग थीम पर
- अलग-अलग फ़ॉन्ट साइज़ का इस्तेमाल करना
- अलग-अलग स्क्रीन साइज़ या बॉउंड में
अगर आप अपने ऐप्लिकेशन के हर कॉम्पोनेंट, लेआउट, और स्क्रीन के लिए ऐसा करते हैं, तो आपको हज़ारों स्क्रीनशॉट फ़ाइलें दिखेंगी. इनमें से ज़्यादातर फ़ाइलें, आपको कोई और सुझाव या राय नहीं देंगी.
उदाहरण के लिए, अगर आपको लाइट और डार्क थीम के साथ-साथ तीन फ़ॉन्ट साइज़ वाले कस्टम बटन की जांच करनी है, तो आपको इन सभी का कॉम्बिनेशन बनाने की ज़रूरत नहीं है. इसके बजाय, आपके पास सिर्फ़ एक थीम चुनने का विकल्प है. ऐसा इसलिए है, क्योंकि लंबे शब्दों पर बटन जिस तरह प्रतिक्रिया देता है उसका थीम पर कोई असर नहीं पड़ता.
स्टोर रेफ़रंस इमेज
रेफ़रंस (या गोल्डन) इमेज आम तौर पर PNG फ़ाइलें होती हैं. इन्हें आपके सोर्स कंट्रोल में चेक किया जा सकता है. हालांकि, Git और ज़्यादातर सोर्स कंट्रोल मैनेजर, बड़ी बाइनरी फ़ाइलों के बजाय टेक्स्ट फ़ाइलों के लिए ऑप्टिमाइज़ किए गए हैं.
इन फ़ाइलों को मैनेज करने के लिए, आपके पास ये तीन विकल्प हैं:
- git का इस्तेमाल जारी रखें, लेकिन स्टोरेज के इस्तेमाल को कम करने की कोशिश करें.
- Git LFS का इस्तेमाल करें.
- स्क्रीनशॉट मैनेज करने के लिए, क्लाउड सेवा का इस्तेमाल करें.
प्लैटफ़ॉर्म के बीच अंतर
स्क्रीनशॉट टेस्ट में टेक्स्ट या परछाइयों जैसी खास सुविधाएं तैयार करने के लिए, लो-लेवल प्लैटफ़ॉर्म एपीआई का इस्तेमाल किया जाता है. प्लैटफ़ॉर्म इन्हें अलग-अलग तरीकों से लागू कर सकते हैं. अगर Mac पर डेवलप किया जाता है और लोकल तौर पर लिए गए नए स्क्रीनशॉट सेव किए जाते हैं, तो आपको Linux CI मशीन पर गड़बड़ियों वाले टेस्ट दिख सकते हैं.
इस समस्या को हल करने के दो तरीके हैं:
- छोटे बदलावों को स्वीकार करना
- सर्वर पर स्क्रीनशॉट लेना
छोटे बदलावों को स्वीकार करना
ज़्यादातर स्क्रीनशॉट टेस्टिंग लाइब्रेरी को कॉन्फ़िगर किया जा सकता है, ताकि दो स्क्रीनशॉट की तुलना करते समय, छोटे अंतर को भी अनुमति दी जा सके.
इसके लिए, दो तरीके अपनाए जा सकते हैं:
- बदलाव किए गए पिक्सल के प्रतिशत या पिक्सल वैल्यू में कुल अंतर के प्रतिशत के आधार पर, टॉलरेंस की रेटिंग कॉन्फ़िगर करें.
- पिक्सल के बजाय, स्ट्रक्चरल और सेमेटिक मिलती-जुलती चीज़ों की पुष्टि करने के लिए, स्मार्ट डिफ़र का इस्तेमाल करें. यह एक ऐसा एल्गोरिदम है जो स्क्रीनशॉट की तुलना करता है.
इस तरीके का नुकसान यह है कि इससे फ़ॉल्स पॉज़िटिव और ऐसी गड़बड़ियां नहीं पकड़ी जा सकतीं जो या तो थ्रेशोल्ड से कम हों या जिन्हें गलती से काफ़ी मिलता-जुलता माना गया हो.
सर्वर पर स्क्रीनशॉट लेना
पिक्सल-परफ़ेक्ट स्क्रीनशॉट की तुलना करने वाले टूल का इस्तेमाल करने के लिए, आपको यह पक्का करना होगा कि आपके टेस्ट एक ही स्थिति में स्क्रीनशॉट लें. ऐसा करने के लिए, अपने 'लगातार इंटिग्रेशन' (सीआई) सिस्टम का इस्तेमाल किया जा सकता है या क्लाउड सेवा का इस्तेमाल किया जा सकता है.
उदाहरण के लिए, अपने सीआई वर्कफ़्लो में एक चरण बनाया जा सकता है, जो ये काम करता है:
- स्क्रीनशॉट की जांच करता है. हालांकि, यह सिर्फ़ तब ज़रूरी है, जब पिक्सल-परफ़ेक्ट मैचिंग का इस्तेमाल न किया जा रहा हो.
- पिछला चरण पूरा न होने पर, नए स्क्रीनशॉट रिकॉर्ड किए जाते हैं.
- नई फ़ाइलों को शाखा में कमिट करता है.
इस तरीके का इस्तेमाल करने पर, सीआई पर स्क्रीनशॉट टेस्ट कभी भी फ़ेल नहीं होते. हालांकि, यह आपके लिए बदलाव करता है. इस तरह, बदलाव की समीक्षा करने वाले लोग और आप, बदलाव को मर्ज करके नए स्क्रीनशॉट स्वीकार कर सकते हैं.
स्क्रीनशॉट की जांच करने वाले टूल
स्क्रीनशॉट टेस्टिंग के लिए उपलब्ध टूल और लाइब्रेरी के बीच के मुख्य अंतरों पर ध्यान दें:
- एनवायरमेंट: होस्ट पर चलने वाले लोकल टेस्ट या किसी एम्युलेटर या डिवाइस पर चलने वाले इंस्ट्रूमेंट टेस्ट.
- रेंडरिंग इंजन: होस्ट-साइड स्क्रीनशॉट के समाधान, Layoutlib या Robolectric नेटिव ग्राफ़िक्स (आरएनजी) का इस्तेमाल कर सकते हैं. Layoutlib, Android Studio का रेंडरिंग इंजन है, जिसका इस्तेमाल झलक देखने के लिए किया जाता है.
- Layoutlib पर आधारित फ़्रेमवर्क, स्टैटिक कॉम्पोनेंट को रेंडर करने पर फ़ोकस करते हैं. साथ ही, अलग-अलग व्यवहार दिखाने के लिए अलग-अलग स्टेटस का इस्तेमाल करते हैं. आम तौर पर, इन्हें इस्तेमाल करना आसान होता है.
- आरएनजी के साथ इंटिग्रेट किए गए फ़्रेमवर्क, Robolectric की सभी सुविधाओं का इस्तेमाल कर सकते हैं. इससे बड़े पैमाने पर टेस्ट किए जा सकते हैं.