সাইপ্রেস কমান্ড এবং কাস্টম কমান্ড: 21 গুরুত্বপূর্ণ তথ্য

সুচিপত্র

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

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

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

সাইপ্রেস দ্বারা প্রদত্ত UI ইন্টারঅ্যাকশন কমান্ড

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

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

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

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

ক্লিক কমান্ডের জন্য নিম্নলিখিত সিনট্যাক্সগুলি রয়েছে

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

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

অপশন সমূহ

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

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

পজিশন

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

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

উদাহরণ

cy.get('btn').click() // বোতামে ক্লিক করে cy.get('btn').ক্লিক ({ 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.contains('Home').dblclick() // ডাবল 'হোম' cy.get('button') সম্বলিত প্রথম উপাদানটিতে ক্লিক করুন। 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().rightclick() // cy.contains('January') সহ উপাদানটিতে রাইট ক্লিক করুন।rightclick() / / 'January' cy.get('button') ধারণকারী প্রথম উপাদানটিতে ডান ক্লিক করুন। ) // 80 এবং 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') // টেক্সট এলাকায় মান লিখুন cy.get('body').type('{shift}') // cy.get শিফট কী সক্রিয় করে ('body').type('{rightarrow}') //টাইপ ইভেন্ট ডান তীর 

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

Clear কমান্ড ইনপুট এলাকা বা টেক্সট ক্ষেত্রের মানগুলি সাফ করবে।

বাক্য গঠন

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

.clear()
.clear(options)

অপশন সমূহ

আমরা যে বিকল্পগুলিকে পাস করা যেতে পারে তা দেখব .clear() কমান্ড।

পছন্দডিফল্টবিবরণ
forcefalseএটি ক্রিয়াকে বাধ্য করবে এবং ক্রিয়াশীলতার জন্য অপেক্ষা করা অক্ষম করবে৷
logtrueকমান্ড লগে কমান্ড দেখায়
scrollBehaviorscrollBehaviorকমান্ডটি সম্পাদন করার আগে একটি উপাদানকে স্ক্রোল করতে হবে যেখানে ভিউপোর্ট অবস্থান
timeoutdefaultCommandTimeoutএই বিকল্পটি অপেক্ষা করার সময় .clear() সময় শেষ হওয়ার আগে সমাধান করতে
waitForAnimationswaitForAnimationsএটি কমান্ড কার্যকর করার আগে উপাদানগুলির অ্যানিমেটিং সম্পূর্ণ করার জন্য অপেক্ষা করবে।
স্পষ্ট আদেশের জন্য বিকল্প

উদাহরণ

স্পষ্ট কমান্ডের জন্য উদাহরণগুলি দেখুন

cy.get('[type="text"]').clear() // টাইপ টেক্সটের ইনপুট পরিষ্কার করুন cy.get('textarea').type('Welcome!').clear() // textarea cy পরিষ্কার করুন .focused().clear() // ফোকাস করা ইনপুট/টেক্সটেরিয়া পরিষ্কার করুন

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

চেক কমান্ড চেক করবে বা সহজ কথায়, চেকবক্স বা রেডিও বোতামে টিক চিহ্ন দেবে। আপনি ব্যবহার করে চেকবক্স বা রেডিও বোতাম আনচেক করতে পারেন .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() // checkbox element cy.get('[type="radio"]').first().check() // প্রথম রেডিও চেক করুন এলিমেন্ট cy.get('[type="radio"]').check('Male') //যে রেডিও এলিমেন্টটি Male cy.get('[type="checkbox"]') আছে চেক করুন।আনচেক() / /চেকবক্স উপাদান cy.get('[type="radio"]').আনচেক করুন () //প্রথম রেডিও উপাদান cy.get('[type="checkbox"]').আনচেক করুন('ব্রেকফাস্ট') // প্রাতঃরাশের উপাদানটি আনচেক করুন

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

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

বাক্য গঠন

নিচের সিলেক্ট কমান্ডের জন্য সিনট্যাক্স রয়েছে

.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 সূচক সহ এলিমেন্ট সিলেক্ট করে cy.get('select) ').select(['parrot', 'peacock']) // তোতা এবং ময়ূর বিকল্প নির্বাচন করে

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

ট্রিগার কমান্ড এলিমেন্টের যেকোনো ইভেন্টকে ট্রিগার করতে সাহায্য করে।

বাক্য গঠন

ট্রিগার কমান্ড অ্যাক্সেস করার জন্য আমরা সিনট্যাক্সটি দেখব

.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') // একটি লিঙ্কে মাউসওভার ইভেন্ট ট্রিগার করুন cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown এ ট্রিগার হয়েছে বোতাম 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) // মাউসআপ বুদবুদকে মিথ্যা হিসাবে সেট করে উপরের ডান অবস্থানে ট্রিগার হয়েছে

সাইপ্রেস কমান্ড অ্যাসিঙ্ক হয়?

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

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

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

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

cy.get('textarea').type('কেমন আছেন?')

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

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

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

cy.get('button').should('be.disabled') //প্রত্যাশিত যে বোতামটি নিষ্ক্রিয় করা উচিত কিনা cy.get('form').should('have.class', 'form-vertical') / /প্রত্যাশিত করুন যে ফর্মটির 'ফর্ম-উল্লম্ব' cy.get('input') হিসাবে শ্রেণী থাকা উচিত। উচিত ('not.have.value', 'Name') // ইনপুটটিতে 'Name' মান থাকা উচিত নয় কিনা তা নিশ্চিত করুন '

উপরে তালিকাভুক্ত হিসাবে, আমরা ব্যবহার করছি cy.get() কমান্ড এবং সঙ্গে এটি চেইন .should() ফলাফলের উপর ভিত্তি করে আচরণ আশা করার জন্য assertion কমান্ড। এই ভাবে, আমরা চেইন ব্যবহার করতে পারেন সাইপ্রেস এ দাবী আদেশ.

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

সাইপ্রেস আমাদের প্রয়োজনীয়তার উপর ভিত্তি করে কমান্ড তৈরি করতে আমাদের 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() }) // "এখনই কিনুন" লিঙ্কে ক্লিক করে cy.clickLink('Buy) এখন')

উপরের উদাহরণে, 'লিঙ্কে ক্লিক করুন' আমাদের কাস্টম কমান্ডের নাম। এটি জন্য অনুসন্ধান করা হবে লেবেল. লাইন 2 এ, কমান্ড পায় 'a', এবং লেবেল রয়েছে এমন লিঙ্কটি অনুসন্ধান করুন এবং উপাদানটিতে ক্লিক করুন। cy.clickLink() পরীক্ষা ফাইলে ক্রিয়া সম্পাদন করবে এবং "এ ক্লিক করবেসহজে অর্ডার করুন"লিঙ্ক।

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

সাইপ্রেসের চাইল্ড কাস্টম কমান্ডগুলি একটি প্যারেন্ট কমান্ড বা অন্য একটি চাইল্ড কমান্ড বন্ধ করে দেওয়া হয়। পূর্ববর্তী কমান্ডের বিষয় কলব্যাক ফাংশনে প্রদান করা হবে।

কিছু সাইপ্রেস কমান্ড যা শিশু কমান্ড হিসাবে চেইন করা যেতে পারে .click(), .trigger(), .should(), .find(), .as()

উদাহরণ

একটি শিশু কাস্টম কমান্ড কিভাবে চেইন করতে হয় তার একটি উদাহরণ আমরা দেখব

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // বিদ্যমান বিষয়কে মোড়ানো এবং এটির সাথে কিছু করুন cy.wrap(subject).click({force:true) }) }) //পরীক্ষা ফাইলে ফোর্সক্লিক অ্যাক্সেস করা হচ্ছে cy.get("[data-test='panel-VALUES']").forceClick();

উপরের উদাহরণে, আমরা আমাদের কাস্টম কমান্ডের নামকরণ করছি 'forceClick' আমরা প্রাক সাবজেক্ট আর্গুমেন্টকে এলিমেন্টে দিচ্ছি এবং বিদ্যমান সাবজেক্টকে মোড়ানো করছি। সঙ্গে 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'); } অন্য { cy.get('btn').its('বোতাম'); } })

কিছু ক্ষেত্রে, আমাদের getButton ব্যবহার করে পাঠ্যের বোতামটি পেতে হবে যা উপাদানটির সমস্ত বোতাম অর্জন করবে। এখন আমরা getButton ব্যবহার করতে পারি প্যারেন্ট এলিমেন্টের সাথে চেইন করতে বা চাইল্ড এলিমেন্টের সাথে চেইন করতে, যেখানে এটি প্যারেন্টের এলিমেন্টগুলিকে আমন্ত্রণ জানাতে পারে।

যেহেতু prevSubject ঐচ্ছিক, আমরা হয় একটি আর্গুমেন্ট হিসাবে সাবজেক্ট পাস করতে পারি অথবা নিচের মত করে টেস্ট ফাইলে সাবজেক্ট ছাড়া কমান্ড দিতে পারি

cy.getButton() // বিষয় ছাড়া cy.get('#loginBtn').getButton() // বিষয় সহ

বিদ্যমান সাইপ্রেস কমান্ড ওভাররাইট করা হচ্ছে

আমরা ইতিমধ্যে বিদ্যমান সাইপ্রেস কমান্ডগুলিকে ওভাররাইট করতে পারি এবং অন্য একটি কমান্ড তৈরি করা এড়াতে আচরণ পরিবর্তন করতে পারি যা শেষে মূল কমান্ডটি ব্যবহার করার চেষ্টা করবে।

কিছু মূল সাইপ্রেস কমান্ড যা ওভাররাইট করা যেতে পারে cy.visit(), cy.type(), cy.screenshot(), cy.contains()

উদাহরণ

আমাদের একটি দেখা যাক আমরা বিদ্যমান সাইপ্রেস ওভাররাইট করতে পারেন কিভাবে উদাহরণ কমান্ড।

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // একটি ফিল্টার আর্গুমেন্ট পাস হয়েছে কিনা তা নির্ধারণ করুন যদি (typeof text === 'object') { options = text text = ফিল্টার ফিল্টার = undefined } options.matchCase = মিথ্যা রিটার্ন originalFn(বিষয়, ফিল্টার, পাঠ্য, বিকল্প) } )

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

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

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

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

anysnap 01 অক্টোবর 2021 বিকাল 4 03 59 টায়
Command.js ফাইল

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

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

আমরা উপরে দেখেছি, আমাদের এর অধীনে নতুন কাস্টম কমান্ড যোগ করতে হবে commands.js ফাইল সেই ফাইলে, একটি লগইন ফাংশনের জন্য একটি কাস্টম কমান্ড যোগ করা যাক

Cypress.Commands.add("লগইন", (ব্যবহারকারীর নাম, পাসওয়ার্ড) => { //লগইন cy.get('[id=Email]').clear(); cy.get('[id) নামে একটি নতুন কমান্ড যোগ করা হচ্ছে =ইমেল]').type(username); cy.get('[id=Password]').clear(); cy.get('[id=Password]').type(password); cy.get( '[type=submit]').ক্লিক(); });
ভাবমূর্তি
command.js ফাইলে কাস্টম কমান্ড

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

এখন আসুন নামের একটি বিশেষ ফাইল তৈরি করি customCommand.spec.js ইন্টিগ্রেশন ফোল্ডারের অধীনে। আমাদের স্পেক ফাইলে নিম্নলিখিত কোড থাকবে

বর্ণনা করুন("কাস্টম কমান্ডের উদাহরণ", () => { এটা("কাস্টম কমান্ড ব্যবহার করে লগইন করা উচিত", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .প্রবেশ করুন("[ইমেল সুরক্ষিত]", "অ্যাডমিন"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
anysnap 01 অক্টোবর 2021 বিকাল 4 34 30 টায়
কাস্টম কমান্ড অ্যাক্সেস করার বিশেষ ফাইল

আমরা উপরে দেখেছি, আমরা আমাদের কাস্টম কমান্ড হিসাবে অ্যাক্সেস করছি cy.login() , যেখানে আমরা ব্যবহারকারীর নাম এবং পাসওয়ার্ডের মান পাস করছি।

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

আমরা যখন পরীক্ষা লিখছি তখন IntelliSense সরাসরি IDE বা কোড এডিটরে বুদ্ধিমান কোড পরামর্শ প্রদান করে। এটি একটি পপআপ দেখিয়ে সাহায্য করে যা কমান্ডের সংজ্ঞা, ডকুমেন্টেশন পৃষ্ঠার লিঙ্ক এবং কোড উদাহরণ প্রদর্শন করে। আমরা যদি ভিজ্যুয়াল স্টুডিও কোড বা IntellJ এর মত যেকোন আধুনিক কোড এডিটর ব্যবহার করি, তাহলে IntelliSense খুবই উপযোগী হবে।

IntelliSense সিনট্যাক্স বুঝতে এবং প্রদর্শন করতে টাইপস্ক্রিপ্ট ব্যবহার করে। যদি আমরা কাস্টম কমান্ড লিখি এবং কাস্টম কমান্ডের জন্য TypeScript সংজ্ঞা প্রদান করি, তাহলে আমরা IntelliSense প্রদর্শন করতে ট্রিপল স্ল্যাশ ব্যবহার করতে পারি, এমনকি যদি আমাদের প্রকল্প শুধুমাত্র জাভাস্ক্রিপ্ট ব্যবহার করে।

IntelliSense কনফিগার করতে, আমাদের কোডটি বর্ণনা করতে হবে cypress/support/index.d.ts ফাইল.

// সাইপ্রেস বস্তু "cy" এর জন্য টাইপ সংজ্ঞা /// নামস্থান ঘোষণা করুন সাইপ্রেস { ইন্টারফেস চেনেবল { /** * শংসাপত্রের সাথে লগইন করুন * @example * cy.login(ব্যবহারকারীর নাম, পাসওয়ার্ড) */ লগইন(ব্যবহারকারীর নাম: স্ট্রিং, পাসওয়ার্ড: স্ট্রিং): চেইনযোগ্য } }

এখন, আমাদের নির্দিষ্ট ফাইলগুলিকে জানাতে হবে যে কিছু টাইপস্ক্রিপ্ট সংজ্ঞা রয়েছে index.d.ts ফাইল সুতরাং, আমাদের বিশেষ ফাইলের শুরুতে, IntelliSense আমাদের জন্য পরামর্শ প্রদান করতে নীচের কোডটি যোগ করুন।

// কাস্টম কমান্ডের জন্য টাইপ সংজ্ঞা যেমন "লগইন" // সমাধান করবে "cypress/support/index.d.ts" //
anysnap 01 অক্টোবর 2021 বিকাল 5 06 15 টায়
IntelliSense দ্বারা প্রদত্ত পরামর্শ

যেমনটি আমরা উপরে দেখেছি, IntelliSense আমাদের কমান্ড.js ফাইলে দেওয়া আর্গুমেন্ট প্রদান করে এবং স্বয়ংক্রিয়ভাবে সম্পন্ন করতে সাহায্য করে।