टेस्ट लेआउट? आसान

यह लेख अन्ना अन्ना-चे और केनेसिया केमिश द्वारा तैयार किया गया था।

उन कारणों में से एक है कि हमने सक्रिय रूप से लेआउट्स का परीक्षण किया, हमेशा की तरह, एक रेक। हमने एक बग पर कदम रखा जो क्रोम के अगले अपडेट के बाद दिखाई देने लगा। यह पता चला कि 3 घंटे के भीतर, उपयोगकर्ता हमारे इंटरनेट बैंक के व्यक्तिगत खाते के माध्यम से खाते से धनराशि स्थानांतरित नहीं कर सकते हैं। और सभी इस तथ्य के कारण कि ब्राउज़र के नए संस्करण में धन को एक खाते से दूसरे खाते में स्थानांतरित करने का रूप खिड़की से बाहर निकल गया है।

इसी तरह के कीड़े हानिरहित हैं। उदाहरण के लिए, एक प्रसिद्ध कपड़ों का ब्रांड भी इस रेक में आया। अपर्याप्त लेआउट परीक्षण के कारण, "अधिक जानें" बटन के बजाय, इस ब्रांड की साइट के उपयोगकर्ताओं ने लंबे समय तक "दर्द जानें ..." देखा है।


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

इन समस्याओं से सावधान, हमने अपने उत्पाद डिजाइनरों द्वारा अनिवार्य डिजाइन समीक्षा का अभ्यास लागू किया, लेकिन यह वहां नहीं था। यह पता चला कि सभी टीमों के पास एक समर्पित डिजाइनर नहीं है, या उनके पास पर्याप्त समय नहीं है, या इससे भी बदतर, सामने और डिजाइनर एक पृष्ठ, रूप या तत्व के लेआउट के लिए एक सामान्य दृष्टिकोण में नहीं आ सकते हैं।

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

हमारे बारे में संक्षेप में:
अब हम एक एकल उत्पाद विकसित कर रहे हैं, जिस पर 20 से अधिक स्क्रैम टीमें काम कर रही हैं, जिनमें से प्रत्येक एक निश्चित कार्यक्षमता के लिए जिम्मेदार है, जबकि हम स्वयं उत्पाद की एक शैली और डिजाइन बनाए रखने की कोशिश करते हैं - दृश्य प्रस्तुति, मुख्य तत्वों का लेआउट, आदि।

ब्राउज़र द्वारा उपयोगकर्ताओं के वितरण के बारे में, आज हमारे उपयोगकर्ता उपयोग करते हैं (मान गोल हैं):

• 60% क्रोम
• 30% - फ़ायरफ़ॉक्स,
• 10% - अन्य ब्राउज़र।

हम अपने अकिता बीडीडी-फ्रेमवर्क (जावा + ककड़ी + सेलेनाइड) की मदद से कार्यक्षमता का परीक्षण करते हैं, हमने यहां इसके बारे में लिखा था।

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

वे एक गैलन-कल्पना फ़ाइल में उनकी व्यवस्था का वर्णन करते हैं।

गैलन-कल्पना क्या है?

लेआउट परीक्षण को स्वचालित करने और इस प्रकार दोषों की संख्या को कम करने के लिए, हमने गैलेन फ्रेमवर्क टूल को लागू करने का निर्णय लिया। यह सिर्फ एक .spec फ़ाइल पर आधारित है (विनिर्देशन या, जैसा कि हमने कहा, "अनुबंध")। और यह आसानी से सेलेनियम परीक्षणों के साथ एकीकृत होता है।

डिजाइनर और सामने के बाद "कॉन्ट्रैक्ट" को आकर्षित किया, परीक्षक ने गैलन की आवश्यकताओं के अनुसार, इसके आधार पर एक .spec फ़ाइल बनाई। सत्यापन विनिर्देशों को लिखने के लिए फ्रेमवर्क अपनी भाषा का उपयोग करता है।

.Spec फ़ाइल में क्या होता है?

तार्किक रूप से, इसे दो भागों में विभाजित किया जा सकता है:

1. वस्तु परिभाषाएँ

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


@objects - पृष्ठ पर तत्व (आप CSS, XPATH, ID का उपयोग कर सकते हैं)

2. जब लोकेटर परिभाषित किए जाते हैं, तो विशिष्ट वस्तुओं की शैलियों और विशिष्टताओं को परिभाषित किया जाना चाहिए। इसके लिए, हम ऑब्जेक्ट स्पेक्स विनिर्देश के हिस्से का उपयोग करते हैं, जहां हम विस्तार से वर्णन करते हैं, उदाहरण के लिए, कि हमारा टेक्स्ट ब्लॉक (विवरण-पाठ) हेडर के नीचे विवरण फॉर्म के अंदर स्थित है, और इसमें कुछ पाठ शामिल हैं।


मुख्य भाग - प्रत्येक वर्णित तत्व के लिए, @objects सत्यापन मापदंडों का वर्णन करता है।

* मुख्य भाग में इंडेंटेशन के लिए गैलन कल्पना भाषा संवेदनशील है, इसलिए इस पर विशेष ध्यान दें और टैब का निरीक्षण करें :)

इस प्रकार, "अनुबंध", सामने और डिजाइनर के बीच संपन्न हुआ और गैलन भाषा में स्थानांतरित किया गया, जो हमें तत्वों की स्थिति और आंतरिक सामग्री, साथ ही अनुकूलनशीलता और क्रॉस-ब्राउज़र संगतता की जांच करने की अनुमति देता है।

त्वरित प्रारंभ उदाहरण

1. हम एक विशिष्ट पृष्ठ के तत्वों का वर्णन करते हैं और गैलन स्पेक भाषा का उपयोग करते हुए .spec फाइलों में जांच करते हैं और पैकेज में चश्मा लगाते हैं।
2. हम चश्मे / इमेज पैकेज में संदर्भ स्क्रीनशॉट जोड़ते हैं
3. हम BDD पर काम कर रहे हैं, इसलिए .feature फ़ाइल में स्क्रिप्ट कुछ इस तरह दिख सकती है:
   
   
   
4. सामान्य ककड़ी धावक के माध्यम से परीक्षण स्क्रिप्ट चलाएँ।

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

रिपोर्ट में अंतर इस प्रकार है:


त्रुटि = त्रुटि {[तत्व की तरह नहीं दिखता है "./akita-testing-template/src/test/resources/specs/images/registration-form.png"। 10.47% बेमेल पिक्स हैं लेकिन अधिकतम अनुमत 10% है]

यहां हम देखते हैं कि चेक विफल हो गया, चित्र 10% से अधिक और इन सभी रंग अंतरों से भिन्न होते हैं, केवल काले भरण को छोड़कर, यह तत्वों के बीच का अंतर है।

यदि तत्व पूरी तरह से समान हैं, तो अंतर काले रंग में प्रदर्शित किया जाएगा।

सबसे आम सवाल है, मुझे एक संदर्भ स्क्रीनशॉट कहां मिल सकता है?

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

हम इस दृष्टिकोण का उपयोग करने के लिए क्या आए हैं

• इस तथ्य के कारण धूम्रपान परीक्षणों की संख्या और उनके समय को लगभग 20% तक कम करने में कामयाब रहे क्योंकि कुछ रूपों और समान तत्वों के सत्यापन को एक परीक्षण में ढह गया था, जो उनके दृश्य घटक की जांच करता है और तुरंत विसंगतियों का खुलासा करता है
• अब हम यह सुनिश्चित कर सकते हैं कि हमारे एप्लिकेशन चयनित ब्राउज़र में सही तरीके से प्रदर्शित किए गए हैं
• पता है कि अनुकूलन क्षमता ठीक है और जुदा नहीं है
• एक स्वचालित डिजाइन की समीक्षा के लिए आया था।

आप गैलन-कल्पना फ़ाइलों के संकलन पर प्रलेखन यहाँ पढ़ सकते हैं - गैलन-कल्पना-भाषा-गाइड ।

हमने पिछले सेलेनियम शिविर में गैलन फ्रेमवर्क, इसकी क्षमताओं और बुनियादी जांच के साथ काम करने के तकनीकी पहलुओं के बारे में बात की थी, और हम ब्लॉग पर लिखेंगे।

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

और हम जवाब देंगे।