JasmineJS সাধারণত ব্রাউজারে বা হেডলেস ব্রাউজারে টেস্টিং করার জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি আপনার ওয়েব অ্যাপ্লিকেশনের কোড পরীক্ষা করতে পারেন, যা বিশেষ করে ফ্রন্ট-এন্ড ডেভেলপমেন্টে কার্যকর। ব্রাউজার এবং হেডলেস টেস্টিং এর মাধ্যমে JasmineJS কোডের কার্যকারিতা পরীক্ষা করা সহজ হয়, যেখানে ব্রাউজারের DOM (Document Object Model) এবং অন্যান্য ফিচারগুলো পরীক্ষা করা সম্ভব।
Browser Testing
ব্রাউজার টেস্টিং এর মাধ্যমে আপনি সরাসরি একটি ওয়েব ব্রাউজারে JasmineJS টেস্ট চালাতে পারেন। এটি সাধারণত ফ্রন্ট-এন্ড ডেভেলপমেন্টের জন্য ব্যবহৃত হয় যেখানে DOM ম্যানিপুলেশন এবং UI ইন্টারঅ্যাকশন পরীক্ষা করা প্রয়োজন। JasmineJS এ টেস্টগুলো সাধারণত একটি HTML ফাইলের মাধ্যমে চালানো হয়, যেখানে Jasmine এর স্ক্রিপ্ট, টেস্ট কেস এবং অন্যান্য ডিপেনডেন্সি অন্তর্ভুক্ত থাকে।
ব্রাউজার টেস্টিং করার ধাপ:
- JasmineJS সেটআপ: JasmineJS এর লেটেস্ট ভার্সন ইনস্টল করা এবং সেটআপ করা।
- HTML ফাইল তৈরি: JasmineJS টেস্ট রানার এবং টেস্ট কেস লেখার জন্য একটি HTML ফাইল তৈরি করা।
- টেস্ট রান: HTML ফাইলটি ব্রাউজারে ওপেন করে JasmineJS টেস্ট চালানো।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasmine Browser Testing</title>
<!-- JasmineJS সিএসএস এবং জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করুন -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.6.0/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.6.0/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.6.0/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.6.0/boot.min.js"></script>
<!-- আপনার টেস্ট কেস এখানে যুক্ত করুন -->
<script src="spec/myTestSpec.js"></script>
</head>
<body>
<h1>Jasmine Browser Testing</h1>
</body>
</html>
এখানে:
jasmine.min.js: JasmineJS এর মূল ফাইল যা টেস্ট চালাতে ব্যবহৃত হয়।myTestSpec.js: আপনার তৈরি করা টেস্ট ফাইল, যেখানে JasmineJS টেস্ট কেস এবং স্পেসিফিকেশন থাকবে।
ব্রাউজারে এই HTML ফাইলটি ওপেন করলে, JasmineJS আপনার টেস্ট কেস চালাবে এবং ফলাফল ব্রাউজারে দেখাবে।
Headless Testing
হেডলেস টেস্টিং হল এমন একটি পদ্ধতি যেখানে কোনো ব্রাউজারের GUI (Graphical User Interface) ছাড়াই টেস্ট চালানো হয়। অর্থাৎ, টেস্ট চলাকালে কোনো ব্রাউজার উইন্ডো ওপেন হয় না, তবে পুরো প্রক্রিয়া ব্যাকগ্রাউন্ডে চলে। হেডলেস ব্রাউজারগুলি মূলত অ্যাপ্লিকেশনের কার্যকারিতা পরীক্ষা করার জন্য ব্যবহৃত হয় যখন আপনি GUI দেখানোর প্রয়োজন নেই, তবে পুরো অ্যাপ্লিকেশন বা সিস্টেমের লজিক্যাল ফাংশনালিটি পরীক্ষা করা জরুরি।
JasmineJS হেডলেস টেস্টিং করার জন্য সাধারণত Puppeteer, Karma, অথবা Headless Chrome ব্যবহার করা হয়।
Headless Testing এর সুবিধা:
- দ্রুত কার্যকারিতা: GUI ছাড়াই টেস্টগুলো দ্রুত চলে।
- সার্ভার-সাইড টেস্টিং: ওয়েব সার্ভারের সাথে ইনটিগ্রেটেড টেস্ট চালানো সম্ভব।
- Continuous Integration (CI) এ সহায়তা: হেডলেস টেস্ট CI/CD প্রক্রিয়ায় দ্রুত ও নির্ভুলভাবে চলে, যেখানে GUI প্রয়োজন হয় না।
JasmineJS এর সাথে Headless Testing
JasmineJS সরাসরি হেডলেস টেস্টিং এর জন্য ডিজাইন করা হয়নি, তবে Karma নামক টেস্ট রানার এবং Headless Chrome ব্যবহার করে JasmineJS এর টেস্টকে হেডলেস মোডে চালানো সম্ভব। Karma একটি টেস্ট রানার, যা ব্রাউজারে JasmineJS টেস্ট চালায় এবং সেই ব্রাউজারটি হেডলেস মোডে পরিচালনা করতে সক্ষম।
Karma + JasmineJS + Headless Chrome সেটআপ:
- Karma ইনস্টল করা: প্রথমে Karma এবং JasmineJS ইনস্টল করতে হবে।
npm install karma karma-jasmine karma-chrome-launcher --save-dev
- Karma কনফিগারেশন ফাইল তৈরি করা: এরপর Karma এর কনফিগারেশন ফাইল তৈরি করতে হবে যেখানে আপনি হেডলেস মোডে Chrome ব্যবহার করবেন।
// karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['jasmine'], // Jasmine টেস্ট ফ্রেমওয়ার্ক ব্যবহার
browsers: ['ChromeHeadless'], // হেডলেস Chrome ব্যবহার
files: [
'spec/myTestSpec.js' // আপনার টেস্ট ফাইল
],
singleRun: true // একবার টেস্ট রান হয়ে গেলে থামবে
});
};
- Karma চালানো: এরপর আপনি
karma startকমান্ড দিয়ে টেস্ট চালাতে পারবেন।
karma start karma.conf.js
এখানে ChromeHeadless ব্রাউজারটি হেডলেস মোডে রান করবে এবং JasmineJS টেস্টগুলোর ফলাফল ব্যাকগ্রাউন্ডে দেখা যাবে।
ব্রাউজার এবং হেডলেস টেস্টিং এর তুলনা
| বৈশিষ্ট্য | ব্রাউজার টেস্টিং | হেডলেস টেস্টিং |
|---|---|---|
| GUI প্রয়োজন | হ্যাঁ, ব্রাউজারের GUI প্রদর্শন করা হয় | না, GUI ছাড়াই টেস্ট চলে |
| পারফরম্যান্স | ধীরগতির হতে পারে (বিশেষ করে বড় অ্যাপ্লিকেশনের জন্য) | দ্রুত, যেহেতু কোনো GUI নেই |
| ব্যবহার | ফ্রন্ট-এন্ড ডেভেলপমেন্ট এবং ইউজার ইন্টারফেস টেস্ট | CI/CD পরিবেশে ব্যবহৃত, ব্যাকগ্রাউন্ড টেস্টিং |
| টেস্ট ফলাফল | ব্রাউজারে প্রদর্শিত হয় | কনসোল বা টার্মিনালে ফলাফল দেখা যায় |
সারাংশ
- ব্রাউজার টেস্টিং: ব্রাউজারের GUI ব্যবহার করে JasmineJS টেস্ট চালানো হয়, যা UI ইন্টারঅ্যাকশন এবং DOM ম্যানিপুলেশন পরীক্ষা করতে সহায়তা করে।
- হেডলেস টেস্টিং: GUI ছাড়াই JasmineJS টেস্ট হেডলেস ব্রাউজারে চালানো হয়, যা পারফরম্যান্স উন্নত করে এবং CI/CD প্রক্রিয়ায় ব্যবহার করা হয়।
- Karma এবং Headless Chrome ব্যবহার করে JasmineJS এর হেডলেস টেস্টিং করা সম্ভব, যা দ্রুত এবং নির্ভরযোগ্য টেস্টিং প্রদান করে।
JasmineJS এর মাধ্যমে ব্রাউজার এবং হেডলেস টেস্টিং উভয়ই করা যায়, যা টেস্টিং প্রক্রিয়াকে আরও কার্যকর ও উন্নত করে।
JasmineJS এ Browser এ টেস্ট রান করার জন্য কিছু নির্দিষ্ট সেটআপ এবং কনফিগারেশন করতে হয়। এটি আপনাকে সরাসরি ওয়েব ব্রাউজারে আপনার টেস্টগুলো দেখতে এবং তাদের ফলাফল যাচাই করতে সহায়তা করে। Jasmine-এর মাধ্যমে টেস্টগুলো ব্রাউজারে চালানোর জন্য সাধারণত HTML ফাইল এবং Jasmine এর স্ক্রিপ্ট ফাইলগুলো ব্যবহার করা হয়।
Browser এ Jasmine টেস্ট চালানোর জন্য প্রাথমিক সেটআপ
ব্রাউজারে Jasmine টেস্ট চালানোর জন্য আপনাকে কয়েকটি ধাপে কাজ করতে হবে:
- Jasmine লাইব্রেরি অন্তর্ভুক্ত করা: Jasmine লাইব্রেরির ফাইলগুলো আপনার HTML ফাইলে যুক্ত করতে হবে।
- টেস্ট স্ক্রিপ্ট তৈরি করা: আপনার টেস্ট ফাইল তৈরি করে তাতে টেস্ট কোড লিখতে হবে।
- HTML ফাইল তৈরি করা: Jasmine টেস্টগুলো ব্রাউজারে রেন্ডার করতে একটি HTML ফাইল তৈরি করতে হবে।
1. Jasmine লাইব্রেরি অন্তর্ভুক্ত করা
প্রথমে, আপনাকে Jasmine এর লাইব্রেরি ফাইলগুলো অন্তর্ভুক্ত করতে হবে। Jasmine এর jasmine.js এবং jasmine-html.js ফাইল ব্রাউজারে টেস্ট চালানোর জন্য প্রয়োজনীয়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasmine Test</title>
<!-- Jasmine CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/jasmine.css">
<!-- Jasmine JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/boot.js"></script>
</head>
<body>
<!-- Jasmine Test Results will be displayed here -->
<script src="test/spec/test-spec.js"></script>
</body>
</html>
এখানে:
jasmine.css: Jasmine এর ডিফল্ট স্টাইল শীট।jasmine.js,jasmine-html.jsএবংboot.js: Jasmine লাইব্রেরির প্রধান ফাইলগুলো, যা টেস্টিং ইন্টারফেস তৈরি করে এবং ফলাফল প্রদর্শন করে।
2. টেস্ট স্ক্রিপ্ট তৈরি করা
এখন আপনাকে একটি আলাদা টেস্ট স্ক্রিপ্ট ফাইল তৈরি করতে হবে। এতে আপনি আপনার টেস্ট কেস লিখবেন। এই স্ক্রিপ্টটি test/spec/ ডিরেক্টরিতে থাকতে পারে, যেমন test-spec.js।
উদাহরণ:
describe("Sample Test", function() {
it("should add two numbers correctly", function() {
const result = 2 + 3;
expect(result).toBe(5);
});
it("should multiply two numbers correctly", function() {
const result = 2 * 3;
expect(result).toBe(6);
});
});
এখানে:
describe(): একটি টেস্ট সুট তৈরি করে।it(): একটি টেস্ট কেস অথবা পরীক্ষা তৈরি করে।expect(): একটি assertion ফাংশন যা একটি value পরীক্ষা করে।
3. HTML ফাইল তৈরি করা
HTML ফাইলটি আপনার Jasmine টেস্ট চালানোর জন্য প্রয়োজনীয় সেটআপ করবে। test-spec.js ফাইলটি HTML ফাইলের মধ্যে লিংক করা হবে, যাতে টেস্ট কোড ব্রাউজারে রান করতে পারে।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jasmine Test</title>
<!-- Jasmine CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/jasmine.css">
<!-- Jasmine JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.9.0/boot.js"></script>
</head>
<body>
<h1>Jasmine Test Results</h1>
<!-- Jasmine Test Script -->
<script src="test/spec/test-spec.js"></script>
<!-- Jasmine HTML Reporter -->
<script>
// This will bootstrap Jasmine to run in the browser and show results
jasmine.getEnv().addReporter(new jasmine.HtmlReporter());
</script>
</body>
</html>
এখানে:
- HTML Reporter: Jasmine এর টেস্ট ফলাফল ব্রাউজারে দেখানোর জন্য
HtmlReporterব্যবহার করা হয়েছে।
4. টেস্ট রান করা
এখন আপনি আপনার HTML ফাইলটি একটি ব্রাউজারে ওপেন করতে পারেন। ব্রাউজারে টেস্ট চলতে শুরু করবে এবং আপনি Jasmine এর reporter এর মাধ্যমে ফলাফল দেখতে পাবেন।
- ফলাফল প্রদর্শন: Jasmine টেস্ট রেজাল্ট ব্রাউজারে একটি ডিফল্ট রিসাল্ট প্যানেলে প্রদর্শিত হবে, যেখানে আপনি পাস হওয়া টেস্ট এবং ব্যর্থ টেস্ট দেখতে পাবেন।
Jasmine এ টেস্ট রান করার সময় কিছু গুরুত্বপূর্ণ বিষয়
- Testing Environment: Jasmine-এর এই ব্রাউজার বেইজ টেস্টিংয়ে আপনাকে কোনো সার্ভারের প্রয়োজন হয় না। সরাসরি HTML ফাইল খুললেই টেস্ট চলে যাবে।
- Reporters: Jasmine এ অন্য ধরনের রিপোর্টারও ব্যবহার করা যেতে পারে যেমন
ConsoleReporterবাSpecReporterইত্যাদি, যা ফলাফল কনসোলে বা অন্যভাবে প্রদর্শন করে। - Integration with Webpack: JasmineJS সাধারণত সরাসরি ব্রাউজারে রান করার জন্য ব্যবহৃত হয়, তবে এটি Webpack, Karma ইত্যাদির মাধ্যমে বড় প্রকল্পেও ইন্টিগ্রেট করা যেতে পারে।
সারাংশ
JasmineJS এ browser এ টেস্ট রান করতে হলে আপনাকে মূলত:
- Jasmine লাইব্রেরির ফাইলগুলো ব্রাউজারে অন্তর্ভুক্ত করতে হবে।
- একটি HTML ফাইল তৈরি করে সেটিতে Jasmine টেস্ট স্ক্রিপ্ট অন্তর্ভুক্ত করতে হবে।
- Jasmine স্পেসিফিকেশন ফাইল তৈরি করে টেস্ট কেসগুলো লিখতে হবে।
এই প্রক্রিয়া শেষে আপনি সরাসরি ব্রাউজারেই আপনার টেস্ট চালাতে পারবেন এবং ফলাফল দেখতে পারবেন।
Headless Browsers হল এমন ব্রাউজার, যা ইউজার ইন্টারফেস ছাড়াই কম্পিউটার পরিবেশে চালানো যায়। এই ধরনের ব্রাউজারগুলো বিশেষভাবে উপকারী হয় অটোমেটেড টেস্টিংয়ের জন্য, কারণ এগুলো GUI (Graphical User Interface) ছাড়াই ব্যাকগ্রাউন্ডে টেস্ট রান করতে সক্ষম। JasmineJS সহ JavaScript টেস্টিং ফ্রেমওয়ার্কগুলোতে Headless Browsers (যেমন PhantomJS এবং Puppeteer) ব্যবহার করে আপনি আপনার টেস্টগুলো ব্রাউজারে চালিয়ে ফলাফল পেতে পারেন, তবে কোনো ভিজ্যুয়াল উপাদান ছাড়াই।
এই ধরনের টেস্টিং আপনার CI/CD (Continuous Integration/Continuous Deployment) প্রক্রিয়ায় সহায়ক হতে পারে এবং বিভিন্ন ডিভাইস বা ব্রাউজার পারফরমেন্স নিশ্চিত করতে সাহায্য করে। এখানে আমরা PhantomJS এবং Puppeteer ব্যবহার করে JasmineJS এর টেস্টিং দেখবো।
PhantomJS ব্যবহার করে JasmineJS টেস্টিং
PhantomJS হল একটি হেডলেস ব্রাউজার, যা WebKit ইঞ্জিন ব্যবহার করে। এটি সিস্টেমে ব্রাউজার খোলার প্রয়োজন ছাড়াই আপনার স্ক্রিপ্ট এবং টেস্ট চালাতে সাহায্য করে। PhantomJS কে JasmineJS এর সাথে ইন্টিগ্রেট করে আপনি কোনো UI প্রদর্শন না করেই টেস্টগুলো চালাতে পারেন।
PhantomJS সেটআপ
PhantomJS ইনস্টলেশন:
PhantomJS ব্যবহার করতে প্রথমে আপনাকে PhantomJS ইনস্টল করতে হবে। আপনি এটি npm বা Homebrew এর মাধ্যমে ইনস্টল করতে পারেন।
npm এর মাধ্যমে PhantomJS ইনস্টল:
npm install phantomjs --save-devJasmineJS কনফিগারেশন:
PhantomJS ব্যবহার করে JasmineJS এর টেস্টিং করতে আপনি সাধারণত Karma টেস্ট রানার ব্যবহার করবেন। Karma একটি টেস্ট রানার যা PhantomJS এর মতো হেডলেস ব্রাউজারে JasmineJS টেস্ট চালাতে পারে।
- Karma কনফিগারেশন:
প্রথমে Karma এবং Karma-PhantomJS প্লাগইন ইনস্টল করুন:
npm install karma karma-phantomjs-launcher --save-devতারপর একটি
karma.conf.jsফাইল তৈরি করুন, যেখানে PhantomJS কে টেস্ট রানার হিসেবে কনফিগার করবেন:module.exports = function(config) { config.set({ frameworks: ['jasmine'], files: [ 'src/**/*.js', // আপনার কোডের ফাইল 'test/**/*.spec.js' // আপনার Jasmine টেস্ট ফাইল ], browsers: ['PhantomJS'], // PhantomJS ব্যবহারের জন্য reporters: ['progress'], singleRun: true }); };
টেস্ট রান:
karma startএটি PhantomJS ব্রাউজারে আপনার Jasmine টেস্ট চালাবে এবং ফলাফল দেখাবে।
Puppeteer ব্যবহার করে JasmineJS টেস্টিং
Puppeteer হল একটি Node.js লাইব্রেরি, যা Chrome বা Chromium ব্রাউজারের হেডলেস ভার্সন চালাতে ব্যবহার করা হয়। Puppeteer অত্যন্ত শক্তিশালী এবং ব্যবহার করা সহজ। JasmineJS এর সাথে Puppeteer ব্যবহার করে আপনি ডেডিকেটেড ব্রাউজারে টেস্ট চালাতে পারবেন, যাতে আপনি DOM ম্যানিপুলেশন, নেটওয়ার্ক কল, অথবা ইউজার ইন্টারঅ্যাকশন যেমন ক্লিক এবং টাইপিং পরীক্ষার সুযোগ পাবেন।
Puppeteer সেটআপ
Puppeteer ইনস্টলেশন:
Puppeteer ইনস্টল করতে নিচের কমান্ডটি চালান:
npm install puppeteer --save-devJasmineJS এবং Puppeteer কনফিগারেশন:
Puppeteer ব্যবহার করার জন্য JasmineJS এর সাথে একটি সাধারণ কনফিগারেশন তৈরি করা যেতে পারে।
টেস্ট কোড উদাহরণ:
নিচে একটি সাধারণ উদাহরণ দেওয়া হল যেখানে Puppeteer ব্যবহার করে JasmineJS এর টেস্ট চালানো হয়েছে:
const puppeteer = require('puppeteer'); describe('Headless Browser Test with Puppeteer', function() { let browser; let page; beforeAll(async function() { browser = await puppeteer.launch(); // Chromium ব্রাউজার চালু করা page = await browser.newPage(); // নতুন পেজ খুলে নেয়া }); afterAll(async function() { await browser.close(); // টেস্ট শেষে ব্রাউজার বন্ধ }); it('should open a webpage and check title', async function() { await page.goto('https://example.com'); // পেজে যাওয়ার জন্য const title = await page.title(); // পেজের টাইটেল পাওয়া expect(title).toBe('Example Domain'); // টাইটেল চেক করা }); });এখানে:
puppeteer.launch(): Chromium ব্রাউজার চালু করা।page.goto(): একটি ওয়েব পেজে নেভিগেট করা।page.title(): পেজের টাইটেল বের করা।expect(title).toBe('Example Domain'): JasmineJS এর মাধ্যমে টেস্টিং করা।
টেস্ট রান:
এই টেস্ট চালাতে আপনি সাধারণ
npm testবাjasmineকমান্ড ব্যবহার করতে পারেন, যদি JasmineJS কে Puppeteer এর সাথে কনফিগার করা থাকে।
PhantomJS vs Puppeteer
| বৈশিষ্ট্য | PhantomJS | Puppeteer |
|---|---|---|
| ব্রাউজার | WebKit ভিত্তিক হেডলেস ব্রাউজার | Chromium ভিত্তিক হেডলেস ব্রাউজার |
| গতি | দ্রুত, তবে নতুন ব্রাউজার ফিচার সমর্থন কম | খুবই দ্রুত এবং আধুনিক ফিচার সহ |
| ফিচার সমর্থন | কম, আধুনিক JavaScript/DOM ফিচার সমর্থন কম | পূর্ণ সমর্থন, আধুনিক JavaScript এবং DOM ফিচার |
| API | কিছুটা পুরনো, খুবই সীমিত | উন্নত API, DOM ম্যানিপুলেশন, নেটওয়ার্ক ইন্টেগ্রেশন |
| ইনস্টলেশন এবং সেটআপ | সহজ এবং দ্রুত | কিছুটা বড়, তবে খুবই শক্তিশালী |
| ডিবাগিং | সীমিত ডিবাগিং টুলস | উন্নত ডিবাগিং টুলস (DevTools ইন্টিগ্রেশন) |
সারাংশ
Headless Browsers যেমন PhantomJS এবং Puppeteer ব্যবহার করে আপনি JasmineJS এর মাধ্যমে ব্রাউজার-বেসড টেস্টিং করতে পারেন, তবে ভিজ্যুয়াল ইন্টারফেস ছাড়াই।
- PhantomJS: এটি WebKit ইঞ্জিন ব্যবহার করে এবং মূলত দ্রুত, তবে আধুনিক ব্রাউজার ফিচার সমর্থন সীমিত।
- Puppeteer: এটি Chromium ব্রাউজার চালাতে সক্ষম এবং আধুনিক JavaScript এবং DOM ফিচার সহ সমর্থন প্রদান করে, যেমন DOM ম্যানিপুলেশন, নেটওয়ার্ক কল, এবং অ্যাসিঙ্ক্রোনাস টেস্টিং।
আপনার টেস্টিংয়ের প্রয়োজনের ভিত্তিতে আপনি PhantomJS বা Puppeteer যে কোনো একটি ব্যবহার করতে পারেন। Puppeteer আধুনিক ফিচার এবং শক্তিশালী API সহ থাকে, যা অনেক বেশি সুবিধাজনক হতে পারে।
Cross-browser টেস্টিং হল একটি গুরুত্বপূর্ণ টেস্টিং প্রক্রিয়া, যেখানে আপনি নিশ্চিত করেন যে আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটটি বিভিন্ন ব্রাউজারে সঠিকভাবে কাজ করছে। JasmineJS এ ক্রস-ব্রাউজার টেস্টিং করার সময় কিছু বিশেষ পদ্ধতি এবং প্র্যাকটিস রয়েছে, যা আপনাকে সফলভাবে ব্রাউজারগুলির মধ্যে সামঞ্জস্যপূর্ণ কোড পরিচালনা করতে সাহায্য করবে।
Cross-browser টেস্টিং এর গুরুত্ব
ক্রস-ব্রাউজার টেস্টিং ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, কারণ বিভিন্ন ব্রাউজারে কোডের আচরণ আলাদা হতে পারে। কিছু ব্রাউজার আধুনিক ফিচার সাপোর্ট করতে পারে, আবার কিছু পুরোনো ব্রাউজারে কিছু ফিচার সঠিকভাবে কাজ নাও করতে পারে। JasmineJS এর মাধ্যমে আপনি বিভিন্ন ব্রাউজারে আপনার টেস্টগুলো সঠিকভাবে চালানোর জন্য উপযুক্ত কনফিগারেশন ও টুলস ব্যবহার করতে পারেন।
Cross-browser টেস্টিং এর জন্য Best Practices
1. ব্রাউজারের Compatibility চেক করুন
বিভিন্ন ব্রাউজারের মধ্যে কোডের পারফরম্যান্স ও আচরণ সঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করার জন্য, আপনাকে বিভিন্ন ব্রাউজারকে টেস্ট করতে হবে। JasmineJS নিজে ব্রাউজার ইন্ডিপেনডেন্ট, তবে ব্রাউজারের মধ্যে সামঞ্জস্যতা নিশ্চিত করার জন্য নির্দিষ্ট কিছু কনফিগারেশন ও টুলস ব্যবহার করা যেতে পারে।
2. JasmineJS কনফিগারেশন: Karma ব্যবহার করা
Karma একটি জনপ্রিয় টেস্ট রানার যা JasmineJS এর সাথে ব্যবহার করা যায়। Karma আপনাকে একাধিক ব্রাউজারে টেস্ট চালানোর সুযোগ দেয়। Karma ব্রাউজারগুলির মধ্যে পার্থক্য সনাক্ত করে এবং টেস্টের ফলাফল বিশ্লেষণ করতে সাহায্য করে।
Karma সেটআপ:
npm install --save-dev karma karma-jasmine karma-chrome-launcher karma-firefox-launcher
- Karma: এটি JasmineJS এর জন্য টেস্ট রানার হিসেবে কাজ করবে।
- karma-jasmine: Jasmine এর জন্য বিশেষ প্লাগিন।
- karma-chrome-launcher ও karma-firefox-launcher: Chrome এবং Firefox ব্রাউজারে টেস্ট চালানোর জন্য।
Karma কনফিগারেশন:
karma.conf.js ফাইলে আপনার ব্রাউজার সেটিংস কনফিগার করতে হবে।
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
browsers: ['Chrome', 'Firefox'],
files: ['spec/*.js'],
singleRun: true
});
};
এখানে, Chrome এবং Firefox দুটি ব্রাউজার নির্বাচন করা হয়েছে। আপনি আরও ব্রাউজার যেমন Safari বা Edge ব্যবহার করতে চাইলে তাদের জন্য আলাদা প্লাগিন যোগ করতে পারেন।
3. ব্রাউজার-স্পেসিফিক কোড পরীক্ষা করুন
বিভিন্ন ব্রাউজারে কোডের আচরণ এক হতে নাও পারে, যেমন কিছু ব্রাউজারে CSS বা JavaScript এর নির্দিষ্ট ফিচার কাজ নাও করতে পারে। JasmineJS এর টেস্ট কেসে আপনি ব্রাউজারের স্পেসিফিক আচরণ নিশ্চিত করতে বিশেষভাবে কোড লিখতে পারেন।
উদাহরণ:
describe("Cross-browser functionality", function() {
it("should work in Chrome", function() {
if (navigator.userAgent.indexOf("Chrome") !== -1) {
// Chrome specific test
expect(someChromeSpecificFunction()).toBe(true);
}
});
it("should work in Firefox", function() {
if (navigator.userAgent.indexOf("Firefox") !== -1) {
// Firefox specific test
expect(someFirefoxSpecificFunction()).toBe(true);
}
});
});
এখানে, navigator.userAgent ব্যবহার করে আপনি ব্রাউজারের নাম চেক করে বিশেষ টেস্ট কেসগুলো চালাতে পারেন।
4. ব্রাউজার-স্পেসিফিক ফিচার মক এবং স্পাই করা
কিছু ব্রাউজারে নির্দিষ্ট ফিচার বা ফাংশনালিটি সঠিকভাবে কাজ না করলে, আপনি Jasmine এর Mock এবং Spy ফিচার ব্যবহার করতে পারেন। এই ফিচারগুলি আপনাকে এমন ফাংশনালিটি টেস্ট করতে সাহায্য করবে যা ব্রাউজার স্পেসিফিক এবং এটি নির্দিষ্টভাবে মক করা যেতে পারে।
উদাহরণ:
describe("Mocking browser-specific feature", function() {
it("should mock a browser-specific feature", function() {
var browserSpecificFunction = jasmine.createSpy("browserSpecificFunction");
if (navigator.userAgent.indexOf("Chrome") !== -1) {
// মক ফাংশন প্রয়োগ
browserSpecificFunction();
}
expect(browserSpecificFunction).toHaveBeenCalled();
});
});
এখানে, browserSpecificFunction ফাংশনটি শুধুমাত্র Chrome ব্রাউজারে কল হবে এবং Jasmine এর স্পাই মেথড toHaveBeenCalled() এর মাধ্যমে আপনি যাচাই করতে পারবেন যে এটি সঠিকভাবে কল হয়েছে কি না।
5. টেস্ট রিকভারি এবং ব্রাউজার কম্প্যাটিবিলিটি চেক
বিভিন্ন ব্রাউজারের মধ্যে টেস্ট চালানোর সময় কখনো কখনো কিছু ব্রাউজার ব্রেকডাউন বা পারফরম্যান্স ইস্যু তৈরি করতে পারে। এই ধরনের সমস্যা টেস্ট করার জন্য আপনার টেস্ট রানারকে বিভিন্ন ব্রাউজারে পুনরায় চালানোর ব্যবস্থা রাখতে হবে। Karma এবং JasmineJS আপনাকে বিভিন্ন ব্রাউজারে টেস্ট রিকভারি করার সুবিধা দেয়।
সারাংশ
- Cross-browser টেস্টিং: JasmineJS দিয়ে বিভিন্ন ব্রাউজারে টেস্ট চালাতে Karma টেস্ট রানার ব্যবহার করা যেতে পারে, যা একাধিক ব্রাউজারে টেস্ট চালানোর সুবিধা দেয়।
- ব্রাউজার স্পেসিফিক টেস্ট: JasmineJS এ ব্রাউজার-স্পেসিফিক ফিচারগুলির জন্য আলাদা টেস্ট কেস ও মক বা স্পাই ফিচার ব্যবহার করা যায়।
- Mocking and Spying: Jasmine এর Mock এবং Spy ফিচার ব্যবহার করে, আপনি নির্দিষ্ট ব্রাউজারে কার্যকরী কিছু ফাংশনালিটি টেস্ট করতে পারেন।
- টেস্ট রিকভারি: কিছু ব্রাউজারে ব্রেকডাউন সমস্যা থাকলে, টেস্ট রিকভারি প্রক্রিয়া নিশ্চিত করতে হবে।
JasmineJS এর মাধ্যমে ক্রস-ব্রাউজার টেস্টিং সহজ এবং কার্যকর করা সম্ভব, যার ফলে আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের পারফরম্যান্স এবং আচরণে কোনো সমস্যা ছাড়া নিশ্চিত হতে পারেন।
Continuous Integration (CI) হল একটি সফটওয়্যার ডেভেলপমেন্ট প্র্যাকটিস যেখানে ডেভেলপাররা কোড পরিবর্তনগুলি নিয়মিতভাবে একটি শেয়ারড রেপোজিটরিতে ইন্টিগ্রেট করেন। CI ব্যবহারের উদ্দেশ্য হল ত্রুটি সনাক্তকরণ এবং দ্রুত রোলব্যাকের মাধ্যমে সফটওয়্যার ডেভেলপমেন্ট প্রক্রিয়া আরো দ্রুত এবং কার্যকরী করা।
JasmineJS দিয়ে Browser Testing করার মাধ্যমে আপনি নিশ্চিত হতে পারেন যে আপনার কোড ব্রাউজারে সঠিকভাবে কাজ করছে, বিশেষ করে যখন আপনি JavaScript ব্যবহার করছেন। ব্রাউজার টেস্টিং CI পরিবেশে অটোমেটিকভাবে চলে, যা আপনাকে কোডের ইনটিগ্রিটি বজায় রাখতে সহায়তা করে।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে JasmineJS ব্যবহার করে ব্রাউজার টেস্টিং করতে পারবেন এবং এটি কিভাবে Continuous Integration (CI) পরিবেশে কাজ করে।
JasmineJS ব্রাউজার টেস্টিং এর জন্য সরঞ্জামসমূহ
JasmineJS এর মাধ্যমে ব্রাউজার টেস্টিং করার জন্য কিছু সরঞ্জাম ও প্লাগইন ব্যবহৃত হয়:
- Karma: Karma হল একটি টেস্ট রানার, যা বিভিন্ন ব্রাউজারে Jasmine টেস্ট চালাতে সাহায্য করে। এটি CI পরিবেশে ব্যবহারের জন্য উপযুক্ত, কারণ এটি অটোমেটিকভাবে টেস্ট রানের ফলাফল প্রদান করে এবং রিয়েল-টাইমে রিপোর্ট দেখায়।
- PhantomJS: PhantomJS একটি হেডলেস ব্রাউজার, যা UI রেন্ডারিং ছাড়া কোড পরীক্ষা করতে পারে। এটি মূলত হেডলেস ব্রাউজার হিসেবে ব্যবহৃত হয়, যা টেস্টিংয়ের জন্য খুবই উপকারী।
- Travis CI বা Jenkins: CI সিস্টেম যেখানে JasmineJS টেস্টগুলি সঠিকভাবে এবং অটোমেটিক্যালি রান করা যায়।
Karma এবং JasmineJS দিয়ে ব্রাউজারে টেস্ট চালানো
Karma টেস্ট রানার এবং JasmineJS ব্যবহার করে ব্রাউজারে টেস্ট চালানো খুবই সহজ। এর মাধ্যমে আপনি ব্রাউজারভিত্তিক Jasmine টেস্ট চালাতে পারেন এবং টেস্টের ফলাফল CI সিস্টেমের মাধ্যমে পেতে পারেন।
1. Karma ইনস্টল করা
প্রথমে আপনার প্রজেক্টে Karma এবং অন্যান্য প্রয়োজনীয় প্যাকেজ ইনস্টল করতে হবে।
npm install karma karma-jasmine karma-chrome-launcher jasmine-core --save-dev
এখানে:
- karma-jasmine: Jasmine এর জন্য Karma অ্যাডাপ্টার।
- karma-chrome-launcher: Chrome ব্রাউজারে টেস্ট চালানোর জন্য।
2. Karma কনফিগারেশন ফাইল তৈরি করা
এরপর Karma কনফিগারেশন ফাইল তৈরি করতে হবে, যেটি টেস্ট রানারকে নির্দেশ দিবে কোথায় টেস্ট কেস রয়েছে এবং কোন ব্রাউজারগুলোর মাধ্যমে টেস্ট চালাতে হবে।
karma init karma.conf.js
এই কমান্ডটি আপনাকে একটি কনফিগারেশন ফাইল তৈরি করতে সহায়তা করবে।
কনফিগারেশন ফাইলের মধ্যে কিছু মৌলিক সেটআপ হবে:
module.exports = function(config) {
config.set({
frameworks: ['jasmine'], // Jasmine ফ্রেমওয়ার্ক ব্যবহার
files: [
'src/**/*.js', // আপনার JavaScript ফাইল
'test/**/*.spec.js' // টেস্ট কেস ফাইল
],
browsers: ['Chrome'], // Chrome ব্রাউজার ব্যবহার করা হবে
reporters: ['progress'], // রিপোর্টিং স্টাইল
singleRun: true // একবার টেস্ট রান হবে
});
};
এখানে:
files: আপনার প্রজেক্টের JavaScript কোড এবং টেস্ট ফাইল এখানে যুক্ত করতে হবে।browsers: কোন ব্রাউজারে টেস্ট চালাতে চান তা নির্ধারণ করতে হবে (এখানে Chrome ব্যবহার করা হয়েছে)।
3. Karma দিয়ে টেস্ট রান করা
এখন আপনি Karma চালিয়ে আপনার JasmineJS টেস্ট ব্রাউজারে রান করতে পারবেন:
karma start karma.conf.js
এটি আপনার টেস্টগুলো নির্দিষ্ট ব্রাউজারে চালাবে এবং ফলাফল দেখাবে।
Continuous Integration (CI) পরিবেশে JasmineJS টেস্ট
JasmineJS এবং Karma ব্যবহার করে ব্রাউজারে টেস্ট চালানোর প্রক্রিয়াটি CI সার্ভিস যেমন Travis CI বা Jenkins এর মাধ্যমে অটোমেটিকভাবে করা যেতে পারে।
1. Travis CI এ JasmineJS টেস্ট সেটআপ
Travis CI একটি জনপ্রিয় Continuous Integration টুল, যা গিটহাব রিপোজিটরি থেকে কোড পুল করে অটোমেটিক টেস্টিং এবং বিল্ড প্রসেস চালাতে পারে।
Travis CI সেটআপ করতে:
- প্রথমে
.travis.ymlফাইল তৈরি করুন:
language: node_js
node_js:
- "14" # আপনার প্রয়োজনীয় Node.js ভার্সন উল্লেখ করুন
install:
- npm install
script:
- karma start karma.conf.js
এখানে:
language: node_js: Travis CI কে বলে দেয় যে Node.js পরিবেশে টেস্ট চালাতে হবে।script:karma start karma.conf.jsকমান্ড দিয়ে টেস্ট চালানো হবে।
2. Jenkins এ JasmineJS টেস্ট
Jenkins এর মাধ্যমে Continuous Integration সেটআপ করতে:
- Jenkins সার্ভারে একটি নতুন জব তৈরি করুন।
- Source Code Management সেকশনে Git রিপোজিটরি URL দিন।
- Build Steps এ একটি Shell Script রান করুন যা Karma টেস্ট রান করবে:
npm install
karma start karma.conf.js --singleRun
এটি আপনার JasmineJS টেস্টগুলো Jenkins এ রান করবে এবং ফলাফল দেখাবে।
PhantomJS দিয়ে হেডলেস টেস্টিং
PhantomJS হল একটি হেডলেস ব্রাউজার, যা UI রেন্ডারিং ছাড়া JavaScript কোড রান করতে পারে এবং টেস্ট চালাতে পারে। আপনি Karma কনফিগারেশনে PhantomJS ব্যবহার করে টেস্ট চালাতে পারেন, বিশেষ করে যদি আপনি গ্রাফিকাল ইউজার ইন্টারফেস (GUI) ছাড়া টেস্ট করতে চান।
Karma কনফিগারেশনে PhantomJS ব্যবহার করতে:
browsers: ['PhantomJS']
এটি PhantomJS এ JasmineJS টেস্টগুলো চালাবে এবং ফলাফল প্রদান করবে।
সারাংশ
JasmineJS দিয়ে Browser Testing করার জন্য Karma ব্যবহার করা হয়, যা আপনার কোড ব্রাউজারে চালাতে সক্ষম এবং ফলাফল CI সিস্টেমে ইন্টিগ্রেট করা যায়। JasmineJS এর টেস্টগুলো CI সিস্টেম যেমন Travis CI বা Jenkins এর মাধ্যমে অটোমেটিক্যালি চালানো সম্ভব। PhantomJS ব্যবহার করে আপনি হেডলেস ব্রাউজারে টেস্ট চালাতে পারেন, যা সিস্টেমের ওপর লোড কমায়। এই পদ্ধতিগুলো CI প্রক্রিয়ায় কোডের গুণগত মান নিশ্চিত করতে সহায়তা করে।
Read more
