PhantomJS একটি headless browser (যার কোন graphical user interface নেই) যা JavaScript, DOM, এবং CSS সমর্থন করে এবং এটি ওয়েব পেজের স্ক্রিনশট নেওয়া, PDF তৈরি করা, বা অন্যান্য ব্রাউজিং কাজ যেমন scraping বা automation করার জন্য ব্যবহৃত হয়। PhantomJS ব্রাউজারের মতো কাজ করলেও এটি ডিসপ্লে বা GUI ছাড়া চলে, যা দ্রুত এবং অনেক বেশি স্কেলেবেল হয়।
এখানে PhantomJS ব্যবহার করে Responsive Design এবং Mobile View এর স্ক্রিনশট নেওয়ার প্রক্রিয়া আলোচনা করা হবে।
PhantomJS দিয়ে Responsive Design এবং Mobile View এর স্ক্রিনশট নেওয়া
PhantomJS ব্যবহার করে আপনি সহজেই একটি পেজের responsive design বা mobile view এর স্ক্রিনশট নিতে পারেন, যেখানে আপনি পেজটি একাধিক ডিভাইসের স্ক্রীন সাইজে প্রদর্শন করে স্ক্রিনশট নিতে পারবেন।
Step 1: PhantomJS ইনস্টল করা
PhantomJS ইনস্টল করতে আপনাকে কম্পিউটার এ PhantomJS ডাউনলোড এবং ইনস্টল করতে হবে। এটি PhantomJS official website থেকে ডাউনলোড করা যেতে পারে।
বিভিন্ন প্যাকেজ ম্যানেজার দিয়ে PhantomJS ইনস্টল করা যায়, যেমন Homebrew (MacOS) বা Chocolatey (Windows)।
Step 2: PhantomJS স্ক্রিপ্ট লিখা
Responsive Design বা Mobile View স্ক্রিনশট নিতে একটি PhantomJS স্ক্রিপ্ট তৈরি করতে হবে। এই স্ক্রিপ্টটি ব্রাউজারের মতো পেজটি লোড করবে এবং নির্দিষ্ট স্ক্রীন সাইজে সেট হয়ে স্ক্রিনশট নিবে।
PhantomJS স্ক্রিপ্ট উদাহরণ:
var webpage = require('webpage').create();
// Set the viewport size for mobile devices
webpage.viewportSize = { width: 375, height: 667 }; // Example for iPhone 6
// Open the webpage
webpage.open('https://example.com', function(status) {
if (status === "success") {
// Take a screenshot and save it as PNG
webpage.render('mobile_view_screenshot.png');
console.log("Screenshot taken for mobile view.");
} else {
console.log("Failed to load the page.");
}
phantom.exit();
});
Explanation:
require('webpage').create(): এই কমান্ড দিয়ে PhantomJS একটি ওয়েবপেজ অবজেক্ট তৈরি করে।viewportSize: এখানেviewportSizeপ্রপার্টি দিয়ে আপনি device screen size সেট করতে পারেন। এটি মোবাইল স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হবে, যেমনwidth: 375এবংheight: 667যা iPhone 6 এর স্ক্রীন সাইজ।open(): webpage.open ফাংশনটি একটি URL লোড করে এবং পেজটি সম্পূর্ণ লোড হলে এটি callback ফাংশন রান করবে।render(): render() ফাংশনটি স্ক্রিনশট নিবে এবং এটি PNG ফর্ম্যাটে সেভ করবে।phantom.exit(): স্ক্রিপ্ট শেষ হলে PhantomJS প্রক্রিয়াটি বন্ধ করে দিবে।
Step 3: স্ক্রিপ্ট চালানো
PhantomJS স্ক্রিপ্ট চালানোর জন্য, কমান্ড লাইনে স্ক্রিপ্ট ফাইলটি রান করুন:
phantomjs screenshot_script.js
এটি mobile_view_screenshot.png নামে একটি স্ক্রিনশট তৈরি করবে যেটি মোবাইল ভিউ থেকে তোলা হয়েছে।
Responsive Design এর জন্য স্ক্রিনশট নেওয়া
এখন, যদি আপনি বিভিন্ন ডিভাইসের জন্য রেসপন্সিভ স্ক্রিনশট নিতে চান, তাহলে আপনি বিভিন্ন viewport sizes ব্যবহার করতে পারেন। এর মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য স্ক্রিনশট নেবেন।
Responsive Design স্ক্রিপ্ট উদাহরণ:
var webpage = require('webpage').create();
// Define multiple viewport sizes for different devices
var viewportSizes = [
{ width: 320, height: 480 }, // Mobile - Small
{ width: 768, height: 1024 }, // Tablet
{ width: 1280, height: 800 }, // Desktop
];
// Loop through the viewport sizes and take screenshots for each
viewportSizes.forEach(function(size) {
webpage.viewportSize = size;
webpage.open('https://example.com', function(status) {
if (status === "success") {
var fileName = 'screenshot_' + size.width + 'x' + size.height + '.png';
webpage.render(fileName);
console.log('Screenshot taken for ' + size.width + 'x' + size.height);
} else {
console.log('Failed to load the page for ' + size.width + 'x' + size.height);
}
});
});
phantom.exit();
Explanation:
- এখানে, আমরা
viewportSizesনামক একটি অ্যারে তৈরি করেছি যাতে বিভিন্ন ডিভাইসের স্ক্রীন সাইজ রয়েছে। forEachলুপ ব্যবহার করে প্রতিটি স্ক্রীন সাইজের জন্য পেজটি লোড করা হবে এবং স্ক্রিনশট নেওয়া হবে।- স্ক্রিনশটের নাম প্রতিটি স্ক্রীন সাইজের সাথে যুক্ত করা হবে, যেমন
screenshot_320x480.png,screenshot_768x1024.png, ইত্যাদি।
Step 3: স্ক্রিপ্ট চালানো
উপরের মতোই, স্ক্রিপ্টটি চালানোর জন্য কমান্ড লাইনে:
phantomjs responsive_screenshot_script.js
এই স্ক্রিপ্টটি নির্দিষ্ট ডিভাইস সাইজ অনুযায়ী স্ক্রিনশট নিবে এবং PNG ফাইল হিসেবে সেভ করবে।
PhantomJS এর মাধ্যমে Mobile View এবং Responsive Design স্ক্রিনশট নেওয়ার সুবিধা:
- Automation: PhantomJS একটি headless browser হওয়ায় স্ক্রিনশট নেওয়ার কাজটি স্বয়ংক্রিয়ভাবে করতে পারেন, যা manual testing এর তুলনায় অনেক দ্রুত হয়।
- Testing on Multiple Devices: একাধিক viewport size ব্যবহার করে একই ওয়েবসাইটের স্ক্রিনশট নিতে পারবেন এবং আপনার ডিজাইনটি বিভিন্ন ডিভাইসের উপর কেমন দেখাচ্ছে তা যাচাই করতে পারবেন।
- Integration: এটি CI/CD pipelines এ ইন্টিগ্রেট করা সম্ভব, যেখানে স্বয়ংক্রিয়ভাবে স্ক্রিনশট নেওয়া এবং পরীক্ষার ফলাফল জমা করা যাবে।
- Performance: GUI ছাড়া কাজ করার কারণে PhantomJS অনেক দ্রুত কাজ করে এবং পারফরম্যান্স খুবই ভালো।
PhantomJS এর মাধ্যমে আপনি Responsive Design এবং Mobile View এর স্ক্রিনশট নিতে পারেন, যা ওয়েব ডেভেলপমেন্টের সময় খুবই উপকারী হতে পারে। এই প্রক্রিয়া আপনাকে headless browser ব্যবহারের মাধ্যমে বিভিন্ন ডিভাইসে আপনার ওয়েবসাইটের ডিজাইন কেমন দেখাচ্ছে তা পরীক্ষা করতে সহায়তা করবে। PhantomJS এর মাধ্যমে আপনি স্বয়ংক্রিয়ভাবে স্ক্রিনশট নিতে পারবেন, যা ডিজাইন টেস্টিং এবং QA প্রক্রিয়াকে দ্রুত এবং দক্ষ করে তোলে।
Read more
