जावा + सेलेनियम वेबड्राइवर + शोथ में दृश्य प्रतिगमन परीक्षण के लिए सरल समाधान

नमस्ते

मैंने पहले ही दृश्य प्रतिगमन परीक्षण को स्वचालित करने के अपने अनुभव के बारे में एक लेख प्रकाशित किया है।

तब से, परियोजना में काफी सुधार किया गया है - संरचना बदल गई है, परियोजना को स्थापित करना और ऑटोटेस्ट लिखना शुरू करना बहुत आसान हो गया है, रिपोर्ट में काफी सुधार हुआ है।



VisualRegressionFramework छोटी परियोजनाओं के लिए एक काफी सरल उपाय है। मैं जिस प्रोजेक्ट के साथ काम कर रहा हूं, उसके लिए लगभग 50 ऑटोटेस्टर्स (पृष्ठ + तत्व) लिखे गए थे।

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

तकनीक का इस्तेमाल किया - जावा, टेस्टएनजी, मावेन, सेलेनियम वेबड्राइवर ,शॉट (छवियों की तुलना करने के लिए पुस्तकालय)।

विशेषताएं:

• पृष्ठों के स्क्रीनशॉट की तुलना करें
• पृष्ठ स्क्रीनशॉट की तुलना + निर्दिष्ट तत्वों की अनदेखी (गतिशील सामग्री, आदि)
• वस्तुओं के स्क्रीनशॉट की तुलना करें
• ब्रेकप्वाइंट - आप विभिन्न चौड़ाई वाले पृष्ठों या तत्वों के स्क्रीनशॉट की तुलना कर सकते हैं। डिफ़ॉल्ट रूप से, 3 ब्रेकप्वाइंट का उपयोग किया जाता है - 1920px, 768px, 360px
• ऑटो अपेक्षित स्क्रीनशॉट उत्पन्न करते हैं
• आप सामान्य कार्यात्मक ऑटोटेस्ट के रूप में परीक्षण लिख सकते हैं, कोई प्रतिबंध नहीं हैं - यह महत्वपूर्ण है क्योंकि कभी-कभी स्क्रीनशॉट लेने से पहले कुछ जटिल क्रियाएं करना आवश्यक हो सकता है।

रिपोर्ट

रिपोर्ट इस तरह दिखती है:



बाएं साइडबार में परीक्षणों की एक सूची है, त्रुटियों के साथ एक लॉग, वह ब्राउज़र जिसमें ऑटोटेस्ट चलाया गया था।

आप ब्रेकपॉइंट के बीच स्विच कर सकते हैं और उस पर क्लिक करके किसी भी छवि को बड़ा कर सकते हैं।

ढांचा संरचना

src / config / visual.properties - यहां सभी आवश्यक सेटिंग्स हैं

• ब्रेकप्वाइंट - ब्रेकप्वाइंट, उस साइट की चौड़ाई जिस पर एक स्क्रीनशॉट लिया जाएगा
• allowableDiffSize - पिक्सेल में अपेक्षित और वास्तविक स्क्रीनशॉट के बीच स्वीकार्य विसंगति
• स्क्रीनशॉट के साथ फ़ोल्डर्स के लिए पथ
• रिपोर्ट के लिए टेम्प्लेट के पथ, रिपोर्ट को स्वयं और त्रुटि लॉग वाली फ़ाइल को

रिपोर्ट / REPORT.html - रिपोर्ट

स्क्रीनशॉट

• वास्तविक - वास्तविक स्क्रीनशॉट जो परीक्षण के दौरान बनाए गए हैं
• अपेक्षित - अपेक्षित स्क्रीनशॉट, यदि अपेक्षित स्क्रीनशॉट नहीं हैं, तो वे आपके द्वारा पहली बार परीक्षण चलाने पर स्वचालित रूप से बनाए जाएंगे
• अंतर - छवि जिस पर बेमेल क्षेत्रों को लाल रंग में हाइलाइट किया गया है
• gif - वास्तविक, अपेक्षित और भिन्न छवियों से निर्मित gif

src / main / फ्रेमवर्क - फ्रेमवर्क क्लासेस - रिपोर्ट जनरेटर, स्क्रीनशॉट, gifs, आदि।

src / main / app एक पेज ऑब्जेक्ट आर्किटेक्चर का एक उदाहरण है, इसका उपयोग करना आवश्यक नहीं है, इसे हटाया जा सकता है।

src / test / resource / testng.xml - यहां आपको A_BeforeAllTests और A_AfterAllTests के बीच नई परीक्षा कक्षाएं जोड़ने की आवश्यकता है

src / परीक्षण / जावा

• A_BaseTest - आधार परीक्षण वर्ग जिसमें से सभी नए परीक्षण वर्गों को इनहेरिट करना चाहिए
• A_BeforeAllTests - परीक्षण से पहले सेटिंग्स और ब्राउज़र का प्रारंभ
• A_AfterAllTests - परीक्षण के बाद रिपोर्ट पीढ़ी
• A_ErrorsLogListener - लॉगिंग त्रुटियां
• StaticGuestTest - परीक्षण वर्ग उदाहरण

कक्षाएं एक विशिष्ट क्रम में चलती हैं:

1. सबसे पहले सेटिंग्स और ब्राउजर की शुरुआत होती है - क्लास A_BeforeAllTests
2. फिर ऑटोटेस्ट का परीक्षण करें
3. और अंत में एक रिपोर्ट उत्पन्न होती है - वर्ग A_AfterAllTests

फ्रेमवर्क के साथ कैसे काम करें

उदाहरण का परीक्षण करें

@Test public void indexPage() { app.open(); app.preparePageForScreenshot(); Comparer.comparePages("index_page"); } 

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

हमें तैयारी की आवश्यकता क्यों है

डिफ़ॉल्ट रूप से, पृष्ठ बस नीचे स्क्रॉल करता है, और फिर js + के माध्यम से एक दूसरा विलंब होता है। यह आवश्यक है ताकि सभी छवियों, शैलियों आदि को लोड किया जा सके।

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

पेज

सभी विराम बिंदुओं में पृष्ठ के स्क्रीनशॉट की तुलना करें:

 Comparer.comparePages("test_name"); 

सभी विराम बिंदुओं में पेज के स्क्रीनशॉट की तुलना करें + तत्वों को छिपाएं:

 Comparer.comparePages("test_name", new String[]{"css_locator_1", "css_locator_2"}); 

पृष्ठ के स्क्रीनशॉट की तुलना केवल निर्दिष्ट विराम बिंदु में करें:

 Comparer.comparePagesWithBreakpoint("test_name", "1920"); 

पृष्ठ के स्क्रीनशॉट की तुलना केवल निर्दिष्ट ब्रेकपॉइंट + छिपाने वाले तत्वों में करें:

 Comparer.comparePagesWithBreakpoint("test_name", "1920", new String[]{"css_locator_1", "css_locator_2"}); 

तत्वों

सभी ब्रेकप्वाइंट में निर्दिष्ट तत्व के स्क्रीनशॉट की तुलना करें:

 Comparer.compareElements("test_name", "css_locator"); 

निर्दिष्ट ब्रेकपॉइंट में केवल निर्दिष्ट तत्व के स्क्रीनशॉट की तुलना करें:

 Comparer.compareElementsWithBreakpoint("test_name", "1920", "css_locator"); 

प्रोजेक्ट रिपॉजिटरी से लिंक

वर्तमान मुद्दे

• स्क्रीनशॉट के अंत में एक काला क्षेत्र जोड़ा जा सकता है, मैंने काफी समय तक इसका सामना किया है। जब मैं पाद लेख को छिपाना शुरू किया तो समस्या गायब हो गई। यह एक पुस्तकालय का मुद्दा है - https://github.com/pazone/ashot/issues/169
• कई पिक्सल के अंतर के कारण ऑटोटेस्ट पास नहीं हो सकता है। TestConfig.allowableDiffSize का मान बढ़ाकर समस्या हल की गई है।