🤾🏿 👨🏽‍🚒 🖖🏼 जावा + सेलेनियम वेबड्राइवर + -शोट में प्रतिगमन दृश्य परीक्षण को स्वचालित करने का अनुभव 🧙🏼 🔓 🗡️

नमस्ते

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

परिचय

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

यह तय करने के बाद कि साइट के पृष्ठों की उपस्थिति को मैन्युअल रूप से जांचना एक विकल्प नहीं है, मैंने स्वचालन शुरू किया।

हमें सुविधाजनक रिपोर्ट के साथ एक सरल समाधान की आवश्यकता थी। बिना किसी प्रतिबंध के ऑटोटेस्ट लिखने में सक्षम होने के लिए, पृष्ठों और साइट तत्वों के स्क्रीनशॉट की तुलना करें और विभिन्न ब्राउज़रों का उपयोग करें।

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

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

परियोजना के बारे में

VisualRegressionBoilerplate एक विशिष्ट संरचना के साथ एक अपेक्षाकृत सरल परियोजना है।

दृश्य ऑटोटेस्ट के लिए बॉयलरप्लेट टेम्पलेट / प्रोजेक्ट जैसा कुछ।

परियोजना छोटी साइटों / परियोजनाओं के लिए अभिप्रेत है। उन लोगों के लिए जिन्हें जटिल समाधानों के बिना, एक सरल समाधान की आवश्यकता है।

संभावनाएं

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

प्रयुक्त प्रौद्योगिकियाँ

जावा
TestNG
Maven
सेलेनियम वेबड्राइवर
aShot - छवियों की तुलना करने के लिए एक पुस्तकालय

किसी प्रोजेक्ट के साथ काम करना कैसे शुरू करें

जावा, मावेन, ब्राउज़र स्थापित करें।
DriverWrapper क्लास के कंस्ट्रक्टर में, यदि आवश्यक हो, तो आप ब्राउज़र जोड़ या हटा सकते हैं
TestConfig क्लास सभी प्रोजेक्ट सेटिंग्स को स्टोर करता है - ब्राउज़र, डिफ़ॉल्ट ब्राउज़र विंडो का आकार, आदि। यहां आप सेटिंग्स जोड़ या बदल सकते हैं।
बेसपेज क्लास में, परीक्षण किए गए साइट का पता सेट करें। आप अलग-अलग वातावरण (देव, मंच, ठेस) के लिए एक अलग पता सेट कर सकते हैं। बेसपेज और ऐप मॉड्यूल में शेष कक्षाएं पृष्ठ ऑब्जेक्ट पैटर्न का एक उदाहरण हैं। इसका उपयोग करना वैकल्पिक है।
TestExample परीक्षण वर्ग की जाँच करें और एक उदाहरण के रूप में अपने स्वयं के परीक्षण वर्ग बनाएँ।
Testng.xml में नई परीक्षण कक्षाएं जोड़ें
मावेन के माध्यम से आवश्यक मापदंडों के साथ परीक्षण चलाएं
रिपोर्ट फ़ोल्डर में रिपोर्ट की जाँच करें

README परियोजना में, सब कुछ अधिक विस्तार से वर्णित है।

टेस्ट कैसे लिखें

सामान्य तौर पर, जैसा आप चाहते हैं। कोई प्रतिबंध नहीं हैं। आप पृष्ठ ऑब्जेक्ट पैटर्न या कुछ और का उपयोग कर सकते हैं।

स्क्रीनशॉट की तुलना करने के लिए आपको केवल निम्न कार्यों का उपयोग करना है:

पृष्ठों के लिए:

पृष्ठ स्क्रीनशॉट की तुलना:

comparePageScreenshots("index_page");

एक तत्व की अनदेखी करने वाले पृष्ठ स्क्रीनशॉट की तुलना:

 comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);

कई तत्वों की अनदेखी करने वाले पृष्ठ स्क्रीनशॉट की तुलना:

  comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});

पृष्ठ तत्व के स्क्रीनशॉट की तुलना - तत्व को सीएसएस लोकेटर द्वारा खोजा जा सकता है

 compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);

या आप क्लास वेबइलमेंट का ऑब्जेक्ट पास कर सकते हैं

 compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));

संभावित समस्याएं

पृष्ठ पर गतिशील सामग्री के कारण परीक्षण विफल हो सकते हैं। समस्या को गतिशील सामग्री वाले तत्वों को अनदेखा करके हल किया जाता है।
कुछ पिक्सेल अंतर के कारण परीक्षण विफल हो सकते हैं। आप सेटिंग को संपादित करके इसे ठीक कर सकते हैं - TestConfig.allowableDiffSize ।
कभी-कभी सभी छवियों या साइट पर कुछ तत्वों को लोड करने का समय नहीं होता है। इसे ठीक करने के लिए, मैंने तैयारीपावरफॉरशोटशॉट () फ़ंक्शन लिखा, जिसमें javaScript का उपयोग करते हुए, पृष्ठ ऊपर और नीचे स्क्रॉल करता है। लेकिन यह हमेशा मदद नहीं करता है।

सारांश

फिलहाल, परियोजना में लगभग 50 परीक्षण हैं - पृष्ठ और विभिन्न पृष्ठ तत्व।
बैश स्क्रिप्ट के माध्यम से ऑटोटेस्ट लॉन्च किया जाता है और साइट को तुरंत तीन एक्सटेंशन (मोबाइल, टैबलेट, डेस्कटॉप) में टेस्ट किया जाता है।

गतिशील सामग्री के कारण कुछ समस्याएं हैं और इस तथ्य के कारण कि साइट के कुछ तत्वों को हमेशा समय पर लोड करने का समय नहीं होता है, लेकिन ऑटोटेस्टर्स अपने कार्य के साथ सामना कर सकते हैं।

लेआउट में कोई भी बदलाव तुरंत दिखाई देते हैं।

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

जावा + सेलेनियम वेबड्राइवर + -शोट में प्रतिगमन दृश्य परीक्षण को स्वचालित करने का अनुभव