एन अंतर खोजें। Tinkoff.ru लेआउट परीक्षण का अनुभव

लेख अलेक्जेंडर कोचेतकोव और क्रैस स्नेजना की ओर से प्रकाशित किया गया है।

10 सेकंड में आपको कितने अंतर मिलेंगे?



हमारे परीक्षक को सभी अंतर मिलेंगे। और वो भी जो दिखाई नहीं दे रहे हैं। नीचे मैं इस बारे में बात करूंगा कि वह यह कैसे करेगा, लेकिन पहले मैं आपको चीजों के पाठ्यक्रम से परिचित कराऊंगा।

हमारी कंपनी विभिन्न वेब एप्लिकेशन विकसित कर रही है। उदाहरण के लिए एक अमीर यूआई, कई सौ पृष्ठों, सभी लोकप्रिय ब्राउज़रों के लिए संवेदनशील लेआउट और समर्थन के साथ एक विशिष्ट क्लाइंट वेब एप्लिकेशन लें। इस परिदृश्य में, मौजूदा UI का प्रतिगमन परीक्षण AD में बदल जाता है और बहुत समय लगता है। पागल होने और इस दलदल में नहीं जाने के क्रम में, हमने इस प्रक्रिया को स्वचालित किया और एक नया उपकरण बनाया - QVisual ।

कोई व्यक्ति लेआउट (UI) का परीक्षण कैसे करता है? वह वर्तमान कार्यान्वयन लेता है और इसकी तुलना अपने स्वयं के अनुभव, सुविधा और पहले देखे गए हजारों वेब पृष्ठों के आधार पर निर्मित एक अमूर्त मानक से करता है। परीक्षण के लिए अपने स्वयं के AI लिखने के लिए, निश्चित रूप से, बहुत अच्छा होगा। लेकिन यह आइडिया गौरैया पर तोप से गोली चलाने जैसा लगता है। इसलिए, हमने इसे आसान किया: एक संदर्भ के रूप में, हमने पहले ही एक व्यक्ति द्वारा सत्यापित उसी पृष्ठ को स्वीकार करना शुरू कर दिया (ज्यादातर मामलों में यह पिछले सफल रिलीज से एक पृष्ठ है)। इस प्रकार, दो पृष्ठों की तुलना करने के लिए पूरा कार्य नीचे आया।

बेशक, कई समाधान पहले से ही प्रकाशित किए गए हैं जो आपको पिक्सेल द्वारा दो छवियों पिक्सेल की तुलना करने की अनुमति देते हैं। हमने "दूसरी बाइक" क्यों लिखी? उत्तर सरल है - हम खुद को पिक्सेल-दर-पिक्सेल तुलना तक सीमित नहीं करना चाहते थे, हम एक पृष्ठ पर व्यक्तिगत ब्लॉकों की तुलना करने में सक्षम होना चाहते थे और इन ब्लॉकों की संख्या और प्रकार के अंतर पर एक सार्थक रिपोर्ट प्राप्त कर सकते थे। इसलिए, हमने जो उपकरण लागू किया है वह न केवल चित्रों की तुलना कर सकता है, बल्कि यदि आवश्यक हो, तो व्यक्तिगत पृष्ठ तत्व भी। इसलिए हम दो पृष्ठों से स्क्रीनशॉट के साथ नहीं, बल्कि इन पृष्ठों के स्नैपशॉट के साथ काम करते हैं।

दृष्टिकोण के लाभ

एक स्नैपशॉट इस पृष्ठ पर कुछ वेब तत्वों की शैलियों और गुणों पर संपूर्ण पृष्ठ प्लस डेटा का एक स्क्रीनशॉट है। हम एक खुली एपीआई के साथ एक सर्वर अनुप्रयोग के साथ स्नैपशॉट में अंतर की खोज को लागू करते हैं।

दृष्टिकोण: तत्वों की तुलना, चित्रों की नहीं, हमें विशिष्ट त्रुटियों को उजागर करने की अनुमति देता है, जैसे:

• छवि - पृष्ठ पर मौजूद तत्व मानक के तत्व के अनुरूप नहीं है;
• MOVED - ऑफसेट तत्व, तत्व संदर्भ के समान है, लेकिन विभिन्न निर्देशांक के साथ;
• अनुमानित - एक ऑफसेट के समान, लेकिन तत्व की स्थिति के बजाय, इसका आकार अलग है;
• पाठ - पाठ में त्रुटियां;
• CSS और ATTRIBUTES - शैलियों और विशेषताओं में अंतर हमेशा दृष्टिगत नहीं होता है और हमेशा गलती नहीं होती है। लेकिन उनमें परिवर्तन को नियंत्रित करने के लिए काफी उपयोगी है, क्योंकि कुछ मामलों में यह उनके साथ जुड़ी त्रुटियों को खोजने में मदद करता है।

कई सामान्य त्रुटियों के साथ उदाहरणों का एक छोटा विश्लेषण:

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

आप अपने स्वयं के उपकरणों का उपयोग करके पृष्ठ से स्नैपशॉट को निकाल सकते हैं, और आप दो साधारण POST अनुरोधों के साथ सर्वर के लिए एक स्क्रीनशॉट और डेटा को सर्वर पर स्थानांतरित कर सकते हैं।
यदि आपके परीक्षण जावा में लिखे गए हैं, तो इन उद्देश्यों के लिए हमारी लाइब्रेरी का उपयोग करना आसान होगा, जो स्वयं स्नैपशॉट बनाने और सर्वर पर डेटा स्थानांतरित करने का ध्यान रखेगा।
शुरू करने से पहले, आपको कई चर (सर्वर पता, ब्राउज़र प्रकार और संस्करण, आदि) निर्दिष्ट करने की आवश्यकता होगी। परीक्षण में ही, आपको उस पृष्ठ का पता निर्दिष्ट करना होगा जिसमें से आप स्नैपशॉट लेना चाहते हैं, और हमारे द्वारा आवश्यक तत्वों के लिए खोज करने के लिए Xpath या CSS प्रारूप में लोकेटरों की एक सूची (वैकल्पिक)। बस इतना ही!

लाइब्रेरी के अंदर, हम स्नैपशॉट लेने के लिए सेलेनियम वेबड्राइवर की आंतरिक कमांड और जावास्क्रिप्ट स्क्रिप्ट का उपयोग करते हैं। वेबड्राइवर के आंतरिक कमांड आपको पृष्ठ के स्क्रीनशॉट (बिना ग्लूइंग और स्क्रॉल किए) और जेएस - आवश्यक तत्वों को खोजने और स्नैपशॉट में उनके बारे में डेटा जोड़ने की अनुमति देते हैं। स्नैपशॉट को हटाने के बाद, हम इसे अपने सर्वर एप्लिकेशन पर स्थानांतरित करते हैं, जो मोंगो में तत्वों के बारे में डेटा को बचाएगा, और सर्वर की डिस्क पर स्वयं स्क्रीनशॉट। अब इस स्नैपशॉट की तुलना मानक के साथ की जा सकती है। एलिमेंट डेटा की तुलना रेगुलर ऑब्जेक्ट्स और स्क्रीनशॉट्स से की जाएगी - पिक्सेल द्वारा OpenCV का उपयोग करके।
अब आप दो स्नैपशॉट की तुलना करने पर एक रिपोर्ट प्राप्त कर सकते हैं। ऐसा करने के लिए, आपको एक GET अनुरोध भेजने और प्रतिक्रिया में JSON के रूप में तुलना के बारे में डेटा प्राप्त करने की आवश्यकता है, या हमारे फ्रंट-एंड एप्लिकेशन का उपयोग करें, जो एक विस्तृत और सबसे महत्वपूर्ण रूप से आसानी से पढ़ने योग्य रिपोर्ट का निर्माण करेगा।

और रिपोर्ट का क्या?

रिपोर्ट के मुख्य पृष्ठ में सफलतापूर्वक उत्तीर्ण और अनुत्तीर्ण परीक्षणों (लाल रंग में हाइलाइट) और तीन सूचियों में शामिल जानकारी है:

• परीक्षण (कहानी) की सूची जिसमें लेआउट की जाँच की गई थी। यहाँ, सुविधा के लिए, परीक्षणों के नाम उन पृष्ठों के यूआरएल से मेल खाते हैं जिनसे स्नैपशॉट लिया गया था;
• राज्यों (राज्य) की सूची - प्रत्येक कहानी में कई राज्य हो सकते हैं, उदाहरण के लिए, फॉर्म भरने से पहले और उसके बाद का स्क्रीनशॉट। प्रत्येक राज्य में विभिन्न ब्राउज़र रिज़ॉल्यूशन और संस्करणों में कई स्नैपशॉट हो सकते हैं;
• विभिन्न ब्राउज़रों और अनुमतियों और संक्षिप्त आंकड़ों के साथ सूची।

ऊपरी हिस्से में आइकन हैं जो आपको पिक्सेल-बाय-पिक्सेल तुलना में त्रुटियों के प्रकार और प्रतिशत विसंगति के आधार पर परिणामों को फ़िल्टर करने की अनुमति देते हैं। यह कार्यान्वयन त्रुटि सत्यापन को गति देता है।



अंतिम सूची के ब्लॉक में संक्षिप्त आंकड़ों में तीन पैरामीटर हैं:

• पिक्सल - पूरे पृष्ठ के आकार के सापेक्ष प्रतिशत में दो छवियों के बीच का अंतर;
• तत्व - विभिन्न तत्वों की संख्या (उन लोगों से जो परीक्षण में पारित किए गए स्थानीय लोगों द्वारा पाए गए थे);
• त्रुटि - आंतरिक त्रुटियां जो स्नैपशॉट्स की तुलना करते समय हुई थीं (उदाहरण के लिए, कोई भी चित्र तुलना के लिए नहीं मिला था, या स्नैपशॉट पर कोई डेटा नहीं है)।

प्रत्येक पृष्ठ की रिपोर्ट में दो अलग-अलग स्क्रीनशॉट और तत्वों के स्ट्रोक हैं जिनमें अंतर पाया गया था। विभिन्न तत्वों पर मँडराते समय पॉप-अप पाठ त्रुटि के प्रकार और लोकेटर को इंगित करता है जिसके द्वारा तत्व पाया गया था। आप त्रुटि प्रकार द्वारा फ़िल्टरिंग भी सेट कर सकते हैं, एक स्क्रीनशॉट छिपा सकते हैं और पिक्सेल-बाय-पिक्सेल तुलना के परिणाम को सक्षम / अक्षम कर सकते हैं।



जैसा कि ऊपर उल्लेख किया गया है, हम पिक्सेल द्वारा स्क्रीनशॉट पिक्सेल की तुलना भी करते हैं, जो कुछ कार्यों के लिए बहुत प्रभावी है। उदाहरण के लिए, अस्थिर डोम वाले नए पृष्ठों के लिए, यह समय लिखने और लोकेटरों को बनाए रखने के लिए कोई मतलब नहीं है।



अंत में, मैं कंपनी के लिए इस उपकरण के वास्तविक निकास के बारे में कहना चाहता हूं: हर दिन QVisual हमारे परीक्षकों को अनुप्रयोगों के लेआउट में सभी परिवर्तनों के बराबर रखने में मदद करता है। हम स्वचालित रूप से स्क्रीनशॉट बनाकर (6 स्क्रीन रिज़ॉल्यूशन में 3 ब्राउज़रों में 1500+ लैंडिंग तक) लैंडिंग की तुलना करने में बहुत समय बचाते हैं।

PS । यह हमारे टूल का एक संक्षिप्त अवलोकन है। आप GitHub पर अधिक जानकारी प्राप्त कर सकते हैं, साथ ही टूल के विकास में भाग ले सकते हैं।

PPS उन लोगों के लिए जो स्वयं का परीक्षण करना चाहते हैं - हेडर से चित्र में ये सभी अंतर हैं:



टेलीग्राम टूल सपोर्ट चैनल: t.me/qvisual