🐽 😂 🛳️ सदाचार वाणिज्य में स्वचालित वेब इंटरफ़ेस परीक्षण 👩🏾‍🎤 🤞 👩🏻‍🔬

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

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

यह सब क्यों?

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

E2E शुरू से अंत तक एक व्यावसायिक परिदृश्य का परीक्षण कर रहा है। ई 2 ई परीक्षण वास्तविक ब्राउज़र में वास्तविक उपयोगकर्ता क्रियाओं को अनुकरण करता है, ठीक उसी तरह जैसे वास्तविक उपयोगकर्ता समाधान का उपयोग करेगा।

हम E2E परीक्षणों का उपयोग करते हैं:

प्रतिगमन को नियंत्रित करने के लिए
प्रणाली का वर्णन करने के लिए
CI / CD में एकीकरण के लिए

इसमें यह सुनिश्चित करना शामिल है कि सभी मॉड्यूल कार्य करते हैं और सही और अनुमानित रूप से एक साथ काम करते हैं।

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

ई 2 ई परीक्षण लिखने और चलाने में समय और संसाधन लगते हैं। उदाहरण के लिए, Google 70/20/10 जुदाई प्रदान करता है: 70% इकाई परीक्षण, 20% एकीकरण परीक्षण और 10% E2E परीक्षण। प्रत्येक परियोजना के लिए सटीक संयोजन अलग होगा, लेकिन सामान्य तौर पर इसे पिरामिड के आकार को संरक्षित करना चाहिए।

E2E परीक्षण सरल नहीं हैं और पहली बार में विकसित करने और बनाए रखने के लिए महंगे लगते हैं। Virto कॉमर्स में, हम लगातार विकास को सरल बनाने और नए रिलीज होने पर E2E परीक्षणों का समर्थन करने की लागत को कम करने के लिए काम कर रहे हैं। हमें उम्मीद है कि हमारे समाधान आपको अपनी परियोजनाओं में E2E के उपयोग को सरल बनाने में मदद करेंगे।

अच्छी उपयोगकर्ता कहानी - यह लगभग तैयार है E2E परीक्षण

आप अक्सर सुन सकते हैं कि ई 2 ई परीक्षण लिखने में समय लगता है, उन्हें बनाए रखना मुश्किल होता है। हां, यह ऐसा है, वे प्रलेखन के समान ही बनाए रखना आसान नहीं है। उन्हें विकास प्रक्रिया और लेखन दस्तावेज का हिस्सा क्यों नहीं बनाया गया, जिससे व्यावसायिक परिदृश्यों पर कब्जा हो गया।

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

कार्ट में किसी आइटम को जोड़ने के लिए बटन के लिए उपयोगकर्ता कहानी का एक उदाहरण:

GIVEN I am signed in to the storefront AND Some product page is open (/product-name) AND my cart is empty WHEN I click to the "Add" button on the item with the following parameters: THEN I should see a dropdown menu where I can choose from 1 to 10+

जो तब निम्नलिखित परीक्षण में बदल जाता है:

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

आसान - स्थापित करें और कॉन्फ़िगर करें कॉन्फ़िगर करें

परीक्षण उपकरण के रूप में, हमने विशेष रूप से AngularJS वेब अनुप्रयोगों के लिए विकसित एक खुला स्रोत E2E परीक्षण स्वचालन प्रणाली, प्रोट्रैक्टर को चुना।

Protractor एक Node.js प्रोग्राम है जो WebDriverJS के शीर्ष पर बनाया गया है। प्रोट्रैक्टर Node.js, जैस्मीन, सेलेनियम, मोचा, ककड़ी और वेब जैसी शक्तिशाली प्रौद्योगिकियों के संयोजन के समाधान के रूप में काम करता है।

प्रोट्रैक्टर को एंगुलरजेएस के बारे में पता है, जिससे एंगुलरजेएस प्रोजेक्ट को लॉन्च करने, पेज को रिफ्रेश करने, आदि का इंतजार किए बिना समय लिखना आसान हो जाता है ... अनुभव बताता है कि डेवलपर एंट्री थ्रेशोल्ड बहुत कम है।
विश्व स्तर पर प्रोटेक्टर स्थापित करने के लिए npm का उपयोग करें:

 npm install -g protractor

webdriver-manager एक उपयोगिता है जो सेलेनियम सर्वर के एक उदाहरण को कॉन्फ़िगर करना आसान बनाता है। सेलेनियम सर्वर - का उपयोग परीक्षण और वास्तविक वातावरण के बीच आदेशों को स्थानांतरित करने के लिए किया जाएगा।

इंस्टॉल या डाउनलोड करने के लिए यह कमांड चलाएँ:

 webdriver-manager update

और चलाएं:

 webdriver-manager start

यह कमांड सेलेनियम सर्वर शुरू करता है और लॉग प्रदर्शित करने के लिए एक विंडो खोलता है। ब्राउज़र को नियंत्रित करने के लिए प्रोटेक्टर इस सर्वर को अनुरोध भेजेगा।

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

परियोजना की सही संरचना

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

एक रिपॉजिटरी में एप्लिकेशन कोड और टेस्ट खोजना परियोजना को बनाए रखने और बनाए रखने में आसान बनाता है।

एक बुनियादी उदाहरण यहां पाया जा सकता है ।

प्रोजेक्ट निम्न संरचना का E2E फ़ोल्डर बनाता है, जो परीक्षण को व्यवस्थित करने के लिए पृष्ठ ऑब्जेक्ट का उपयोग करता है।

 E2E/ |--cart | |--cart.pageObject.js | |--*.spec.js |--home | |--home.pageObject.js | |--*.spec.js |--conf.js

conf.js - कॉन्फ़िगरेशन फ़ाइल रूट पर है
प्रत्येक इंटरफ़ेस ऑब्जेक्ट के लिए अपना स्वयं का फ़ोल्डर बनाया जाता है, जिसमें यह स्थित है
- PageObject फ़ाइल पृष्ठ पर तत्वों का वर्णन करने के लिए
- कई कल्पना फाइलें - जहां परीक्षण स्थित हैं

परियोजना में, का उपयोग:

baseUrl - जो आपको विभिन्न वातावरणों का परीक्षण करने के लिए परीक्षण का उपयोग करने की अनुमति देता है
params - जिनका उपयोग किसी पृष्ठ पर प्रमुख तत्व खोजने या फ़ॉर्म भरने के लिए किया जाता है

github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L21

github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L29

ये पैरामीटर तब IT व्यवस्थापक द्वारा परिवर्तित किए जा सकते हैं जब DEV और QA वातावरण के लिए स्वचालित मोड में जेनकींस में लॉन्च को कॉन्फ़िगर करते हैं।

 protractor conf.js --baseUrl=https://some-url.azurewebsites.net/--params.api.endpoint=https://some-admin-url.azurewebsites.net

पृष्ठ पर तत्वों को खोजने का अनुकूलन

प्रोट्रैक्टर पृष्ठ पर तत्वों को खोजने के लिए बहुत ही लचीले तरीके प्रदान करता है:

by.binding
by.model
by.repeater
by.className
by.css
by.select ()
by.partialButtonText ()
...

लेकिन हाल की परियोजनाओं में, हम उस मॉडल पर आए जो परीक्षण में भाग लेने वाले तत्वों को एक विशेष वर्ग के साथ प्रोट्रैक्टर- प्रीफिक्स के साथ चिह्नित करते हैं। परीक्षण में, ये तत्व byclassName द्वारा पाए जाते हैं।

यह परीक्षणों के रखरखाव और परिवर्तन को सरल बनाता है, इसलिए एक प्रोग्रामर या स्वचालित उपकरण यह निर्धारित कर सकते हैं कि ई 2 ई परीक्षण में भाग लेने वाले तत्व को बदल दिया गया है।

हम किन ब्राउज़रों का परीक्षण कर रहे हैं

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

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

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

ब्राउज़र में परीक्षण जोड़ने के लिए, आपको आवश्यक वेबड्राइवर डाउनलोड और इंस्टॉल करना होगा।

और कॉन्फ़िगरेशन फ़ाइल में एक नया अनुभाग मल्टीप्लेबिलिटी जोड़ें:

 exports.config = { … multiCapabilities: [ { 'browserName' : 'chrome' }, { 'browserName' : 'firefox' } ], … };

चूंकि आधुनिक वेब एप्लिकेशन विभिन्न प्रस्तावों के साथ काम करते हैं, इसलिए परीक्षण लिखते समय इसे ध्यान में रखा जाना चाहिए।

प्रोटेक्टर आपको विभिन्न स्क्रीन रिज़ॉल्यूशन के लिए परीक्षण चलाने की अनुमति देता है।

ऐसा करने के लिए, ब्राउज़र.driver.manage () विंडो के माध्यम से स्क्रीन का आकार सेट करने का विकल्प होता है। (सेट करें)। इस उदाहरण में, हमने स्क्रीन का आकार 1600 से 800 तक निर्धारित किया है।

 exports.config = { … capabilities: { 'browserName': 'chrome' }, onPrepare: function() { browser.driver.manage().window().setSize(1600, 800); }, … };

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

 multiCapabilities: [ { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1920,1080'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1680,1050'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1600,900'] }, specs: ['specs.js'] }]

E2E प्रलेखन का हिस्सा है।

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

CI / CD एकीकरण

कोई भी परीक्षण प्रासंगिक होना चाहिए और समय-समय पर चलना चाहिए। यदि ऐसा नहीं किया जाता है, तो आपको समय लेखन परीक्षणों को बर्बाद नहीं करना चाहिए, वे कुछ हफ़्ते में बेकार हो जाएंगे, और उन्हें खरोंच से फिर से लिखना आसान होगा।

हमने E2E परीक्षणों को CI / CD में एकीकृत करने और E2E को परिनियोजन प्रक्रिया का हिस्सा बनाने के लिए एक महत्वपूर्ण कदम उठाया है।

CI / CD में एकीकरण आपको प्रतिक्रिया प्रदान करने और अंतर्दृष्टि जोड़ने के लिए स्वचालित रूप से DE2 और QA वातावरण के लिए E2E परीक्षण चलाने की अनुमति देता है कि सिस्टम एक छोटे से परिवर्तन के बाद भी चालू रहता है। और अगर निर्णय टूट गया है, तो जानकारी दें कि यह कब और किस बदलाव पर हुआ।

सबसे पहले, मॉड्यूल के एक अद्यतन होने पर नए संस्करण लॉन्च किए जाते हैं और नया संस्करण QA वातावरण में मिलता है।

दूसरे, E2E परीक्षण स्वचालित मोड में DEV और QA वातावरण पर एक शेड्यूल पर रात में चलाए जाते हैं।

तीसरा, यदि आवश्यक हो, तो डेवलपर्स स्वयं आवश्यकतानुसार परीक्षण चला सकते हैं।
लॉन्च परिणामों के आधार पर, विकास टीम से क्लाइंट के सभी प्रोजेक्ट प्रतिभागियों को परीक्षण परिणामों पर HTML रिपोर्ट के साथ एक ईमेल प्राप्त होता है।

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

रिपोर्ट जनरेट करने के लिए, हम प्रोट्रैक्टर-जैस्मीन 2-एचटीएमएल-रिपोर्टर प्लगइन (https://github.com/VirtoCommerce/protractor-jasmine2-html-reporter) के संशोधित संस्करण का उपयोग करते हैं। यह प्लगइन एक HTML रिपोर्ट बनाता है और इनलाइन तत्वों के स्क्रीनशॉट सम्मिलित करता है।

इसे स्थापित करना बहुत सरल है:

प्रोट्रेक्टर-जैस्मीन 2-html-रिपोर्टर स्थापित करें
प्रोजेक्ट में प्रोट्रेक्टर-जैस्मीन 2-html-रिपोर्टर जोड़ना
कनेक्शन रिपोर्ट ऑनप्रेम विधि

 var HtmlScreenshotReporter = require('protractor-jasmine2-html-reporter'); var reporter = new HtmlScreenshotReporter(self.options); var name = browser.suite; self.options.reportTitle = name + '-report.html'; jasmine.getEnv().addReporter(reporter);

लगातार प्रक्रिया में सुधार करें

लागत को कम करने और E2E परीक्षणों के विकास और समर्थन की गति को बढ़ाने के लिए एक टीम में लगातार काम करें।

ट्रेन और परीक्षण लेखन प्रक्रिया की समीक्षा करें। देखें कि कौन से नए घटकों और सेवाओं का उपयोग किया जा सकता है।

उदाहरण के लिए, हम ककड़ी कनेक्शन विकल्प पर विचार कर रहे हैं। ककड़ी सरल भाषा में लिखे गए स्वचालित परीक्षणों को चलाने के लिए एक उपकरण है।

निष्कर्ष

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

पुण्य वाणिज्य परियोजना में ई 2 ई परीक्षणों के उपयोग के अनुभव से, हम निम्नलिखित निष्कर्ष निकाल सकते हैं:

E2E लिखना विकास प्रक्रिया का हिस्सा है। और यह बहुत महत्वपूर्ण है, क्योंकि यह व्यापार प्रक्रियाओं और संपूर्ण समाधान के काम का परीक्षण करता है। DEV और QA के चरण में बड़ी संख्या में त्रुटियों का पता चला था, न कि युद्ध के माहौल पर।
टेस्ट और कोड समान रिपॉजिटरी में होने चाहिए और डेवलपर के लिए उपलब्ध होने चाहिए।
E2E परीक्षण की गुणवत्ता उपयोगकर्ता कहानी के विवरण पर निर्भर करती है; यदि इसे सही तरीके से लिखा गया है, तो विकास टीम के लिए E2E परीक्षण बनाना आसान होता है।
E2E परीक्षण प्रलेखन और रिकॉर्ड स्क्रिप्ट के रूप में कार्य कर सकते हैं।
E2E परीक्षणों को लगातार और स्वचालित रूप से DEV और QA वातावरण पर चलाया जाना चाहिए। यदि आपने लॉन्च को स्वचालित नहीं किया है, तो आपको परीक्षणों पर समय बर्बाद नहीं करना चाहिए, वे कुछ हफ्तों में बेकार हो जाएंगे।
परीक्षा परिणाम सभी परियोजना प्रतिभागियों के लिए उपलब्ध होना चाहिए। यह क्या हो रहा है की एक तस्वीर देता है।
E2E सभी समस्याओं का 100% समाधान नहीं है। 70/20/10 नियम का पालन करें: 70% इकाई परीक्षण, 20% एकीकरण परीक्षण और 10% E2E परीक्षण
लागत को कम करने और E2E परीक्षणों के विकास और समर्थन की गति को बढ़ाने के लिए एक टीम में लगातार काम करें।

संदर्भ

www.protractortest.org

एंगुलरजेएस के लिए प्रोटेक्टर - एंड-टू-एंड टेस्ट लिखना कभी इतना मजेदार नहीं रहा

github.com/angular/protractor/blob/master/docs/page-objects.md

github.com/VirtoCommerce/vc-storefront/tree/master/VirtoCommerce.Storefront.Test/e2e

बस एंड टू एंड टेस्ट्स टेस्ट करने के लिए ना कहें। test.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html

सदाचार वाणिज्य में स्वचालित वेब इंटरफ़ेस परीक्षण