सरू कमांड और कस्टम कमांड: 21 महत्वपूर्ण तथ्य

विषय - सूची

सरू कमांड

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

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

सरू द्वारा प्रदान किए गए 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() // बटन पर क्लिक करके cy.get('btn').click({force: true}) //'force' को true cy के रूप में पास करके बटन पर क्लिक करें। get('btn').click('bottomRight') // बॉटन राइट पोजीशन cy.get('btn') पर बटन पर क्लिक करें। क्लिक करें (10, 70, {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() // बटन पर डबल क्लिक करें cy.focused().dblclick() // फोकस के साथ एलिमेंट पर डबल क्लिक करें। 'होम' cy.get('button').dblclick('top') वाले पहले एलिमेंट पर क्लिक करें//टॉप पोजीशन cy.get('button').dblclick(30, 10) // पर बटन पर डबल क्लिक करें। 30 और 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() // .welcome cy.focused() पर राइट क्लिक करें। राइटक्लिक () // फोकस cy.contains ('जनवरी') वाले एलिमेंट पर राइट क्लिक करें। राइटक्लिक () / / 'जनवरी' cy.get('button').dblclick('topRight') वाले पहले एलिमेंट पर राइट क्लिक करें // टॉप राइट पोजीशन cy.get('button').dblclick(80, 20) पर बटन पर डबल क्लिक करें ) // 80 और 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') // टेक्स्ट क्षेत्र में मान दर्ज करें cy.get('body').type('{shift}') // शिफ्ट कुंजी cy.get को सक्षम करता है ('बॉडी')। टाइप ('{राइटएरो}') // टाइप इवेंट राइट एरो 

सरू साफ़ कमान

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

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

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

.clear()
.clear(options)

ऑप्शंस

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

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

उदाहरण

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

cy.get('[type="text"]').clear() // टाइप टेक्स्ट cy.get('textarea').type('Welcome!').clear() // Clear textarea cy का इनपुट साफ़ करें .focused().clear() // फोकस्ड इनपुट/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() // चेक चेकबॉक्स तत्व cy.get('[type="radio"]').first().check() // पहले रेडियो की जाँच करें तत्व cy.get('[type="radio"]').check('Male') // उस रेडियो तत्व की जांच करें जिसमें Male cy.get('[type="checkbox"]').uncheck() / है। /अनचेक चेकबॉक्स तत्व cy.get('[type="radio"]').uncheck() // पहले रेडियो तत्व को अनचेक करें cy.get('[type="checkbox"]').uncheck('Breakfast') // नाश्ते के तत्व को अनचेक करें

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

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

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

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

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

ऑप्शंस

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

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

उदाहरण

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

cy.get('select').select('butterfly') // 'butterfly' विकल्प का चयन करें cy.get('select').select(0) // 0 index cy.get('select('select) के साथ तत्व का चयन करता है ')। चयन करें (['तोता', 'मोर']) // तोता और मोर विकल्प का चयन करता है

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

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

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

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

.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') // एक लिंक पर ट्रिगर माउसओवर इवेंट बटन 0 cy.get ('बटन')। ट्रिगर ('माउसअप', टॉपराइट, {बुलबुले: गलत})

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

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

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

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

सरू हमें एक तत्व पर क्लिक करने या तत्वों का उपयोग करके टाइप करने की अनुमति देता है .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') // उम्मीद करें कि क्या बटन अक्षम किया जाना चाहिए cy.get('form'). चाहिए ('have.class', 'form-vertical') / /उम्मीद करें कि क्या फॉर्म में 'फॉर्म-वर्टिकल' cy.get('input'). should('not.have.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', (लेबल) => {cy.get('a').contains(label).click() }) // "Buy Now" लिंक पर क्लिक करें cy.clickLink('Buy अब')

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

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

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

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

उदाहरण

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

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (विषय, विकल्प) => {// मौजूदा विषय को रैप करें और इसके साथ कुछ करें cy.wrap(subject).click({force:true }) }) // परीक्षण फ़ाइल cy.get("[data-test='panel-VALUES']") में forceClick को एक्सेस करना। 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'); } और { cy.get('btn').its('button'); } })

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

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

cy.getButton() // विषय के बिना cy.get('#loginBtn').getButton() // विषय के साथ

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

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

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

उदाहरण

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

Cypress.Commands.overwrite('contains', ( originalFn, विषय, फ़िल्टर, टेक्स्ट, विकल्प = {}) => {// निर्धारित करें कि क्या फ़िल्टर तर्क पारित किया गया था यदि (टाइपऑफ टेक्स्ट === 'ऑब्जेक्ट') {विकल्प = टेक्स्ट टेक्स्ट = फ़िल्टर फ़िल्टर = अपरिभाषित} विकल्प। मैचकेस = झूठी वापसी मूल एफएन (विषय, फ़िल्टर, टेक्स्ट, विकल्प)})

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

सरू आयात आदेश

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

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

कमांड.जेएस फ़ाइल

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

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

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

Cypress.Commands.add ("लॉगिन", (उपयोगकर्ता नाम, पासवर्ड) => {// लॉगिन नाम का एक नया कमांड जोड़ना cy.get('[id=Email]').clear(); cy.get('[id =ईमेल]')। प्रकार (उपयोगकर्ता नाम); cy.get ('[आईडी = पासवर्ड]')। स्पष्ट (); cy.get ('[आईडी = पासवर्ड]')। प्रकार (पासवर्ड); cy.get( '[टाइप = सबमिट]')। क्लिक करें (); });
कमांड.जेएस फाइल में कस्टम कमांड

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

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

वर्णन करें ("कस्टम कमांड उदाहरण", () => { यह ("कस्टम कमांड का उपयोग करके लॉगिन करना चाहिए", () => { cy.visit ("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url(). चाहिए ('be.equal', 'https://admin-demo.nopcommerce.com/admin/')}); });
कस्टम कमांड तक पहुँचने वाली विशिष्ट फ़ाइल

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

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

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

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

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

// सरू वस्तु "साइ" के लिए परिभाषाएँ टाइप करें /// नेमस्पेस सरू घोषित करें {इंटरफ़ेस चेनेबल {/** * क्रेडेंशियल के साथ लॉगिन करें * @example * cy.login (उपयोगकर्ता नाम, पासवर्ड) */ लॉगिन (उपयोगकर्ता नाम: स्ट्रिंग, पासवर्ड: स्ट्रिंग): चेन करने योग्य } }

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

// "लॉगिन" जैसे कस्टम कमांड के लिए परिभाषा टाइप करें // "सरू/support/index.d.ts" को हल करेगा //
IntelliSense द्वारा प्रदान किया गया सुझाव

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

ऊपर स्क्रॉल करें