विषय
- 01. रेथ W
- कोशिश करके देखो
- पक्ष - विपक्ष
- 02. फैंटमसीएसएस
- कोशिश करके देखो
- पक्ष - विपक्ष
- 03. मिथुन
- कोशिश करके देखो
- पक्ष - विपक्ष
- 04. वेबड्राइवरसीएसएस
- कोशिश करके देखो
- पक्ष - विपक्ष
- 05. भूत
- कोशिश करके देखो
- पक्ष - विपक्ष
- माननीय उल्लेख
- आगे क्या?
पिछले कई वर्षों में, मैंने देखा है कि 'विज़ुअल रिग्रेशन टेस्टिंग' शब्द वेब विकास वार्तालापों में अधिक से अधिक... और अच्छे कारणों से उभर रहा है। यह उन लोगों के लिए जबरदस्त मूल्य प्रदान करने का वादा करता है जो स्टाइल मुद्दों के लिए अपनी साइटों को मैन्युअल रूप से जांच कर थक गए हैं।
इस बढ़ती लोकप्रियता के साथ, ऐसा लगता है कि हर महीने एक नया टूल जारी किया जाता है, प्रत्येक भयानक दृश्य प्रतिगमन परीक्षण स्वचालन प्रदान करने का वादा करता है। दुर्भाग्य से, मैंने वास्तविकता से अधिक स्वप्न देखा है, सच्चाई यह है कि इस प्रकार के परीक्षण भ्रामक रूप से जटिल हैं।
हालांकि, कुछ ऐसे भी हैं जो भीड़ से अलग दिखते हैं। जबकि प्रत्येक के अपने लाभ और कमियां हैं, मेरा मानना है कि इस सूची में प्रत्येक उपकरण देखने लायक है।
01. रेथ W
विरेथ कई सालों से है। यह दृश्य पर पहले उपकरणों में से एक था, और इसके गिटहब रेपो में 200 से अधिक पुल अनुरोध बंद होने के साथ, कार्यक्षमता में वृद्धि जारी है। रूबी में विकसित होने वाले किसी भी व्यक्ति के लिए यह जाने-माने टूल है।
कोशिश करके देखो
अपनी परियोजना निर्देशिका से, चलाएँ व्रेथ सेटअप. फिर भागो वाइथ कैप्चर कॉन्फिग/config.yaml. यह बीबीसी होमपेज के दो अलग-अलग संस्करणों पर परीक्षणों का एक सेट चलाएगा। अपना टेस्ट रन पूरा करने के बाद, नव निर्मित को खोलकर अपनी स्क्रीनशॉट गैलरी देखें शॉट्स/गैलरी.html अपनी पसंद के ब्राउज़र में पेज।
आप अपने परीक्षणों को अनुकूलित भी कर सकते हैं। में config/config.yaml आप स्क्रीन की चौड़ाई और डिफ मोड सेट करने के साथ-साथ परीक्षण के लिए साइटों और पृष्ठों को अपडेट कर सकते हैं।
पक्ष - विपक्ष
- YAML कॉन्फ़िगरेशन फ़ाइल के साथ काम करना आसान है
- आप दो अलग-अलग यूआरएल की तुलना कर सकते हैं
- यदि आप रूबी से परिचित नहीं हैं तो इंस्टॉलेशन मुश्किल हो सकता है
- अलग-अलग पृष्ठों के लिए विशिष्ट इंटरैक्शन चलाना मुश्किल हो सकता है
02. फैंटमसीएसएस
एक अन्य अनुभवी विकल्प, फैंटमसीएसएस फ्रंटएंड डेवलपर्स के बीच एक लोकप्रिय विकल्प रहा है। इसकी परिचितता और कार्यक्षमता फैंटमसीएसएस को वेबसाइट परीक्षण के मामले में अपने पैरों को फैलाने वाले फ्रंटएंड लोगों के लिए एक बढ़िया विकल्प बनाती है। PhantomJS/CasperJS के शीर्ष पर निर्मित, PhantomCSS उन दो टूल द्वारा प्रदान की गई शानदार कार्यक्षमता को जोड़ता है।
कोशिश करके देखो
निम्नलिखित कोड के साथ एक नई जावास्क्रिप्ट फ़ाइल बनाएँ:
casper.start('http://the-internet.herokuapp.com/checkboxes') .then(function(){ phantomcss.screenshot('#checkboxes', 'before click'); casper.click('#checkboxes input :first-child'); phantomcss.screenshot('#checkboxes', 'आफ्टर क्लिक'); });
फिर CapserJS CLI के माध्यम से अपनी फ़ाइल चलाएँ: casperjs परीक्षण myfile.js. आपकी स्क्रिप्ट पृष्ठभूमि में चलेगी और आपकी छवियां इसमें सहेजी जाएंगी स्क्रीनशॉट फ़ोल्डर।
पक्ष - विपक्ष
- इस पर कई ट्यूटोरियल और प्रस्तुतियाँ
- CasperJS के शीर्ष पर निर्मित, परीक्षण में पृष्ठ क्रियाओं के एकीकरण की अनुमति देता है
- फैंटमजेएस तक सीमित टेस्ट
- स्क्रीनशॉट की समीक्षा/प्रबंधन के लिए कोई इंटरफ़ेस नहीं
03. मिथुन
मुझे मिथुन आकर्षक लगता है क्योंकि यह पारंपरिक सेलेनियम परीक्षण को एक ऐसे इंटरफ़ेस में पैकेज करता है जो बहुत जटिल नहीं है। PhantomCSS की तरह, आप अपने स्क्रेंग्रेब्स के आसपास कस्टम क्रियाओं को परिभाषित कर सकते हैं। फैंटमसीएसएस के विपरीत, जेमिनी 'टेस्ट सूट' प्रदान करके कई कदम आगे बढ़ता है जो आपके कोड को व्यवस्थित करने में मदद कर सकता है।
कोशिश करके देखो
एक बनाने के .gemini.yml निम्नलिखित सामग्री के साथ फ़ाइल (यूआरएल को आपके सेलेनियम ग्रिड सर्वर से बदलना):
rootUrl: http://the-internet.herokuapp.com/checkboxes gridUrl: http://localhost:4444/wd/hub ब्राउज़र: क्रोम: वांछित क्षमताएं: ब्राउज़रनाम: क्रोम
फिर एक परीक्षण फ़ाइल बनाएं, और उसे इसमें डालें मिथुन राशि आपकी परियोजना की जड़ में फ़ोल्डर। फ़ाइल उतनी ही सरल हो सकती है:
gemini.suite ('यांडेक्स-सर्च', फंक्शन (सूट) { Suite.setUrl('/checkboxes') .setCaptureElements('#checkboxes') .capture('पहले क्लिक') क्रियाएँ, ढूँढें) { क्रियाएँ। क्लिक करें ('# चेकबॉक्स इनपुट: प्रथम-बच्चा'); }); });
इसके बाद, चलाकर अपनी आधारभूत छवियां बनाएं मिथुन अद्यतन. आपको एक परीक्षा उत्तीर्ण होते देखना चाहिए। आप के माध्यम से एक प्रतिगमन परीक्षण चला सकते हैं मिथुन परीक्षण, जो नई छवियों की तुलना अंदर संग्रहीत छवियों से करेगा मिथुन/स्क्रीन निर्देशिका।
पक्ष - विपक्ष
- सेलेनियम एकीकरण आपको विभिन्न प्रकार के ब्राउज़रों और उपकरणों पर परीक्षण करने की अनुमति देता है
- विभिन्न उदाहरणों के साथ अच्छी तरह से प्रलेखित साइट
- परीक्षणों को सुइट्स में छाँटने के लिए एक रूपरेखा प्रदान करता है
- सेलेनियम तक कोई सीधी पहुंच नहीं है, जिससे आप किसी पृष्ठ पर की जाने वाली कार्रवाइयों के प्रकार को सीमित कर सकते हैं
- एकाधिक प्रस्तावों पर एक ही परीक्षण चलाने के लिए उन्नत कॉन्फ़िगरेशन की आवश्यकता होती है
04. वेबड्राइवरसीएसएस
सबसे पहले, एक चेतावनी: WebdriverCSS का भविष्य अनिश्चित है, क्योंकि इसे अधिक अप-टू-डेट मॉड्यूल के साथ बदलने के प्रयास किए जा रहे हैं। उस ने कहा, मुझे लगता है कि यह अभी भी ध्यान देने योग्य है, क्योंकि वही मूल संरचना अगले कार्यान्वयन के लिए जारी रहेगी।
जेमिनी की तरह, WebdriverCSS अपनी कार्यक्षमता के लिए सेलेनियम से जुड़ता है। यह एक अन्य टूल के शीर्ष पर भी बैठता है: WebdriverIO। चूंकि यह WebdriverIO पारिस्थितिकी तंत्र का हिस्सा है, इसलिए इसे फ्रेमवर्क द्वारा प्रदान की जाने वाली हर चीज से लाभ होता है। इसमें सैकड़ों कमांड शामिल हैं जिन्हें आप स्क्रीनशॉट लेने से पहले और बाद में ब्राउज़र को भेज सकते हैं।
WebdriverCSS भी Mocha, Jasmine और Cucumber.js जैसे परीक्षण ढांचे के साथ अच्छी तरह से एकीकृत है। क्लाउड सेलेनियम सेवाओं जैसे सॉस लैब्स और ब्राउज़रस्टैक के साथ कनेक्टिविटी में जोड़ें और आपको शीर्ष पर चेरी के रूप में दृश्य प्रतिगमन परीक्षण के साथ एक पूर्ण विशेषताओं वाला कार्यात्मक परीक्षण सूट मिला है।
कोशिश करके देखो
एक नई जावास्क्रिप्ट फ़ाइल बनाएँ (टेस्ट.जेएस) आपकी परियोजना में निम्नलिखित सामग्री के साथ:
वर क्लाइंट = की आवश्यकता होती है ('वेबड्राइवरियो')। रिमोट ({वांछित क्षमताएं: {ब्राउज़र नाम: 'क्रोम'}}) की आवश्यकता होती है ('वेबड्राइवर्स')। init (क्लाइंट, {स्क्रीनविड्थ: [640,1024]}); वर स्क्रीनशॉट एलीमेंट = [{नाम: 'चेकबॉक्स', तत्व: '#चेकबॉक्स'}]; client.init() .url('http://the-internet.herokuapp.com/checkboxes') .webdrivercss('before-click', ScreenshotElement) .click('#checkboxes input:first-child') .webdrivercss ('आफ्टर-क्लिक', स्क्रीनशॉट एलीमेंट) .end ();
इस कमांड को अपनी कमांड लाइन में टाइप करके टेस्ट चलाएँ: $ नोड test.js. जाँच करके बनाई गई छवियों को मान्य करें वेबड्राइवरसी फ़ोल्डर। यदि आप अपना परीक्षण दोबारा चलाते हैं और स्क्रीनशॉट बदल जाते हैं, तो आप देखेंगे कि a अंतर फ़ोल्डर जोड़ा जाएगा और संबंधित भिन्न चित्र इसके अंदर होंगे।
पक्ष - विपक्ष
- चूंकि यह WebdriverIO का उपयोग करता है, आप उन सभी सुविधाओं का लाभ उठा सकते हैं जो फ्रेमवर्क प्रदान करता है
- विभिन्न स्क्रीन संकल्पों का त्वरित विन्यास
- आपको स्क्रीनशॉट के कुछ क्षेत्रों को छिपाने/मास्क करने में सक्षम बनाता है
- भविष्य अनिश्चित है क्योंकि यह विशिष्ट प्लगइन अब आधिकारिक तौर पर बनाए नहीं रखा गया है
- आपको WebdriverIO का उपयोग करने का तरीका सीखने की आवश्यकता है
05. भूत
इस सूची के अन्य उपकरणों के विपरीत, स्पेक्टर परीक्षण नहीं चलाता है। इसके बजाय, यह स्क्रीनशॉट के प्रबंधन के लिए एक व्यवस्थापक इंटरफ़ेस के साथ-साथ छवि तुलना क्षमताओं को प्रदान करने पर केंद्रित है।
सामान्य उपयोग में, आप स्पेक्टर को WebdriverIO या PhantomJS जैसे टूल के साथ जोड़ेंगे। बाद वाला स्क्रीनशॉट कैप्चर करने का काम करेगा, जबकि स्पेक्टर छवियों के भंडारण और प्रसंस्करण का प्रबंधन करेगा। मैं इसका प्रशंसक हूं, क्योंकि चिंताओं को अलग करने से एक समुदाय के रूप में हमारी पसंद का एक परीक्षण उपकरण होना आसान हो जाता है, लेकिन एक सामान्य व्यवस्थापक इंटरफ़ेस भी बनता है।
कोशिश करके देखो
अपनी स्पेक्टर वेबसाइट पर, पथ खोलें /परीक्षण/नया/. वहां से आप परीक्षण जानकारी को कस्टमाइज़ कर सकते हैं और एक प्रारंभिक स्क्रीनशॉट अपलोड कर सकते हैं। अपना परीक्षण सबमिट करने के बाद, अपनी साइट के मुख्य पृष्ठ पर जाएं जहां आपको 1 उत्तीर्ण होने की अधिसूचना के साथ एक 'परीक्षण परियोजना' बनाई गई दिखाई देगी। परीक्षण के बारे में अधिक जानकारी के लिए आप उस पृष्ठ के किसी भी लिंक पर क्लिक कर सकते हैं।
इसके बाद, वापस जाएं/परीक्षण/नया पृष्ठ और एक नई छवि अपलोड करें। पूरा होने पर, मुख्य पृष्ठ पर वापस आएं और आप देखेंगे कि स्पेक्टर ने तुलना की और अब एक असफल परीक्षण की रिपोर्ट कर रहा है।
पक्ष - विपक्ष
- स्क्रीनशॉट प्रबंधित करने के लिए स्वच्छ, मैत्रीपूर्ण इंटरफ़ेस
- परीक्षण परिदृश्य के एक विशिष्ट क्षेत्र पर प्रयासों पर ध्यान केंद्रित करते हुए, बहुत अधिक काम करने की कोशिश नहीं करता है
- रूबी सर्वर सेटअप के ज्ञान की आवश्यकता है
- आपको यह जानने की आवश्यकता है कि REST API के माध्यम से डेटा/स्क्रीनशॉट कैसे भेजें
माननीय उल्लेख
कुछ उपकरण हैं जो मुझे लगता है कि ध्यान देने योग्य हैं, भले ही उन्हें ऊपर की सूची में एक विशेष स्थान नहीं मिला। वो हैं:
- गैलेन फ्रेमवर्क
- शूवी
- बैकस्टॉपजेएस
विषय पर टूल और लेखों की विस्तृत सूची के लिए, Visualregressiontesting.com देखें।
आगे क्या?
'वह सूची बहुत अच्छी है, लेकिन क्या आप मुझे यह नहीं बता सकते कि किस उपकरण का उपयोग करना है?' मैंने सुना है कि आप पूछते हैं। अच्छा ... नहीं, क्योंकि यह बहुत हद तक इस बात पर निर्भर करता है कि आप क्या परीक्षण कर रहे हैं। यदि आप काफी सरल साइट की जाँच कर रहे हैं, तो व्रेथ या जेमिनी बढ़िया विकल्प हैं। लेकिन अगर आपको उपयोगकर्ता के कार्यों की नकल करने की आवश्यकता है, तो WebdriverCSS या PhantomCSS एक बेहतर विकल्प होगा।
यदि आप अनिश्चित हैं, तो चिंता न करें। बस एक चुनें और इसे आजमाएं। कोई फर्क नहीं पड़ता कि आप कौन सा टूल चुनते हैं, आप फ्रंटएंड टेस्टिंग के बारे में मूल्यवान सबक सीखेंगे और यह कितना शक्तिशाली (यद्यपि जटिल) हो सकता है।
यह लेख मूल रूप से . में दिखाई दिया शुद्ध पत्रिका अंक 290; इसे यहाँ खरीदें!
