সাইপ্রেস কমান্ড এবং সাইপ্রেস কাস্টম কমান্ড: হ্যান্ডসঅন

সাইপ্রেস কমান্ড

সুচিপত্র

সাইপ্রেস কমান্ড কি?

Cypress আমাদের API এবং অ্যাপ্লিকেশনগুলির UI- এর সাথে ইন্টারঅ্যাক্ট করার পদ্ধতি প্রদান করে। এগুলি সাইপ্রেস কমান্ড হিসাবে পরিচিত এবং ওয়েব অ্যাপ্লিকেশনটির মিথস্ক্রিয়াতে সহায়তা করে। যে সমস্ত কমান্ড পাওয়া যায় তার অন্তর্নির্মিত পদ্ধতি রয়েছে এবং আমরা কেবল আমাদের পরীক্ষার ক্ষেত্রে পদ্ধতিগুলি প্রয়োগ করব। সাইপ্রাস কমান্ডগুলি ব্যবহারকারীর অ্যাপ্লিকেশনে অপারেশন করার চেষ্টা করার জন্য অনুরূপ ক্রিয়া অনুকরণ করবে।

ইউআই ইন্টারঅ্যাকশন কমান্ড সাইপ্রাস দ্বারা সরবরাহ করা হয়

সাইপ্রাস দ্বারা প্রদত্ত বিভিন্ন কমান্ড রয়েছে যা UI- এর সাথে যোগাযোগ করে। আমরা বিস্তারিতভাবে সমস্ত কমান্ডের তালিকা দেখব।

  • .ক্লিক()
  • .dblclick ()
  • .সঠিক পছন্দ()
  • .type ()
  • .পরিষ্কার()
  • .check ()
  • .uncheck ()
  • .select ()
  • .trigger ()

সাইপ্রেস কমান্ড ক্লিক করুন

.ক্লিক() - এই আদেশটি হল ক্লিক DOM- এর যেকোন উপাদান।

ক্লিক কমান্ডের জন্য সিনট্যাক্স নিম্নরূপ

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

আপনি উপরে দেখতে পাচ্ছেন, ক্লিকটি যেমন প্যারামিটার গ্রহণ করে বিকল্প, অবস্থান, এবং স্থানাঙ্ক.

অপশন সমূহ

সম্ভাব্য বিকল্পগুলি যা ক্লিক করার জন্য পাস করা যেতে পারে

পছন্দডিফল্টবিবরণ
altKeyমিথ্যাবিকল্প কী (ম্যাকের বিকল্প কী) চালু করুন, যেমন optionKey
ctrlKeyমিথ্যাকন্ট্রোল কী চালু করুন। এই নামেও পরিচিত: controlKey.
মেটাকেমিথ্যামেটা কী (উইন্ডোজে উইন্ডোজ কী বা ম্যাকের কমান্ড কী) চালু করে। এছাড়াও: commandKeycmdKey.
কিম্পিউটার কি বোর্ডের শিফট কিমিথ্যাশিফট কী সক্রিয় করে
লগ ইন করুনসত্যকমান্ড লাইনে লগ প্রিন্ট করে
বলমিথ্যাএই বিকল্পটি কর্মকে জোর করে এবং কর্মক্ষমতার জন্য অপেক্ষা অক্ষম করে
বহুমিথ্যাক্রমানুসারে একাধিক উপাদানে ক্লিক করুন
সময় শেষdefaultCommandTimeoutসময় শেষ করার আগে .click () এর জন্য অপেক্ষা করুন
অপেক্ষা করুন অ্যানিমেশনের জন্যঅপেক্ষা করুন অ্যানিমেশনের জন্যকমান্ডটি কার্যকর করার আগে উপাদানগুলি অ্যানিমেশন সম্পূর্ণ করার জন্য অপেক্ষা করার বিকল্প
ক্লিকের বিকল্প

পজিশন

বিভিন্ন ধরনের পজিশন যা .click () এ পাস করা যায়

  • কেন্দ্র (ডিফল্ট)
  • বাম
  • অধিকার
  • শীর্ষ
  • উপরে বাঁদিকে
  • উপরের ডানে
  • পাদ
  • নিচে বামে
  • নিচের ডানে

উদাহরণ

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

সাইপ্রেস রাইট ক্লিক কমান্ড

এই সাইপ্রেস কমান্ডটি ডোম এলিমেন্টে ডান ক্লিক করে .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}Escape কী টাইপ করুন
{home}কার্সারটি লাইনের শুরুতে স্থানান্তরিত করে
{insert}কার্সারের ডানদিকে অক্ষর অবস্থান করে
{leftarrow}কার্সার বাম দিকে সরায়
{movetoend}কার্সারটি টাইপযোগ্য উপাদানটির শেষে স্থানান্তরিত করে
{movetostart}কার্সারটি টাইপযোগ্য উপাদান শুরুতে স্থানান্তরিত করে
{pagedown}নিচে স্ক্রল করে
{pageup}স্ক্রল আপ
{rightarrow}কার্সার ডানদিকে বদল করে
{selectall}একটি তৈরি করে সমস্ত পাঠ্য নির্বাচন করে 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

সাইপ্রেস কমান্ড নির্বাচন করুন

সিলেক্ট সাইপ্রেস কমান্ড আপনাকে একটি এর মধ্যে উপাদান নির্বাচন করতে দেয় ট্যাগ

বাক্য গঠন

নির্বাচিত কমান্ডের জন্য সিনট্যাক্স নিম্নরূপ

.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

সাইপ্রাস কমান্ডগুলি কি অ্যাসিঙ্ক?

সমস্ত সাইপ্রেস কমান্ড অসিঙ্ক্রোনাস। তারা পরবর্তী সময়ে মৃত্যুদণ্ডের জন্য সারিবদ্ধ এবং কমান্ড সমাপ্তির জন্য অপেক্ষা করবে না। সাইপ্রাস কমান্ড তাদের আহ্বানের সময় কিছু করে না, বরং তারা এটি পরে কার্যকর করার জন্য সংরক্ষণ করে। আপনি Cypress এর অসিঙ্ক্রোনাস আচরণ বুঝতে পারেন এখানে

সাইপ্রেস চেইনযোগ্য কমান্ড

সাইপ্রাসে, আমরা DOM- এর উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য একের পর এক কমান্ড ব্যবহার করতে পারি। কমান্ডের শৃঙ্খল কীভাবে অভ্যন্তরীণভাবে কাজ করে তা বোঝা অপরিহার্য। যদি আমরা একটি নির্দিষ্ট লাইনে কমান্ড চেইন করে থাকি, তাহলে সাইপ্রেস কমান্ড চেইনের উপর ভিত্তি করে একটি প্রতিশ্রুতি পরিচালনা করবে এবং পরবর্তী কমান্ডের উপর ভিত্তি করে একটি কমান্ড প্রদান করবে, যতক্ষণ না কমান্ডের চেইন শেষ হয় বা একটি ত্রুটি ঘটে।

সাইপ্রাস আমাদেরকে একটি উপাদান ক্লিক করতে বা উপাদানগুলিতে টাইপ করতে দেয় .click() or .type() ব্যবহার করে উপাদান পেয়ে কমান্ড cy.get() or cy.contains()। আসুন চেইন কমান্ডের একটি সহজ উদাহরণ দেখি

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

উপরের উদাহরণে, cy.get() একটি সাইপ্রেস কমান্ড এবং .type() আরেকটি আদেশ, যেখানে আমরা শৃঙ্খলিত করছি .type() উপর নির্দেশ cy.get() কমান্ড, এটি থেকে প্রাপ্ত বিষয়টিতে টাইপ করতে বলছে cy.get() উপাদান একইভাবে, আমরা উপরে বর্ণিত সমস্ত কমান্ড চেইন করতে পারি।

সাইপ্রেসে চেইন অ্যাসারশন কমান্ড

সাইপ্রেস ব্যবহার করে একাধিক কমান্ড শৃঙ্খলিত করার মতো, আমরা কমান্ডের সাহায্যে চেইন অ্যাসারেশনও করতে পারি। অনুমানগুলি এমন আদেশ যা আপনাকে বর্ণনা করতে দেয় প্রত্যাশিত আবেদনের অবস্থা বা আচরণ। উপাদানগুলি প্রত্যাশিত অবস্থায় না পৌঁছানো পর্যন্ত সাইপ্রাস অপেক্ষা করবে এবং দাবিগুলি পাস না হলে পরীক্ষা ব্যর্থ হবে। আমরা দেখব কিভাবে আমরা একটি উপাদানকে দৃ in় করার জন্য চেইন কমান্ড ব্যবহার করতে পারি।

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() ফলাফলের উপর ভিত্তি করে আচরণের প্রত্যাশা করার আদেশের আদেশ। এই ভাবে, আমরা সাইপ্রেস এ চেইন অ্যাসারশন কমান্ড ব্যবহার করতে পারি।

সাইপ্রেস কাস্টম কমান্ড

আমাদের প্রয়োজনীয়তার উপর ভিত্তি করে কমান্ড তৈরির জন্য সাইপ্রেস আমাদের API সরবরাহ করে। সাইপ্রাস কাস্টম কমান্ডটি পূর্ব-বিদ্যমান ডিফল্ট কমান্ডগুলির অনুরূপ, এটি ছাড়া ব্যবহারকারী সংজ্ঞায়িত। কাস্টম কমান্ডের সাহায্যে, আমরা কমান্ডের সাথে খেলতে পারি এবং আমাদের ব্যবহারের ক্ষেত্রে তাদের উপর ভিত্তি করে চেইন করতে পারি। সাইপ্রাস কাস্টম কমান্ডগুলি আমাদের ওয়ার্কফ্লোতে দরকারী যদি আপনি তাদের পরীক্ষাগুলিতে বারবার ব্যবহার করতে চান।

সাইপ্রাসে একটি নতুন কাস্টম কমান্ড তৈরির সিনট্যাক্স দেখি।

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

যেখানে যুক্তিগুলো নিম্নরূপ

নাম - স্ট্রিং এ কমান্ডের নাম যা আমরা যোগ করতে বা ওভাররাইট করতে চাই

কলব্যাক - এই ফাংশনটি কমান্ডে প্রেরিত একটি যুক্তি নেয়

অপশন - কমান্ডের আচরণকে সংজ্ঞায়িত করতে যেকোনো অপশন অবজেক্ট পাস করুন

বিঃদ্রঃ : অপশন শুধুমাত্র অ্যাড কমান্ডের জন্য সমর্থিত এবং ওভাররাইট কমান্ডের জন্য সমর্থন করবেন না

পছন্দগ্রহণডিফল্টবিবরণ
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();

উপরের উদাহরণে, আমরা আমাদের কাস্টম কমান্ডের নাম দিচ্ছি 'forceClick'। আমরা উপাদানটিতে prevSubject আর্গুমেন্ট পাস করছি এবং বিদ্যমান বিষয় মোড়ানো। সঙ্গে cy.wrap(), আমরা জোর করে বিষয়টিতে ক্লিক করছি। তারপর পরীক্ষার ফাইলে, আমরা কাস্টম কমান্ড অ্যাক্সেস করছি, 'forceClick'ক 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 optionচ্ছিক, আমরা হয় বিষয়টিকে যুক্তি হিসেবে পাস করতে পারি অথবা নিচের মত টেস্ট ফাইলে বিষয় ছাড়া কমান্ড আহ্বান করতে পারি

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)
  }
)

আমরা উপরে দেখেছি, আমরা ব্যবহার করছি Cypress.Commands.overwrite বিদ্যমান সাইপ্রেস কমান্ড পরিবর্তন করতে। আমরা আমাদের কাস্টম কমান্ডের নামকরণ করছি contains এবং ফিল্টার আর্গুমেন্ট পাস হয়েছে কিনা তা নির্ধারণ করতে আমরা আর্গুমেন্ট পাস করছি।

সাইপ্রেস আমদানি কমান্ড

এই বিভাগে, আমরা বুঝব কিভাবে সাইপ্রেস কমান্ড আমদানি করতে হয়।

আমাদের অবশ্যই আমাদের সাইপ্রাস কাস্টম কমান্ড তৈরি করতে হবে সাইপ্রেস/সাপোর্ট/কমান্ডস.জেএস ফাইল আমরা command.js ফাইলে কাস্টম কমান্ড যুক্ত করব এবং এটি ব্যবহার করার জন্য আমাদের টেস্ট কেস ফাইলে আমদানি করব।

Command.js ফাইল

উদাহরণ সহ সাইপ্রেস কাস্টম কমান্ড

আমরা বুঝব কিভাবে একটি কাস্টম কমান্ড তৈরি করতে হয় এবং রিয়েল-টাইম উদাহরণ সহ আমাদের স্পেক ফাইলে এটি ব্যবহার করতে হয়।

আমরা উপরে দেখেছি, আমাদের নতুন কাস্টম কমান্ড যোগ করতে হবে 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();
  });
Command.js ফাইলে কাস্টম কমান্ড

উপরের কোডে, আমরা আমাদের কাস্টম কমান্ডের নামকরণ করছি লগইন। কাস্টম কমান্ডের ভিতরে, আমরা ব্যবহারকারীর নাম ক্ষেত্র সাফ করার এবং টেক্সটফিল্ডে মান প্রবেশ করার ধাপ যোগ করেছি। একইভাবে, আমরা ক্ষেত্র সাফ করছি এবং পাসওয়ার্ড ক্ষেত্রে পাসওয়ার্ড যুক্ত করছি। পরে, আমরা সাবমিট বাটনে ক্লিক করছি। এটি একটি সাধারণ কাস্টম কমান্ড যা দুটি যুক্তি গ্রহণ করে: ব্যবহারকারীর নাম এবং পাসওয়ার্ড। আমরা আমাদের স্পেক ফাইলে ব্যবহারকারীর নাম এবং পাসওয়ার্ডের মান পাস করব।

এখন আসুন একটি স্পেক ফাইল নামে তৈরি করি 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 বা কোড এডিটরে বুদ্ধিমান কোড পরামর্শ প্রদান করে যখন আমরা পরীক্ষা লিখছি। এটি একটি পপআপ দেখিয়ে সাহায্য করে যা কমান্ডের সংজ্ঞা, ডকুমেন্টেশন পৃষ্ঠার লিঙ্ক এবং কোডের উদাহরণ প্রদর্শন করে। আমরা যদি ভিসুয়াল স্টুডিও কোড বা IntellJ এর মত আধুনিক কোড এডিটর ব্যবহার করি, তাহলে 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 আমাদেরকে আমাদের command.js ফাইলে দেওয়া যুক্তি প্রদান করে এবং স্বয়ংক্রিয়ভাবে সম্পন্ন করতে সাহায্য করে।

Aboutশ্বরিয়া লক্ষ্মী সম্পর্কে

আমি একটি পরীক্ষার উত্সাহী এবং পরীক্ষার ডোমেনে প্রায় 2+ বছরের অভিজ্ঞতা আছে। আমি পরীক্ষার বিষয়ে আগ্রহী এবং আমার ক্ষেত্রে নতুন জিনিসগুলি অন্বেষণ করতে এবং সেগুলি আমার সমবয়সীদের সাথে ভাগ করে নিতে ভালোবাসি। আমি আমার ফ্রি সময়ে সবচেয়ে সহজ তবে কার্যকর উপায়ে ব্লগ লেখা উপভোগ করি। পরীক্ষক হিসাবে, আমি নিখুঁত জিনিস পেতে পছন্দ করি, তাই আমি আমার পাঠকদের প্রযুক্তির নিখুঁত বোঝার আশা করি। আমি পরীক্ষার সাথে সম্পর্কিত নতুন প্রযুক্তিগুলির সাথে নিজেকে আপডেট রাখি এবং সেগুলি বোঝার জন্য সময় ব্যয় করি। শিক্ষার্থীদের পরীক্ষার ধারণাগুলি বুঝতে সাহায্য করতে পেরে আমি আনন্দিত।
লিঙ্কডইন - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a এর মাধ্যমে সংযোগ করি