সাইপ্রেস: ওয়েব অ্যাপ্লিকেশনের জন্য চূড়ান্ত এন্ড-টু-এন্ড টেস্টিং গাইড

আজকের দ্রুত পরিবর্তনশীল ওয়েব ডেভেলপমেন্টের জগতে, ওয়েব অ্যাপ্লিকেশনের গুণমান এবং নির্ভরযোগ্যতা নিশ্চিত করা অত্যন্ত গুরুত্বপূর্ণ। এন্ড-টু-এন্ড (E2E) টেস্টিং ব্যবহারকারীর দৃষ্টিকোণ থেকে একটি অ্যাপ্লিকেশনের সমস্ত উপাদান একসাথে নির্বিঘ্নে কাজ করছে কিনা তা যাচাই করতে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। সাইপ্রেস একটি নেতৃস্থানীয় E2E টেস্টিং ফ্রেমওয়ার্ক হিসাবে আবির্ভূত হয়েছে, যা একটি ডেভেলপার-বান্ধব অভিজ্ঞতা, শক্তিশালী বৈশিষ্ট্য এবং চমৎকার পারফরম্যান্স প্রদান করে। এই বিস্তারিত গাইডটি আপনাকে সাইপ্রেস শুরু করতে এবং আপনার ওয়েব অ্যাপ্লিকেশনগুলিকে কার্যকরভাবে পরীক্ষা করার জন্য যা যা জানা দরকার তার সবকিছুতেই সাহায্য করবে।

সাইপ্রেস কী?

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

সাইপ্রেস ব্যবহারের মূল সুবিধা

• ডেভেলপার-বান্ধব: সাইপ্রেস একটি পরিষ্কার এবং স্বজ্ঞাত API প্রদান করে, যা টেস্ট লেখা এবং ডিবাগ করা সহজ করে তোলে।
• টাইম ট্র্যাভেল: সাইপ্রেস প্রতিটি টেস্ট কমান্ডের সময় আপনার অ্যাপ্লিকেশনের অবস্থার স্ন্যাপশট নেয়, যা আপনাকে সময়ে পিছনে গিয়ে যেকোনো মুহূর্তে ঠিক কী ঘটেছিল তা দেখতে দেয়।
• রিয়েল-টাইম রিলোড: আপনি যখন আপনার টেস্টে পরিবর্তন করেন তখন সাইপ্রেস স্বয়ংক্রিয়ভাবে রিলোড হয়, যা তাৎক্ষণিক প্রতিক্রিয়া প্রদান করে।
• স্বয়ংক্রিয় অপেক্ষা: সাইপ্রেস স্বয়ংক্রিয়ভাবে কোনো কাজ করার আগে উপাদানগুলিকে দৃশ্যমান বা ইন্টারেক্টিভ হওয়ার জন্য অপেক্ষা করে, যা সুস্পষ্ট অপেক্ষার প্রয়োজন দূর করে।
• নেটওয়ার্ক নিয়ন্ত্রণ: সাইপ্রেস আপনাকে নেটওয়ার্ক অনুরোধ এবং প্রতিক্রিয়া স্টাব করার অনুমতি দেয়, যা আপনাকে বিভিন্ন পরিস্থিতি অনুকরণ করতে এবং আপনার অ্যাপ্লিকেশনের ত্রুটি হ্যান্ডলিং পরীক্ষা করতে সক্ষম করে।
• ডিবাগ করার সুবিধা: সাইপ্রেস চমৎকার ডিবাগিং টুল সরবরাহ করে, যার মধ্যে একটি শক্তিশালী ডিবাগার এবং বিস্তারিত ত্রুটি বার্তা রয়েছে।
• ক্রস-ব্রাউজার টেস্টিং: সাইপ্রেস ক্রোম, ফায়ারফক্স, এজ এবং ইলেকট্রন সহ একাধিক ব্রাউজার সমর্থন করে।
• হেডলেস টেস্টিং: CI/CD পরিবেশে দ্রুত সম্পাদনের জন্য হেডলেস মোডে টেস্ট চালান।
• অন্তর্নির্মিত অ্যাসারশন: সাইপ্রেস আপনার অ্যাপ্লিকেশনের প্রত্যাশিত আচরণ যাচাই করার জন্য অন্তর্নির্মিত অ্যাসারশনের একটি সমৃদ্ধ সেট সরবরাহ করে।

ইনস্টলেশন এবং সেটআপ

সাইপ্রেস দিয়ে শুরু করা খুবই সহজ। এটি ইনস্টল করার পদ্ধতি নিচে দেওয়া হলো:

1. পূর্বশর্ত: নিশ্চিত করুন যে আপনার সিস্টেমে Node.js এবং npm (Node Package Manager) ইনস্টল করা আছে। আপনি অফিসিয়াল Node.js ওয়েবসাইট থেকে সেগুলি ডাউনলোড করতে পারেন।
2. সাইপ্রেস ইনস্টল করুন: আপনার টার্মিনাল বা কমান্ড প্রম্পট খুলুন, আপনার প্রজেক্ট ডিরেক্টরিতে নেভিগেট করুন এবং নিম্নলিখিত কমান্ডটি চালান:

npm install cypress --save-dev

3. সাইপ্রেস খুলুন: ইনস্টলেশন সম্পূর্ণ হয়ে গেলে, আপনি নিম্নলিখিত কমান্ডটি চালিয়ে সাইপ্রেস টেস্ট রানার খুলতে পারেন:

npx cypress open

এই কমান্ডটি সাইপ্রেস টেস্ট রানার চালু করবে, যা আপনার টেস্ট চালানো এবং ডিবাগ করার জন্য একটি গ্রাফিকাল ইন্টারফেস প্রদান করে।

আপনার প্রথম সাইপ্রেস টেস্ট লেখা

আসুন একটি ওয়েবসাইটের হোমপেজ সঠিকভাবে লোড হচ্ছে কিনা তা যাচাই করার জন্য একটি সহজ টেস্ট তৈরি করি। আপনার প্রজেক্টের `cypress/e2e` ডিরেক্টরিতে `example.cy.js` নামে একটি নতুন ফাইল তৈরি করুন।

// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

আসুন এই টেস্টটি ভেঙে দেখি:

• `describe()`: একটি টেস্ট স্যুট সংজ্ঞায়িত করে, যা সম্পর্কিত টেস্টের একটি সংগ্রহ।
• `it()`: টেস্ট স্যুটের মধ্যে একটি পৃথক টেস্ট কেস সংজ্ঞায়িত করে।
• `cy.visit()`: নির্দিষ্ট URL-এ নেভিগেট করে।
• `cy.contains()`: নির্দিষ্ট টেক্সট ধারণকারী একটি উপাদান খুঁজে বের করে।
• `.click()`: নির্বাচিত উপাদানে ক্লিক করে।
• `cy.url()`: পৃষ্ঠার বর্তমান URL পায়।
• `.should()`: অ্যাপ্লিকেশনের অবস্থা সম্পর্কে একটি অ্যাসারশন করে।
• `cy.get()`: একটি CSS সিলেক্টর ব্যবহার করে একটি উপাদান নির্বাচন করে।
• `.type()`: নির্বাচিত উপাদানে টেক্সট টাইপ করে।
• `.should('have.value', 'fake@email.com')`: অ্যাসার্ট করে যে উপাদানটির মান 'fake@email.com' এর সমান।

সাইপ্রেস টেস্ট রানারে এই টেস্টটি চালিয়ে দেখুন এটি কীভাবে কাজ করে। আপনার দেখা উচিত ব্রাউজারটি সাইপ্রেস কিচেন সিঙ্ক ওয়েবসাইটে নেভিগেট করছে, "type" লিঙ্কে ক্লিক করছে এবং URL যাচাই করছে।

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

সাইপ্রেস আপনার অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার জন্য বিস্তৃত কমান্ড সরবরাহ করে। এখানে কিছু সর্বাধিক ব্যবহৃত কমান্ড রয়েছে:

• `cy.visit(url)`: নির্দিষ্ট URL-এ নেভিগেট করে।
• `cy.get(selector)`: একটি CSS সিলেক্টর ব্যবহার করে একটি উপাদান নির্বাচন করে।
• `cy.contains(content)`: নির্দিষ্ট টেক্সট ধারণকারী একটি উপাদান নির্বাচন করে।
• `cy.click()`: নির্বাচিত উপাদানে ক্লিক করে।
• `cy.type(text)`: নির্বাচিত উপাদানে টেক্সট টাইপ করে।
• `cy.clear()`: একটি ইনপুট বা টেক্সটএরিয়া উপাদানের বিষয়বস্তু পরিষ্কার করে।
• `cy.submit()`: একটি ফর্ম জমা দেয়।
• `cy.check()`: একটি চেকবক্স বা রেডিও বোতাম চেক করে।
• `cy.uncheck()`: একটি চেকবক্স আনচেক করে।
• `cy.select(value)`: একটি ড্রপডাউন থেকে একটি বিকল্প নির্বাচন করে।
• `cy.scrollTo(position)`: পৃষ্ঠাটি নির্দিষ্ট অবস্থানে স্ক্রোল করে।
• `cy.trigger(event)`: নির্বাচিত উপাদানে একটি DOM ইভেন্ট ট্রিগার করে।
• `cy.request(url, options)`: নির্দিষ্ট URL-এ একটি HTTP অনুরোধ করে।
• `cy.intercept(route, handler)`: নির্দিষ্ট রুটের সাথে মিলে যাওয়া HTTP অনুরোধগুলিকে ইন্টারসেপ্ট করে।
• `cy.wait(time)`: নির্দিষ্ট সময়ের জন্য অপেক্ষা করে।
• `cy.reload()`: বর্তমান পৃষ্ঠাটি রিলোড করে।
• `cy.go(direction)`: ব্রাউজারের ইতিহাসে আগের বা পরের পৃষ্ঠায় নেভিগেট করে।
• `cy.url()`: পৃষ্ঠার বর্তমান URL পায়।
• `cy.title()`: পৃষ্ঠার শিরোনাম পায়।
• `cy.window()`: উইন্ডো অবজেক্ট পায়।
• `cy.document()`: ডকুমেন্ট অবজেক্ট পায়।
• `cy.viewport(width, height)`: ভিউপোর্ট আকার নির্ধারণ করে।

এগুলি সাইপ্রেসে উপলব্ধ অনেক কমান্ডের মধ্যে কয়েকটি মাত্র। কমান্ড এবং তাদের বিকল্পগুলির একটি সম্পূর্ণ তালিকার জন্য সাইপ্রেস ডকুমেন্টেশন দেখুন।

সাইপ্রেসে অ্যাসারশন

অ্যাসারশনগুলি আপনার অ্যাপ্লিকেশনের প্রত্যাশিত আচরণ যাচাই করতে ব্যবহৃত হয়। সাইপ্রেস অন্তর্নির্মিত অ্যাসারশনগুলির একটি সমৃদ্ধ সেট সরবরাহ করে যা আপনি উপাদানগুলির অবস্থা, URL, শিরোনাম এবং আরও অনেক কিছু পরীক্ষা করতে ব্যবহার করতে পারেন। অ্যাসারশনগুলি `.should()` পদ্ধতি ব্যবহার করে সাইপ্রেস কমান্ডের পরে চেইন করা হয়।

এখানে কিছু সাধারণ অ্যাসারশনের উদাহরণ দেওয়া হলো:

• `.should('be.visible')`: অ্যাসার্ট করে যে একটি উপাদান দৃশ্যমান।
• `.should('not.be.visible')`: অ্যাসার্ট করে যে একটি উপাদান দৃশ্যমান নয়।
• `.should('be.enabled')`: অ্যাসার্ট করে যে একটি উপাদান সক্রিয়।
• `.should('be.disabled')`: অ্যাসার্ট করে যে একটি উপাদান নিষ্ক্রিয়।
• `.should('have.text', 'expected text')`: অ্যাসার্ট করে যে একটি উপাদানে নির্দিষ্ট টেক্সট রয়েছে।
• `.should('contain', 'expected text')`: অ্যাসার্ট করে যে একটি উপাদানে নির্দিষ্ট টেক্সট রয়েছে।
• `.should('have.value', 'expected value')`: অ্যাসার্ট করে যে একটি উপাদানের নির্দিষ্ট মান রয়েছে।
• `.should('have.class', 'expected class')`: অ্যাসার্ট করে যে একটি উপাদানের নির্দিষ্ট ক্লাস রয়েছে।
• `.should('have.attr', 'attribute name', 'expected value')`: অ্যাসার্ট করে যে একটি উপাদানের নির্দিষ্ট অ্যাট্রিবিউট এবং মান রয়েছে।
• `.should('have.css', 'css property', 'expected value')`: অ্যাসার্ট করে যে একটি উপাদানের নির্দিষ্ট CSS প্রপার্টি এবং মান রয়েছে।
• `.should('have.length', expected length)`: অ্যাসার্ট করে যে একটি উপাদানের নির্দিষ্ট দৈর্ঘ্য আছে (যেমন, একটি তালিকার উপাদান সংখ্যা)।

আপনি আপনার নির্দিষ্ট প্রয়োজন অনুসারে কাস্টম অ্যাসারশনও তৈরি করতে পারেন।

সাইপ্রেস টেস্ট লেখার সেরা অনুশীলন

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

• পরিষ্কার এবং সংক্ষিপ্ত টেস্ট লিখুন: প্রতিটি টেস্ট একটি নির্দিষ্ট কার্যকারিতা বা পরিস্থিতির উপর ফোকাস করা উচিত। অতিরিক্ত জটিল টেস্ট লেখা এড়িয়ে চলুন যা বোঝা এবং রক্ষণাবেক্ষণ করা কঠিন।
• অর্থপূর্ণ টেস্টের নাম ব্যবহার করুন: আপনার টেস্টগুলিকে বর্ণনামূলক নাম দিন যা স্পষ্টভাবে নির্দেশ করে যে তারা কী পরীক্ষা করছে।
• হার্ডকোডিং মান এড়িয়ে চলুন: সময়ের সাথে সাথে পরিবর্তন হতে পারে এমন মান সংরক্ষণ করতে ভেরিয়েবল বা কনফিগারেশন ফাইল ব্যবহার করুন।
• কাস্টম কমান্ড ব্যবহার করুন: পুনঃব্যবহারযোগ্য যুক্তি এনক্যাপসুলেট করতে এবং আপনার টেস্টগুলিকে আরও পঠনযোগ্য করতে কাস্টম কমান্ড তৈরি করুন।
• টেস্টগুলিকে বিচ্ছিন্ন করুন: প্রতিটি টেস্ট অন্যান্য টেস্ট থেকে স্বাধীন হওয়া উচিত। পূর্ববর্তী টেস্টগুলি থেকে অ্যাপ্লিকেশনের অবস্থার উপর নির্ভর করা এড়িয়ে চলুন।
• টেস্টের পরে পরিষ্কার করুন: প্রতিটি টেস্টের পরে অ্যাপ্লিকেশনের অবস্থা রিসেট করুন যাতে পরবর্তী টেস্টগুলি একটি পরিষ্কার স্লেট থেকে শুরু হয়।
• ডেটা অ্যাট্রিবিউট ব্যবহার করুন: আপনার টেস্টে উপাদান নির্বাচন করতে ডেটা অ্যাট্রিবিউট (যেমন, `data-testid`) ব্যবহার করুন। ডেটা অ্যাট্রিবিউটগুলি CSS ক্লাস বা আইডির চেয়ে পরিবর্তনের সম্ভাবনা কম, যা আপনার টেস্টগুলিকে UI-এর পরিবর্তনে আরও স্থিতিস্থাপক করে তোলে।
• সুস্পষ্ট অপেক্ষা এড়িয়ে চলুন: সাইপ্রেস স্বয়ংক্রিয়ভাবে উপাদানগুলিকে দৃশ্যমান বা ইন্টারেক্টিভ হওয়ার জন্য অপেক্ষা করে। একেবারে প্রয়োজন না হলে সুস্পষ্ট অপেক্ষা (যেমন, `cy.wait()`) ব্যবহার করা এড়িয়ে চলুন।
• ব্যবহারকারী ফ্লো পরীক্ষা করুন: পৃথক উপাদানগুলির পরিবর্তে ব্যবহারকারী ফ্লো পরীক্ষা করার উপর ফোকাস করুন। এটি আপনাকে নিশ্চিত করতে সাহায্য করবে যে আপনার অ্যাপ্লিকেশনটি ব্যবহারকারীর দৃষ্টিকোণ থেকে সঠিকভাবে কাজ করছে।
• নিয়মিত টেস্ট চালান: আপনার CI/CD পাইপলাইনে সাইপ্রেস টেস্টগুলিকে একীভূত করুন এবং ডেভেলপমেন্ট প্রক্রিয়ার প্রথম দিকে বাগ ধরতে নিয়মিত চালান।

সাইপ্রেসের অ্যাডভান্সড কৌশল

স্টাবিং এবং মকিং

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

একটি নেটওয়ার্ক অনুরোধ স্টাব করতে, আপনি `cy.intercept()` কমান্ড ব্যবহার করতে পারেন। উদাহরণস্বরূপ, নীচের কোডটি `/api/users`-এ একটি GET অনুরোধ স্টাব করে এবং একটি মক প্রতিক্রিয়া প্রদান করে:

cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

তারপর আপনি `cy.wait('@getUsers')` ব্যবহার করে ইন্টারসেপ্ট করা অনুরোধের জন্য অপেক্ষা করতে পারেন এবং যাচাই করতে পারেন যে আপনার অ্যাপ্লিকেশনটি মক প্রতিক্রিয়া সঠিকভাবে পরিচালনা করছে।

লোকাল স্টোরেজ এবং কুকিজ নিয়ে কাজ করা

সাইপ্রেস লোকাল স্টোরেজ এবং কুকিজের সাথে ইন্টারঅ্যাক্ট করার জন্য কমান্ড সরবরাহ করে। আপনি আপনার টেস্টে লোকাল স্টোরেজ এবং কুকিজ সেট করতে, পেতে এবং পরিষ্কার করতে এই কমান্ডগুলি ব্যবহার করতে পারেন।

একটি লোকাল স্টোরেজ আইটেম সেট করতে, আপনি `cy.window()` কমান্ড ব্যবহার করে উইন্ডো অবজেক্ট অ্যাক্সেস করতে পারেন এবং তারপর `localStorage.setItem()` পদ্ধতি ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

একটি লোকাল স্টোরেজ আইটেম পেতে, আপনি `cy.window()` কমান্ড ব্যবহার করতে পারেন এবং তারপর `localStorage.getItem()` পদ্ধতি ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

একটি কুকি সেট করতে, আপনি `cy.setCookie()` কমান্ড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

cy.setCookie('myCookie', 'myCookieValue')

একটি কুকি পেতে, আপনি `cy.getCookie()` কমান্ড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

ফাইল আপলোড পরিচালনা করা

সাইপ্রেস `cypress-file-upload` নামে একটি প্লাগইন সরবরাহ করে যা আপনার টেস্টে ফাইল আপলোডকে সহজ করে। প্লাগইনটি ইনস্টল করতে, নিম্নলিখিত কমান্ডটি চালান:

npm install -D cypress-file-upload

তারপর, আপনার `cypress/support/commands.js` ফাইলে নিম্নলিখিত লাইনটি যোগ করুন:

import 'cypress-file-upload';

তারপর আপনি একটি ফাইল আপলোড করতে `cy.uploadFile()` কমান্ড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

cy.get('input[type="file"]').attachFile('example.txt')

IFrame নিয়ে কাজ করা

IFrame টেস্টিং জটিল হতে পারে, কিন্তু সাইপ্রেস তাদের সাথে ইন্টারঅ্যাক্ট করার একটি উপায় সরবরাহ করে। আপনি একটি IFrame লোড হওয়ার জন্য অপেক্ষা করতে `cy.frameLoaded()` কমান্ড ব্যবহার করতে পারেন, এবং তারপর IFrame-এর ডকুমেন্ট অবজেক্ট পেতে `cy.iframe()` কমান্ড ব্যবহার করতে পারেন।

cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

সাইপ্রেস এবং কন্টিনিউয়াস ইন্টিগ্রেশন/কন্টিনিউয়াস ডিপ্লয়মেন্ট (CI/CD)

আপনার অ্যাপ্লিকেশনের গুণমান নিশ্চিত করার জন্য আপনার CI/CD পাইপলাইনে সাইপ্রেসকে একীভূত করা অপরিহার্য। আপনি আপনার CI/CD পরিবেশে হেডলেস মোডে সাইপ্রেস টেস্ট চালাতে পারেন। এখানে কীভাবে:

1. সাইপ্রেস ইনস্টল করুন: নিশ্চিত করুন যে সাইপ্রেস আপনার প্রজেক্টে একটি নির্ভরতা হিসাবে ইনস্টল করা আছে।
2. CI/CD কনফিগার করুন: প্রতিটি বিল্ডের পরে সাইপ্রেস টেস্ট চালানোর জন্য আপনার CI/CD পাইপলাইন কনফিগার করুন।
3. হেডলেস মোডে সাইপ্রেস চালান: হেডলেস মোডে সাইপ্রেস টেস্ট চালানোর জন্য `cypress run` কমান্ড ব্যবহার করুন।

উদাহরণ CI/CD কনফিগারেশন (গিটহাব অ্যাকশন ব্যবহার করে):

name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

এই কনফিগারেশনটি যখনই `main` শাখায় কোড পুশ করা হয় বা `main` শাখার বিরুদ্ধে একটি পুল অনুরোধ তৈরি করা হয় তখন সাইপ্রেস টেস্ট চালাবে। `cypress-io/github-action` অ্যাকশনটি গিটহাব অ্যাকশনে সাইপ্রেস টেস্ট চালানোর প্রক্রিয়াকে সহজ করে।

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

সাইপ্রেস আপনার টেস্টে সমস্যা সনাক্ত করতে এবং সমাধান করতে সাহায্য করার জন্য চমৎকার ডিবাগিং টুল সরবরাহ করে। সাইপ্রেস টেস্ট ডিবাগ করার জন্য এখানে কিছু টিপস রয়েছে:

• সাইপ্রেস টেস্ট রানার ব্যবহার করুন: সাইপ্রেস টেস্ট রানার আপনার টেস্ট চালানো এবং ডিবাগ করার জন্য একটি ভিজ্যুয়াল ইন্টারফেস সরবরাহ করে। আপনি আপনার টেস্টগুলি একবারে একটি কমান্ড করে দেখতে পারেন, অ্যাপ্লিকেশনের অবস্থা পরিদর্শন করতে পারেন এবং বিস্তারিত ত্রুটি বার্তা দেখতে পারেন।
• `cy.pause()` কমান্ড ব্যবহার করুন: `cy.pause()` কমান্ডটি আপনার টেস্টের এক্সিকিউশন থামিয়ে দেয় এবং আপনাকে ব্রাউজারের ডেভেলপার টুলসে অ্যাপ্লিকেশনের অবস্থা পরিদর্শন করতে দেয়।
• `cy.debug()` কমান্ড ব্যবহার করুন: `cy.debug()` কমান্ডটি নির্বাচিত উপাদানটি কনসোলে প্রিন্ট করে, যা আপনাকে এর বৈশিষ্ট্য এবং অ্যাট্রিবিউটগুলি পরিদর্শন করতে দেয়।
• ব্রাউজারের ডেভেলপার টুলস ব্যবহার করুন: ব্রাউজারের ডেভেলপার টুলস আপনার অ্যাপ্লিকেশন সম্পর্কে প্রচুর তথ্য সরবরাহ করে, যার মধ্যে রয়েছে DOM, নেটওয়ার্ক অনুরোধ এবং কনসোল লগ।
• ত্রুটির বার্তাগুলি সাবধানে পড়ুন: সাইপ্রেস বিস্তারিত ত্রুটির বার্তা সরবরাহ করে যা আপনাকে ত্রুটির কারণ সনাক্ত করতে সাহায্য করতে পারে। ত্রুটির বার্তা এবং স্ট্যাক ট্রেসের দিকে মনোযোগ দিন।

সাইপ্রেস বনাম অন্যান্য টেস্টিং ফ্রেমওয়ার্ক

যদিও সাইপ্রেস একটি শক্তিশালী এন্ড-টু-এন্ড টেস্টিং ফ্রেমওয়ার্ক, এটি অন্যান্য জনপ্রিয় বিকল্পগুলির সাথে কীভাবে তুলনা করে তা বোঝা অপরিহার্য। এখানে একটি সংক্ষিপ্ত ওভারভিউ দেওয়া হলো:

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

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

বাস্তব জগতে সাইপ্রেসের প্রয়োগের উদাহরণ

আসুন বিভিন্ন ধরণের ওয়েব অ্যাপ্লিকেশন পরীক্ষা করার জন্য সাইপ্রেস কীভাবে ব্যবহার করা যেতে পারে তার কয়েকটি বাস্তব-বিশ্বের উদাহরণ অন্বেষণ করি:

একটি ই-কমার্স অ্যাপ্লিকেশন টেস্টিং

আপনি একটি ই-কমার্স অ্যাপ্লিকেশনে বিভিন্ন ব্যবহারকারী ফ্লো পরীক্ষা করতে সাইপ্রেস ব্যবহার করতে পারেন, যেমন:

• পণ্য অনুসন্ধান করা
• কার্টে পণ্য যোগ করা
• চেক আউট করা এবং একটি অর্ডার দেওয়া
• অ্যাকাউন্ট সেটিংস পরিচালনা করা

এখানে একটি সাইপ্রেস টেস্টের উদাহরণ রয়েছে যা যাচাই করে যে একজন ব্যবহারকারী সফলভাবে তাদের কার্টে একটি পণ্য যোগ করতে পারে:

it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

একটি সোশ্যাল মিডিয়া অ্যাপ্লিকেশন টেস্টিং

আপনি একটি সোশ্যাল মিডিয়া অ্যাপ্লিকেশনে ব্যবহারকারীর ইন্টারঅ্যাকশন পরীক্ষা করতে সাইপ্রেস ব্যবহার করতে পারেন, যেমন:

• একটি নতুন পোস্ট তৈরি করা
• একটি পোস্টে লাইক দেওয়া
• একটি পোস্টে মন্তব্য করা
• অন্যান্য ব্যবহারকারীদের অনুসরণ করা

এখানে একটি সাইপ্রেস টেস্টের উদাহরণ রয়েছে যা যাচাই করে যে একজন ব্যবহারকারী সফলভাবে একটি নতুন পোস্ট তৈরি করতে পারে:

it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

একটি ব্যাংকিং অ্যাপ্লিকেশন টেস্টিং

ব্যাংকিং অ্যাপ্লিকেশনগুলির জন্য, সাইপ্রেস গুরুত্বপূর্ণ কার্যকারিতা পরীক্ষা করতে ব্যবহার করা যেতে পারে যেমন:

• নিরাপদভাবে লগ ইন করা
• অ্যাকাউন্ট ব্যালেন্স পরীক্ষা করা
• তহবিল স্থানান্তর করা
• বেনিফিশিয়ারি পরিচালনা করা

একটি তহবিল স্থানান্তর যাচাই করার জন্য একটি টেস্ট এরকম দেখতে পারে (নিরাপত্তার জন্য উপযুক্ত স্টাবিং সহ):

it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

উপসংহার

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

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