प्रोट्रैक्टर परीक्षण ट्यूटोरियल: स्वचालन उपकरण फ्रेमवर्क

प्रोट्रैक्टर परीक्षण क्या है?

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

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

Javaस्क्रिप्ट का इस्तेमाल लगभग सभी वेब एप्लीकेशन में किया जाता है। जैसे-जैसे एप्लीकेशन बढ़ते हैं, Javaलिपि आकार और जटिलता में भी वृद्धि होती है। ऐसे मामले में, परीक्षकों के लिए विभिन्न परिदृश्यों के लिए वेब एप्लिकेशन का परीक्षण करना एक कठिन कार्य बन जाता है।

कभी-कभी AngularJS अनुप्रयोगों में वेब तत्वों को कैप्चर करना मुश्किल होता है JUnit or Selenium वेबड्राइवर.

प्रोट्रैक्टर एक NodeJS प्रोग्राम है जो . में लिखा गया है Javaस्क्रिप्ट और नोड के साथ मिलकर AngularJS अनुप्रयोगों में वेब तत्वों की पहचान करता है, और यह उपयोगकर्ता क्रियाओं के साथ ब्राउज़र को नियंत्रित करने के लिए WebDriver का भी उपयोग करता है।

ठीक है, अब आइए चर्चा करें कि AngularJS एप्लीकेशन वास्तव में क्या है?

AngularJS एप्लीकेशन वेब एप्लीकेशन हैं जो वेब एप्लीकेशन घटकों को व्यक्त करने के लिए विस्तारित HTML के सिंटैक्स का उपयोग करते हैं। इसका उपयोग मुख्य रूप से गतिशील वेब एप्लीकेशन के लिए किया जाता है। ये एप्लीकेशन सामान्य वेब एप्लीकेशन की तुलना में कम और लचीले कोड का उपयोग करते हैं।

हम सामान्य का उपयोग करके Angular JS वेब तत्वों को क्यों नहीं ढूंढ सकते हैं? Selenium वेब ड्राइवर?

Angular JS अनुप्रयोगों में कुछ अतिरिक्त HTML विशेषताएँ होती हैं जैसे ng-repeater, ng-controller, ng-model.., आदि, जो इसमें शामिल नहीं हैं Selenium लोकेटर. Selenium उन वेब तत्वों की पहचान करने में सक्षम नहीं है Selenium कोड. तो, प्रोट्रैक्टर के शीर्ष पर Selenium वेब अनुप्रयोगों में उन विशेषताओं को संभाल और नियंत्रित कर सकता है।

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

प्रोट्रैक्टर शुरू करने से पहले हमें निम्नलिखित को स्थापित करना होगा:

Seleniumआप पा सकते हैं Selenium स्थापना चरण निम्नलिखित लिंक में हैं, (https://www.guru99.com/installing-selenium-webdriver.html )
NPM (Node.js)NodeJS इंस्टॉलेशन, हमें Protractor को इंस्टॉल करने के लिए NodeJS इंस्टॉल करना होगा। आप इस इंस्टॉलेशन स्टेप्स को निम्न लिंक में पा सकते हैं। ( https://www.guru99.com/download-install-node-js.html )

प्रोट्रैक्टर स्थापना

चरण 1) कमांड प्रॉम्प्ट खोलें और टाइप करें “एनपीएम इंस्टॉल –जी प्रोट्रैक्टर” और हिट दर्ज करें.

उपरोक्त कमांड आवश्यक फ़ाइलें डाउनलोड करेगा और क्लाइंट सिस्टम पर प्रोट्रैक्टर स्थापित करेगा।

चरण 2) स्थापना और संस्करण की जाँच करें "प्रोट्रैक्टर-संस्करण". यदि सफल रहा तो यह नीचे दिए गए स्क्रीनशॉट की तरह संस्करण दिखाएगा। यदि नहीं, तो चरण 1 को फिर से निष्पादित करें।

(चरण 3 और 4 वैकल्पिक हैं लेकिन बेहतर अभ्यास के लिए अनुशंसित हैं)

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

webdriver-manager update

चरण 4) वेब ड्राइवर मैनेजर शुरू करें। यह चरण वेब ड्राइवर मैनेजर को पृष्ठभूमि में चलाएगा और प्रोट्रैक्टर के माध्यम से चलने वाले किसी भी परीक्षण को सुनेगा।

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

webdriver-manager start

अब, यदि आप निम्नलिखित URL पर जाते हैं (http://localhost:4444/wd/hub/static/resource/hub.html) को अपने ब्राउज़र में खोलने पर, आप वास्तव में वेब ड्राइवर प्रबंधक को पृष्ठभूमि में चलता हुआ देखेंगे।

प्रोट्रैक्टर का उपयोग करके नमूना AngularJS अनुप्रयोग परीक्षण

प्रोट्रैक्टर को चलाने के लिए दो फ़ाइलों की आवश्यकता होती है, एक कल्पना फ़ाइल और विन्यास फ़ाइल.

विन्यास फाइल: यह फ़ाइल प्रोट्रैक्टर को यह जानने में मदद करती है कि परीक्षण फ़ाइलें कहाँ रखी गई हैं (specs.js) और उनसे बात करने में मदद करती है Selenium सर्वर (Selenium पता) क्रोम प्रोट्रैक्टर के लिए डिफ़ॉल्ट ब्राउज़र है।

स्पेक फ़ाइल: इस फ़ाइल में एप्लिकेशन के साथ बातचीत करने के लिए तर्क और लोकेटर शामिल हैं.

चरण 1) हमें लॉगइन करना होगा https://angularjs.org और “यहां नाम दर्ज करें” टेक्स्टबॉक्स में “GURU99” टेक्स्ट दर्ज करें।

चरण 2) इस चरण में,

“Guru99” नाम दर्ज किया गया
आउटपुट टेक्स्ट में " Hello Guru99 " दिखाई देता है।

चरण 3) अब हमें नाम दर्ज करने के बाद वेबपेज से टेक्स्ट कैप्चर करना होगा और अपेक्षित टेक्स्ट के साथ सत्यापन करना होगा.

कोड:

हमें कॉन्फ़िगरेशन फ़ाइल तैयार करनी है (conf.js) और स्पेक फ़ाइल (स्पेक.जेएस) जैसा कि ऊपर उल्लेख किया गया है।

Spec.js का तर्क:

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

Spec.js का कोड स्पष्टीकरण:

वर्णन('एंटर गुरु 99 नाम', फ़ंक्शन()वर्णन सिंटैक्स जैस्मीन फ्रेमवर्क से है। यहाँ "वर्णन" ('एंटर गुरु 99 नाम') आम तौर पर एक एप्लिकेशन के घटकों को परिभाषित करता है, जो एक क्लास या फ़ंक्शन आदि हो सकता है। "एंटर गुरु 99" नामक कोड सूट में, यह सिर्फ एक स्ट्रिंग है और कोड नहीं है।
it('नाम को GURU99 के रूप में जोड़ना चाहिए', फ़ंक्शन()
ब्राउज़र.get('https://angularjs.org')जैसा कि Selenium वेबड्राइवर ब्राउज़र.गेट उल्लिखित यूआरएल के साथ एक नया ब्राउज़र इंस्टेंस खोलेगा।
तत्व(द्वारा.मॉडल('आपका नाम')).सेंडकीज('GURU99') यहाँ हम मॉडल नाम "yourName" का उपयोग करके वेब तत्व ढूँढ रहे हैं, जो वेब पेज पर "ng-model" का मान है। नीचे दिए गए स्क्रीन शॉट को देखें-

var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) यहाँ हम वेब तत्व ढूंढ रहे हैं एक्सपाथ और इसके मान को एक चर “गुरु” में संग्रहीत करें.
उम्मीद(गुरु.getText()).बराबर करने के लिए('हैलो गुरु99!') अंत में हम वेबपेज से प्राप्त पाठ को (gettext() का उपयोग करके) अपेक्षित पाठ के साथ सत्यापित कर रहे हैं।

conf.js का तर्क:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

conf.js का कोड स्पष्टीकरण

seleniumAddress: 'http://localhost:4444/wd/hub'कॉन्फ़िगरेशन फ़ाइल प्रोट्रैक्टर को स्थान बताती है Selenium बात करने के लिए पता Selenium वेबड्राइवर.
specs: ['spec.js']यह लाइन प्रोट्रैक्टर को टेस्ट फ़ाइलों spec.js का स्थान बताती है

संहिता का क्रियान्वयन

यहाँ सबसे पहले, हम डायरेक्टरी पथ को बदलेंगे या उस फ़ोल्डर पर नेविगेट करेंगे जहाँ confi.js और spec.js हमारे सिस्टम में रखे गए हैं.

निम्नलिखित चरण का पालन करें.

चरण 1) कमांड प्रॉम्प्ट खोलें।

चरण 2) सुनिश्चित करें कि सेलेनियम वेब ड्राइवर मैनेजर चालू है। इसके लिए “webdriver-manager start” कमांड दें और एंटर दबाएँ.

(यदि सेलेनियम वेब ड्राइवर चालू नहीं है तो हम परीक्षण नहीं कर सकते, क्योंकि प्रोटैक्टर वेब अनुप्रयोग को संभालने के लिए वेब ड्राइवर नहीं ढूंढ सकता)

चरण 3) एक नया कमांड प्रॉम्प्ट खोलें और निम्न कमांड दें “प्रोट्रैक्टर conf.js” कॉन्फ़िगरेशन फ़ाइल चलाने के लिए.

स्पष्टीकरण:

यहां प्रोट्रैक्टर दी गई स्पेक फ़ाइल के साथ कॉन्फ़िगरेशन फ़ाइल को निष्पादित करेगा।
हम सेलेनियम सर्वर को " पर चलता हुआ देख सकते हैंhttp://localhost:4444/wd/hub” जो हमने conf.js फ़ाइल में दिया है।
इसके अलावा, यहां परिणाम देख सकते हैं कि कितने पास हुए और कितने असफल हुए जैसे कि ऊपर स्क्रीनशॉट में है.

ठीक है, हमने परिणाम को तब सत्यापित कर लिया जब वह पास हो गया या जैसा अपेक्षित था। अब आइए हम असफल परिणाम पर भी नज़र डालें।

चरण 1) Spec.js को खोलें और अपेक्षित परिणाम को नीचे दिए अनुसार “'हैलो चेंज GURU99” में बदलें।

Spec.js में परिवर्तन के बाद :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

चरण 2) Spec.js फ़ाइल को सहेजें और “कोड का निष्पादन” अनुभाग के उपरोक्त चरणों को दोहराएं

अब, उपरोक्त चरणों का पालन करें।

रिजल्ट:

हम स्क्रीनशॉट में 'F' द्वारा दर्शाए गए परिणाम को असफल के रूप में देख सकते हैं, तथा कारण भी बता सकते हैं “अपेक्षित है कि 'हैलो GURU99!' का अर्थ 'हैलो चेंज GURU99!' होगा। इसके अलावा, यह दिखाता है कि कोड निष्पादित करते समय कितनी विफलताएं सामने आईं।

क्या हम भी ऐसा ही कर सकते हैं? Selenium वेब ड्राइवर?

कभी-कभी हम XPath या CSS चयनकर्ता का उपयोग करके AngularJS अनुप्रयोगों के वेब तत्वों की पहचान कर सकते हैं Selenium वेब ड्राइवर। लेकिन AngularJS अनुप्रयोगों में, तत्व गतिशील रूप से उत्पन्न और परिवर्तित किए जाएंगे। इसलिए AngularJS अनुप्रयोगों के साथ काम करने के लिए प्रोट्रैक्टर बेहतर अभ्यास है।

जैस्मिन रिपोर्टर्स का उपयोग करके रिपोर्ट तैयार करें

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

XML प्रारूप में रिपोर्ट तैयार करने के लिए नीचे दिए गए चरणों का पालन करें।

जैस्मिन रिपोर्टर की स्थापना

ऐसा करने के दो तरीके हैं, स्थानीय स्तर पर या वैश्विक स्तर पर

स्थानीय रूप से इंस्टॉल करने के लिए कमांड प्रॉम्प्ट खोलें और निम्न कमांड निष्पादित करें

npm install --save-dev jasmine-reporters@^2.0.0

उपरोक्त कमांड जैस्मिन रिपोर्ट्स नोड-मॉड्यूल्स को स्थानीय रूप से स्थापित करेगा, अर्थात उस निर्देशिका से जहां हम कमांड प्रॉम्प्ट में कमांड चला रहे हैं।

कमांड प्रॉम्प्ट खोलें और वैश्विक स्थापना के लिए निम्नलिखित कमांड निष्पादित करें

npm install –g jasmine-reporters@^2.0.0

इस ट्यूटोरियल में, हम जैस्मीन रिपोर्टर्स को स्थानीय रूप से स्थापित करेंगे.

चरण 1) आदेश निष्पादित करें.

npm install --save-dev jasmine-reporters@^2.0.0

नीचे दिए गए कमांड प्रॉम्प्ट से।

चरण 2) निर्देशिका में स्थापना फ़ोल्डरों की जाँच करें. यदि यह नीचे दिए गए स्नैपशॉट की तरह सफलतापूर्वक स्थापित हो जाए तो "Node_modules" उपलब्ध होना चाहिए।

चरण 3) किसी मौजूदा conf.js फ़ाइल में निम्नलिखित रंगीन कोड जोड़ें

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

कोड का स्पष्टीकरण:

कोड में, हम रिपोर्ट तैयार कर रहे हैं “JUnitXML रिपोर्टर” और रिपोर्ट को संग्रहीत करने के लिए पथ देना।

चरण 4) कमांड प्रॉम्प्ट खोलें और कमांड निष्पादित करें प्रोट्रैक्टर conf.js.

चरण 5) जब आप उपरोक्त कोड निष्पादित करेंगे, तो उल्लिखित पथ में junitresults.xml उत्पन्न हो जाएगा।

चरण 6) XML खोलें और परिणाम की पुष्टि करें। विफलता संदेश परिणाम फ़ाइल में हमारे रूप में दिखाया गया है परीक्षण का मामला विफल हो गया है। परीक्षण मामला विफल हो गया है क्योंकि “spec.js” से अपेक्षित परिणाम वेब पेज से वास्तविक परिणाम से मेल नहीं खाता है

चरण 7) साक्ष्य या परिणाम फ़ाइलों के लिए junitresult.xml फ़ाइल का उपयोग करें।

सारांश

यद्यपि Selenium प्रोट्रैक्टर जो कुछ करता है, वह कुछ कर सकता है, प्रोट्रैक्टर AngularJS अनुप्रयोगों का परीक्षण करने के लिए औद्योगिक मानक और सर्वोत्तम अभ्यास है। एक प्रोट्रैक्टर इसमें कई क्षमताओं का प्रबंधन भी कर सकता है और वेब तत्वों के गतिशील परिवर्तनों को संभाल सकता है एनजी मॉडल, एनजी-क्लिक.., आदि.. (जो सेलेनियम नहीं कर सकता)।