सरू कमांड और सरू कस्टम कमांड: हैंड्सऑन

सरू कमांड

विषय - सूची

सरू कमांड क्या है?

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

सरू द्वारा प्रदान किए गए UI इंटरेक्शन कमांड

सरू द्वारा प्रदान किए गए विभिन्न आदेश हैं जो यूआई के साथ बातचीत करते हैं। हम सभी कमांड की सूची को विस्तार से देखेंगे।

  • क्लिक करें ()
  • .डीबीएलक्लिक ()
  • ।दाएँ क्लिक करें()
  • ।प्रकार()
  • ।स्पष्ट()
  • ।जाँच()
  • .अनचेक ()
  • ।चुनते हैं()
  • ट्रिगर ()

सरू क्लिक कमांड

क्लिक करें () - यह आदेश to . है क्लिक करें डोम पर कोई तत्व।

क्लिक कमांड के लिए सिंटैक्स निम्नलिखित हैं:

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

जैसा कि आप ऊपर देख सकते हैं, क्लिक पैरामीटर स्वीकार करता है जैसे विकल्प, स्थिति, और निर्देशांक.

ऑप्शंस

क्लिक करने के लिए पास किए जा सकने वाले संभावित विकल्प हैं

विकल्पचूकविवरण
ऑल्ट कीअसत्यवैकल्पिक कुंजी (मैक में विकल्प कुंजी) पर स्विच करें, जैसे optionKey
ctrlKeyअसत्यनियंत्रण कुंजी चालू करें। के रूप में भी जाना जाता है: controlKey.
मेटाकीअसत्यमेटा कुंजी (विंडोज़ में विंडोज़ कुंजी या मैक में कमांड कुंजी) को सक्रिय करता है। भी: commandKeycmdKey.
शिफ्ट कुंजीअसत्यशिफ्ट कुंजी को सक्रिय करता है
लॉग इन<strong>उद्देश्य</strong>कमांड लाइन में लॉग प्रिंट करता है
मजबूरअसत्ययह विकल्प कार्रवाई को बाध्य करता है और क्रियाशीलता की प्रतीक्षा को अक्षम करता है
विभिन्नअसत्यक्रमिक रूप से एकाधिक तत्वों पर क्लिक करें
मध्यांतरडिफ़ॉल्टकमांडटाइमआउटसमय समाप्त करने से पहले .क्लिक () प्रतीक्षा के लिए समय
प्रतीक्षा के लिएएनिमेशनप्रतीक्षा के लिएएनिमेशनकमांड निष्पादित करने से पहले तत्वों को एनिमेट करने के लिए प्रतीक्षा करने का विकल्प
क्लिक में विकल्प

स्थितियां

विभिन्न प्रकार की स्थितियाँ जिन्हें .क्लिक () में पास किया जा सकता है, हैं

  • केंद्र (चूक)
  • बाएं
  • सही
  • ऊपर का
  • बाएं से बाएं
  • ठीक तरह से ऊपर
  • तल
  • तली छोड़ें
  • नीचे दाएं

उदाहरण

cy.get('btn').click()  //clicking the button 

cy.get('btn').click({ force: true })  //clicking the button by passing the option 'force' as true

cy.get('btn').click('bottomRight') // clicking the button at the botton right position

cy.get('btn').click(10, 70, { force: true }) // clicking the button with position value and force true

सरू डबल क्लिक कमांड

डबल क्लिक का उपयोग करके प्राप्त किया जा सकता है dblclick() सरू में वाक्य रचना।

वाक्य - विन्यास

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

ऑप्शंस

.dblclick() द्वारा स्वीकार किए गए सभी विकल्पों को स्वीकार करता है .click(). आप उपरोक्त अनुभाग में विकल्प पा सकते हैं।

स्थितियां

सभी संभावित पद जो में निर्दिष्ट हैं .click() के लिए भी उपलब्ध हैं dblclick(). पदों की सूची उपरोक्त अनुभाग में पाई जा सकती है।

उदाहरण

cy.get('button').dblclick() // Double click on button

cy.focused().dblclick() // Double click on element with focus

cy.contains('Home').dblclick() // Double click on first element containing 'Home'

cy.get('button').dblclick('top') // Double click on the button on top position

cy.get('button').dblclick(30, 10) // Double click on the coordinates of 30 and 10

सरू राइट क्लिक कमांड

यह सरू कमांड, DOM एलिमेंट पर राइट क्लिक करता है .rightclick() कमांड ब्राउज़र के संदर्भ मेनू नहीं खोलेगा.rightclick() एप्लिकेशन में राइट क्लिक से संबंधित घटनाओं के प्रबंधन का परीक्षण करने के लिए प्रयोग किया जाता है जैसे कि contextmenu.

वाक्य - विन्यास

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

ऑप्शंस

जैसा कि हमने ऊपर देखा, सभी विकल्प जो स्वीकार किए जाते हैं .click() कमांड के साथ विन्यस्त किया जा सकता है .rightclick() आदेश भी।

स्थितियां

सभी संभावित पद जिन्हें पारित किया जा सकता है .rightclick() के समान है .click() उपर्युक्त।

उदाहरण

cy.get('.welcome').rightclick() // Right click on .welcome

cy.focused().rightclick() // Right click on element with focus

cy.contains('January').rightclick() // Right click on first element containing 'January'

cy.get('button').dblclick('topRight') // Double click on the button on top right position

cy.get('button').dblclick(80, 20) // Double click on the coordinates of 80 and 20

सरू टाइप कमांड

.type() कमांड DOM तत्व में मान दर्ज करता है।

वाक्य - विन्यास

.type(text)
.type(text, options)

तर्क

.type() स्ट्रिंग को तर्क के रूप में स्वीकार करता है। मान को पास किया गया .type() नीचे दिए गए विशेष वर्ण अनुक्रमों में से कोई भी शामिल कर सकते हैं।

अनुक्रमनोट्स
{{}शाब्दिक में प्रवेश करता है { कुंजी
{backspace}कर्सर के दाएँ से बाएँ वर्ण को हटाता है
{del}कर्सर के बाएँ से दाएँ वर्ण को हटाता है
{downarrow}कर्सर को नीचे ले जाता है
{end}कर्सर को लाइन के अंत में शिफ्ट करता है
{enter}एंटर कुंजी टाइप करें
{esc}एस्केप कुंजी टाइप करता है
{home}कर्सर को लाइन की शुरुआत में शिफ्ट करता है
{insert}कर्सर के दाईं ओर स्थित वर्ण
{leftarrow}कर्सर को बाईं ओर ले जाता है
{movetoend}टाइप करने योग्य तत्व के अंत में कर्सर को शिफ्ट करता है
{movetostart}टाइप करने योग्य तत्व की शुरुआत में कर्सर को शिफ्ट करता है
{pagedown}नीचे स्क्रॉल करें
{pageup}ऊपर स्क्रॉल करें
{rightarrow}कर्सर को दाईं ओर ले जाता है
{selectall}a . बनाकर सभी टेक्स्ट का चयन करता है selection range
{uparrow}कर्सर को ऊपर ले जाता है

ऑप्शंस

हम ऑब्जेक्ट्स में डिफ़ॉल्ट व्यवहार को संशोधित करने के विकल्प के रूप में पास कर सकते हैं .type()

विकल्पचूकविवरण
delay10प्रत्येक कीप्रेस के बाद समय में देरी का विकल्प
forcefalseक्रिया को निष्पादित करने के लिए बाध्य करता है और अक्षम करता है कार्रवाई की प्रतीक्षा कर रहा है
logtrueमें लॉग प्रदर्शित करता है कमांड लॉग
parseSpecialCharSequencestrueसे घिरे तारों के लिए विशेष वर्ण पार्स करें {}इस तरह के रूप में, {esc}. आप विकल्प को सेट कर सकते हैं false शाब्दिक पात्रों में प्रवेश करने के लिए।
releasetrueयह विकल्प कमांड के बीच संशोधक को सक्रिय रहने में सक्षम बनाता है
scrollBehaviorscrollBehaviorव्यूपोर्ट स्थिति जहां किसी भी कमांड को निष्पादित करने से पहले एक तत्व को स्क्रॉल किया जाना है
timeoutdefaultCommandTimeoutप्रतीक्षा करने का समय .type() समय समाप्त होने से पहले हल करने का आदेश
waitForAnimationswaitForAnimationsयह कहने के लिए कि क्या तत्वों की प्रतीक्षा करनी है एनिमेटिंग समाप्त करें किसी भी आदेश को निष्पादित करने से पहले।
टाइप कमांड के लिए विकल्प

उदाहरण

आइए इसके लिए उदाहरण देखें .type() आदेश

cy.get('textarea').type('Hey there') // enter value in the text area

cy.get('body').type('{shift}') //enables the shift key

cy.get('body').type('{rightarrow}') //type event right arrow 

सरू साफ़ कमान

क्लियर कमांड इनपुट एरिया या टेक्स्ट फील्ड में वैल्यूज को क्लियर कर देगा।

वाक्य - विन्यास

स्पष्ट आदेश के लिए वाक्य रचना इस प्रकार है।

.clear()
.clear(options)

ऑप्शंस

हम उन विकल्पों पर गौर करेंगे जिन्हें पारित किया जा सकता है .clear() आदेश।

विकल्पचूकविवरण
forcefalseयह कार्रवाई को बाध्य करेगा और क्रियाशीलता के घटित होने की प्रतीक्षा को अक्षम कर देगा
logtrueकमांड लॉग में कमांड दिखाता है
scrollBehaviorscrollBehaviorव्यूपोर्ट की स्थिति जहां एक तत्व को कमांड करने से पहले स्क्रॉल किया जाना चाहिए
timeoutdefaultCommandTimeoutयह विकल्प प्रतीक्षा करने का समय है .clear() समय समाप्त होने से पहले हल करने के लिए
waitForAnimationswaitForAnimationsयह कमांड को निष्पादित करने से पहले तत्वों के एनिमेटिंग को पूरा करने की प्रतीक्षा करेगा।
स्पष्ट आदेश के लिए विकल्प

उदाहरण

आइए स्पष्ट आदेश के उदाहरण देखें

cy.get('[type="text"]').clear() // Clear input of type text

cy.get('textarea').type('Welcome!').clear() // Clear textarea 

cy.focused().clear() // Clear focused input/textarea

सरू चेक कमांड

चेक कमांड चेक करेगा या सरल शब्दों में, चेकबॉक्स या रेडियो बटन पर टिक करें। आप चेकबॉक्स या रेडियो बटन का उपयोग करके अनचेक कर सकते हैं .uncheck() आदेश।

वाक्य - विन्यास

हम सरू में चेक कमांड के सिंटैक्स को समझेंगे।

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

ऑप्शंस

कमांड को चेक/अनचेक करने के लिए जिन संभावित विकल्पों को पास किया जा सकता है, वे विकल्प ऊपर सूचीबद्ध स्पष्ट कमांड के समान हैं

उदाहरण

हम इस उदाहरण में देखेंगे कि हम चेक और अनचेक कमांड का उपयोग कैसे कर सकते हैं।

cy.get('[type="checkbox"]').check() // Check checkbox element

cy.get('[type="radio"]').first().check() // Check first radio element

cy.get('[type="radio"]').check('Male') //Check the radio element which has Male

cy.get('[type="checkbox"]').uncheck() //Uncheck checkbox element

cy.get('[type="radio"]').uncheck()  //Uncheck the first radio element

cy.get('[type="checkbox"]').uncheck('Breakfast') // Uncheck the breakfast element

सरू सेलेक्ट कमांड

सरू का चयन करें कमांड आपको a . के भीतर तत्वों का चयन करने की अनुमति देता है उपनाम।

वाक्य - विन्यास

चुनिंदा कमांड के लिए सिंटैक्स निम्नलिखित हैं:

.select(value)
.select(values)
.select(value, options)
.select(values, options)

ऑप्शंस

हम चुनिंदा कमांड के डिफ़ॉल्ट व्यवहार को संशोधित करने के लिए विकल्पों में पास कर सकते हैं।

विकल्पचूकविवरण
forcefalseयह विकल्प कार्रवाई करने के लिए बाध्य करता है और क्रियाशीलता की प्रतीक्षा को अक्षम करता है
logtrueकमांड लॉग में लॉग प्रदर्शित करता है और डिफ़ॉल्ट रूप से सत्य के रूप में सेट होता है
timeoutdefaultCommandTimeoutयह विकल्प प्रतीक्षा करने का समय है .select() समय समाप्त होने से पहले हल करने के लिए
चयन आदेश के लिए विकल्प

उदाहरण

आइए सेलेक्ट कमांड के उदाहरण देखें

cy.get('select').select('butterfly') // Select the 'butterfly' option

cy.get('select').select(0) // selects the element with 0 index

cy.get('select').select(['parrot', 'peacock']) //selects the parrot and peacock option

सरू ट्रिगर कमांड

ट्रिगर कमांड तत्व पर किसी भी घटना को ट्रिगर करने में मदद करता है।

वाक्य - विन्यास

हम ट्रिगर कमांड को एक्सेस करने के लिए सिंटैक्स पर गौर करेंगे

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

विकल्प

ट्रिगर कमांड उन सभी विकल्पों को स्वीकार करता है जिनका उल्लेख किया गया है .clear() आदेश। इसके अतिरिक्त, कुछ विकल्प हैं जिन्हें हम कॉन्फ़िगर कर सकते हैं जो नीचे सूचीबद्ध हैं।

विकल्पचूकविवरण
bubblestrueक्या घटना बुलबुला होना चाहिए
cancelabletrueक्या कार्यक्रम रद्द किया जा सकता है
eventConstructorEventइवेंट ऑब्जेक्ट बनाने के लिए कंस्ट्रक्टर (जैसे .) MouseEvent, keyboardEvent)
ट्रिगर कमांड के लिए विकल्प

उदाहरण

आइए हम उपयोग करने के विभिन्न तरीके .trigger() कोड में

cy.get('a').trigger('mouseover') // Trigger mouseover event on a link

cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown triggered at button 0

cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup triggered on topRight position with setting bubble as false

क्या सरू कमांड एसिंक्स हैं?

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

सरू चैनेबल कमांड्स

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

सरू हमें एक तत्व पर क्लिक करने या तत्वों का उपयोग करके टाइप करने की अनुमति देता है .click() or .type() तत्वों का उपयोग करके आदेश cy.get() or cy.contains(). आइए कमांड को चेन करने का एक सरल उदाहरण देखें

cy.get('textarea').type('How are you?')

उपरोक्त उदाहरण में, cy.get() एक सरू कमांड है और .type() एक और आदेश है, जहां हम जंजीर कर रहे हैं .type() पर आदेश cy.get() कमांड, यह उस विषय को टाइप करने के लिए कह रहा है जो से उत्पन्न हुआ है cy.get() तत्व। इसी तरह, हम उन सभी कमांड्स को चेन कर सकते हैं जिनकी हमने ऊपर चर्चा की थी।

सरू में चेनिंग अभिकथन आदेश

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

cy.get('button').should('be.disabled') //expect whether the button should be disabled

cy.get('form').should('have.class', 'form-vertical') //expect whether the form should have class as 'form-vertical'

cy.get('input').should('not.have.value', 'Name') // assert whether the input should not have the value 'Name'

जैसा कि ऊपर सूचीबद्ध है, हम उपयोग कर रहे हैं cy.get() आदेश और इसे के साथ जंजीर .should() परिणाम के आधार पर व्यवहार की अपेक्षा करने के लिए अभिकथन आदेश। इस तरह, हम सरू में चेन अभिकथन कमांड का उपयोग कर सकते हैं।

सरू कस्टम कमांड

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

आइए सरू में एक नया कस्टम कमांड बनाने के लिए सिंटैक्स देखें।

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

जहां तर्क इस प्रकार हैं

नाम - स्ट्रिंग में कमांड का नाम जिसे हम जोड़ना या अधिलेखित करना चाहते हैं

कॉलबैकFn - यह फ़ंक्शन कमांड को दिया गया तर्क लेता है

विकल्पों - कमांड के व्यवहार को परिभाषित करने के लिए किसी भी विकल्प ऑब्जेक्ट को पास करें

नोट : विकल्प केवल ऐड कमांड के लिए समर्थित हैं और अधिलेखित आदेशों के लिए समर्थन न करें

विकल्पस्वीकार करता हैचूकविवरण
prevSubjectBooleanString or Arrayfalseपरिभाषित करता है कि पहले से प्राप्त विषय को कैसे संभालना है।

विकल्प जो prevSubject स्वीकार इस प्रकार हैं

  • false - पिछले विषयों पर ध्यान न दें (पैरेंट कमांड)
  • true - पिछले विषयों को स्वीकार करें (चाइल्ड कमांड)
  • optional - पास करें कि क्या आप एक नई श्रृंखला शुरू करना चाहते हैं या मौजूदा श्रृंखला का उपयोग करना चाहते हैं (दोहरी कमांड)

सरू में जनक कस्टम कमांड

हम देखेंगे कि सरू में पैरेंट कस्टम कमांड कैसे जोड़ें। पेरेंट कमांड हमेशा कमांड की एक नई श्रृंखला शुरू करेगा, भले ही आपने पिछले कमांड को बंद कर दिया हो। पहले से जंजीर वाली कमांड को नजरअंदाज कर दिया जाएगा और एक नया कमांड हमेशा जंजीर में रहेगा। कुछ पैरेंट कमांड हैं cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

उदाहरण

हम सरू में पैरेंट कस्टम कमांड लिखने का एक उदाहरण देखेंगे

Cypress.Commands.add('clickLink', (label) => {
  cy.get('a').contains(label).click()
})

//clicking the "Buy Now" link
cy.clickLink('Buy Now')

उपरोक्त उदाहरण में 'लिंक पर क्लिक करें' हमारे कस्टम कमांड का नाम है। यह खोजेगा लेबल. पंक्ति 2 में, आदेश मिलता है 'a', और उस लिंक को खोजें जिसमें लेबल है और तत्व पर क्लिक करें। cy.clickLink() परीक्षण फ़ाइल में कार्रवाई निष्पादित करेगा और "अभी खरीदें" संपर्क।

सरू में चाइल्ड कस्टम कमांड

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

कुछ सरू कमांड जिन्हें चाइल्ड कमांड के रूप में जंजीर में बांधा जा सकता है, वे हैं: .click(), .trigger(), .should(), .find(), .as()

उदाहरण

हम एक उदाहरण देखेंगे कि चाइल्ड कस्टम कमांड को कैसे चेन किया जाए

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => {
  // wrap the existing subject and do something with it
  cy.wrap(subject).click({force:true})
})

//accessing the forceClick in the test file
cy.get("[data-test='panel-VALUES']").forceClick();

उपरोक्त उदाहरण में, हम अपने कस्टम कमांड का नामकरण 'के रूप में कर रहे हैं।फोर्सक्लिक'। हम तत्व के लिए prevSubject तर्क पारित कर रहे हैं और मौजूदा विषय को लपेट रहे हैं। साथ में cy.wrap(), हम विषय पर बलपूर्वक क्लिक कर रहे हैं। फिर परीक्षण फ़ाइल में, हम कस्टम कमांड को एक्सेस कर रहे हैं, 'फोर्सक्लिक' पर cy.get() आदेश।

साइप्रस में दोहरी कस्टम कमांड

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

कुछ कमांड जिनका उपयोग डुअल कमांड के लिए किया जा सकता है, वे हैं: cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

उदाहरण

आइए एक उदाहरण देखें कि दोहरे कस्टम कमांड का उपयोग कैसे करें

Cypress.Commands.add('getButton', {
  prevSubject: 'optional'
}, (subject) => {
  if (subject) {
   cy.get(subject).get('btn').its('button');
  } else {
    cy.get('btn').its('button');
  }
})

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

के बाद से prevSubject वैकल्पिक है, हम या तो विषय को तर्क के रूप में पास कर सकते हैं या नीचे दिए गए परीक्षण फ़ाइल में विषय के बिना कमांड को लागू कर सकते हैं

cy.getButton() // without the subject

cy.get('#loginBtn').getButton() // with the subject

मौजूदा सरू कमांडों को अधिलेखित करना

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

कुछ मूल सरू कमांड जिन्हें अधिलेखित किया जा सकता है: cy.visit(), cy.type(), cy.screenshot(), cy.contains()

उदाहरण

आइए एक उदाहरण देखें कि हम मौजूदा सरू कमांड को कैसे अधिलेखित कर सकते हैं।

Cypress.Commands.overwrite('contains',
  (originalFn, subject, filter, text, options = {}) => {
    // determine if a filter argument was passed
    if (typeof text === 'object') {
      options = text
      text = filter
      filter = undefined
    }

    options.matchCase = false

    return originalFn(subject, filter, text, options)
  }
)

जैसा कि हमने ऊपर देखा, हम उपयोग कर रहे हैं सरू.कमांड.ओवरराइट मौजूदा सरू कमांड को संशोधित करने के लिए। हम अपने कस्टम कमांड का नामकरण कर रहे हैं contains और हम यह निर्धारित करने के लिए तर्क पारित कर रहे हैं कि फ़िल्टर तर्क पारित हो गया है या नहीं।

सरू आयात आदेश

इस खंड में, हम समझेंगे कि सरू कमांड को कैसे आयात किया जाए।

हमें अपना सरू कस्टम कमांड बनाना होगा सरू/समर्थन/commands.js फ़ाइल। हम कमांड.जेएस फ़ाइल में कस्टम कमांड जोड़ेंगे और इसका उपयोग करने के लिए अपनी टेस्ट केस फ़ाइल में आयात करेंगे।

सरू कमांड और सरू कस्टम कमांड: हैंड्सऑन
कमांड.जेएस फ़ाइल

उदाहरण के साथ सरू कस्टम कमांड

हम समझेंगे कि कस्टम कमांड कैसे बनाया जाता है और वास्तविक समय के उदाहरण के साथ हमारी कल्पना फ़ाइल में इसका उपयोग किया जाता है।

जैसा कि हमने ऊपर देखा, हमें इसके अंतर्गत नए कस्टम कमांड जोड़ने होंगे आदेश.जेएस फ़ाइल। उस फ़ाइल में, हम एक लॉगिन फ़ंक्शन के लिए एक कस्टम कमांड जोड़ते हैं

Cypress.Commands.add("login", (username, password) => {
    //adding a new command named login
    cy.get('[id=Email]').clear();
    cy.get('[id=Email]').type(username);
    cy.get('[id=Password]').clear();
    cy.get('[id=Password]').type(password);
    cy.get('[type=submit]').click();
  });
सरू कमांड और सरू कस्टम कमांड: हैंड्सऑन
कमांड.जेएस फाइल में कस्टम कमांड

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

अब हम नाम की एक स्पेक फाइल बनाते हैं customCommand.spec.js एकीकरण फ़ोल्डर के तहत। हमारी विशिष्ट फ़ाइल में निम्न कोड होगा

describe("Custom Commands Example", () => {
    it("should login using the custom commands", () => {
      cy.visit("https://admin-demo.nopcommerce.com/");
      cy.login("admin@yourstore.com", "admin");
      cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    });
  });
सरू कमांड और सरू कस्टम कमांड: हैंड्सऑन
कस्टम कमांड तक पहुँचने वाली विशिष्ट फ़ाइल

जैसा कि हमने ऊपर देखा, हम अपने कस्टम कमांड को इस प्रकार एक्सेस कर रहे हैं: cy.login() , जहां हम उपयोगकर्ता नाम और पासवर्ड के मूल्यों को पारित कर रहे हैं।

सरू कस्टम कमांड IntelliSense

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

IntelliSense सिंटैक्स को समझने और प्रदर्शित करने के लिए टाइपस्क्रिप्ट का उपयोग करता है। यदि हम कस्टम कमांड लिखते हैं और कस्टम कमांड के लिए टाइपस्क्रिप्ट परिभाषा प्रदान करते हैं, तो हम IntelliSense को प्रदर्शित करने के लिए ट्रिपल स्लैश का उपयोग कर सकते हैं, भले ही हमारा प्रोजेक्ट केवल जावास्क्रिप्ट का उपयोग करता हो।

IntelliSense को कॉन्फ़िगर करने के लिए, हमें कोड का वर्णन करने की आवश्यकता है सरू/समर्थन/index.d.ts फ़ाइल.

// type definitions for Cypress object "cy"
/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable<Subject> {
      /**
       * Login with credentials
       * @example
       * cy.login(username,password)
       */
      login(username: String, password: String): Chainable<any>
    }
  }

अब, हमें अपनी विशिष्ट फाइलों को बताना चाहिए कि इसमें कुछ टाइपप्रति परिभाषाएं हैं index.d.ts फ़ाइल। इसलिए, हमारी विशिष्ट फ़ाइल की शुरुआत में, IntelliSense को हमारे लिए सुझाव प्रदान करने के लिए नीचे दिया गया कोड जोड़ें।

// type definitions for custom commands like "login"
// will resolve to "cypress/support/index.d.ts"
// <reference types="../support" />
सरू कमांड और सरू कस्टम कमांड: हैंड्सऑन
IntelliSense द्वारा प्रदान किया गया सुझाव

जैसा कि हमने ऊपर देखा, IntelliSense हमें हमारे कमांड.जेएस फ़ाइल में प्रदान किया गया तर्क प्रदान करता है और स्वतः पूर्ण करने में मदद करता है।

ऐश्वर्या लक्ष्मी के बारे में

सरू कमांड और सरू कस्टम कमांड: हैंड्सऑनमैं एक परीक्षण उत्साही हूं और परीक्षण क्षेत्र में लगभग 2+ वर्षों का अनुभव रखता हूं। मुझे अपने क्षेत्र में नई चीजों का पता लगाने और उन्हें अपने साथियों के साथ साझा करने के लिए परीक्षण और प्यार करने का शौक है। मुझे अपने खाली समय में सबसे सरल लेकिन प्रभावी तरीके से ब्लॉग लिखना अच्छा लगता है। एक परीक्षक के रूप में, मैं चीजों को पूर्णता में रखना पसंद करता हूं, इसलिए मैं चाहता हूं कि मेरे पाठकों को तकनीक की सही समझ हो। मैं परीक्षण से संबंधित नई तकनीकों से खुद को अपडेट रखता हूं और उन्हें समझने में समय बिताता हूं। मुझे छात्रों को परीक्षण में अवधारणाओं को समझने में मदद करने में खुशी हो रही है।
आइए लिंक्डइन के माध्यम से जुड़ें - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

en English
X