ক্রোম হেডলেস মোড ( chrome --headless ) (এবং পুরোনো হেডলেস শেল ( chrome-headless-shell )) একটি সম্পূর্ণ কনফিগারযোগ্য ভার্চুয়াল হেডলেস স্ক্রিন ব্যবহার করে, যা ক্রোম যে সিস্টেমে চলছে তার সাথে সংযুক্ত ফিজিক্যাল ডিসপ্লেগুলো থেকে স্বাধীন। প্রাথমিক হেডলেস স্ক্রিন কনফিগারেশন --screen-info কমান্ড লাইন সুইচ ব্যবহার করে নির্দিষ্ট করা যায়। এই সুইচটি প্রতিটি ডিসপ্লের জন্য অরিজিন, সাইজ, স্কেল ফ্যাক্টর, ওরিয়েন্টেশন এবং ওয়ার্ক এরিয়ার মতো বৈশিষ্ট্যগুলো নির্ধারণ করে।
ক্রোম হেডলেস মোডে চলার সময়, Chrome DevTools Protocol (CDP) কমান্ড Emulation.addScreen এবং Emulation.removeScreen ব্যবহার করে ভার্চুয়াল হেডলেস স্ক্রিন যোগ ও অপসারণ করা যায়।
এই নতুন হেডলেস ক্রোম সক্ষমতাগুলো পাপেটিয়ার দ্বারা সম্পূর্ণরূপে সমর্থিত, যা আপনাকে এমন সব জটিল ও বাস্তব-জগতের ডিসপ্লে পরিস্থিতি স্বয়ংক্রিয় করতে দেয়, যা আগে পরীক্ষা করা কঠিন ছিল। আপনার প্রয়োজন হোক একটি উচ্চ-রেজোলিউশনের 3K ডিসপ্লেতে ফুল-স্ক্রিনে চলা কোনো কিয়স্ক অ্যাপ্লিকেশন যাচাই করা, দুটি মনিটরের সেটআপে একাধিক উইন্ডোর ওয়ার্কফ্লো পরিচালনা করা, অথবা কোনো ব্যবহারকারী হঠাৎ করে দ্বিতীয় স্ক্রিনটি সংযোগ বিচ্ছিন্ন করলে আপনার UI-এর সাবলীলভাবে মানিয়ে নেওয়া নিশ্চিত করা—হেডলেস ক্রোম এবং পাপেটিয়ার এখন আপনার সব প্রয়োজন মেটাবে।
স্ট্যাটিক স্ক্রিন কনফিগারেশন পরীক্ষা করুন
আপনার ওয়েবসাইটটিকে একটি স্ট্যাটিক স্ক্রিন পরিবেশে মূল্যায়ন করতে --screen-info সুইচের মাধ্যমে স্ট্যাটিক স্ক্রিন কনফিগারেশন ব্যবহার করুন। নিচে কিছু সাধারণ পরিস্থিতির তালিকা দেওয়া হলো:
- স্ক্রিনের কার্যক্ষেত্র এবং স্কেল ফ্যাক্টর (যেমন, কিয়স্ক মোড) বিবেচনা করে
--start-maximizedএবং--start-fullscreenসুইচগুলোর সাথে আচরণ পরীক্ষা করুন। - বিভিন্ন স্ক্রিন সাইজে এবং মাল্টিস্ক্রিন কনফিগারেশনে
element.requestFullscreen()এবংdocument.exitFullscreen()এর আচরণ মূল্যায়ন করুন। - যখন একটি উইন্ডো একাধিক স্ক্রিন জুড়ে বিস্তৃত হয় বা সেগুলোর মধ্যে সরানো হয়, তখন স্প্লিট-স্ক্রিনের আচরণ পর্যবেক্ষণ করুন।
- স্কেলিং, রেজোলিউশন এবং হাই-ডিপিআই ডিসপ্লে সহ বিভিন্ন ডিসপ্লে সেটিংসের পরিচালনা যাচাই করুন।
- প্রাথমিক ও দ্বিতীয় স্ক্রিনে উইন্ডো বা পপ-আপ খোলার বিষয়টি মূল্যায়ন করুন।
ডুয়াল স্ক্রিন কনফিগারেশন
নিম্নলিখিত Puppeteer স্ক্রিপ্টটি --screen-info সুইচ ব্যবহার করে Chrome-কে একটি ডুয়াল-স্ক্রিন কনফিগারেশনে চালানোর জন্য কনফিগার করে। প্রাথমিক 800x600 স্ক্রিনটি ল্যান্ডস্কেপ ওরিয়েন্টেশনে এবং প্রাথমিক স্ক্রিনের ঠিক ডানদিকে অবস্থিত দ্বিতীয় 600x800 স্ক্রিনটি পোর্ট্রেট ওরিয়েন্টেশনে কনফিগার করা হয়।
import puppeteer from 'puppeteer-core';
const browser = await puppeteer.launch({
args: ['--screen-info={800x600 label=1st}{600x800 label=2nd}'],
});
const screens = await browser.screens();
const screenInfos = screens.map(
s => `Screen [${s.id}]`
+ ` ${s.left},${s.top} ${s.width}x${s.height}`
+ ` label='${s.label}'`
+ ` isPrimary=${s.isPrimary}`
+ ` isExtended=${s.isExtended}`
+ ` isInternal=${s.isInternal}`
+ ` colorDepth=${s.colorDepth}`
+ ` devicePixelRatio=${s.devicePixelRatio}`
+ ` avail=${s.availLeft},${s.availTop} ${s.availWidth}x${s.availHeight}`
+ ` orientation.type=${s.orientation.type}`
+ ` orientation.angle=${s.orientation.angle}`
);
console.log(`Number of screens: ${screens.length}\n` + screenInfos.join('\n'));
await browser.close();
আউটপুট :
Number of screens: 2
Screen [1] 0,0 800x600 label='1st' isPrimary=true isExtended=true isInternal=false colorDepth=24 devicePixelRatio=1 avail=0,0 800x600 orientation.type=landscapePrimary orientation.angle=0
Screen [2] 800,0 600x800 label='2nd' isPrimary=false isExtended=true isInternal=false colorDepth=24 devicePixelRatio=1 avail=800,0 600x800 orientation.type=portraitPrimary orientation.angle=0
ডায়নামিক স্ক্রিন কনফিগারেশন পরীক্ষা করুন
আপনার ওয়েবসাইট অপ্রত্যাশিত মনিটর সংযোগ বা সংযোগ বিচ্ছিন্ন হওয়ার ক্ষেত্রে কীভাবে প্রতিক্রিয়া দেখায় তা পরীক্ষা করার জন্য আপনার স্ক্রিন পরিবেশকে গতিশীলভাবে কনফিগার করুন, যা একটি নোটবুককে ডেস্কটপ মনিটরের সাথে সংযুক্ত করার মতো বাস্তব ব্যবহারকারীর কার্যকলাপের প্রতিচ্ছবি তৈরি করে। এই পরিস্থিতিগুলো Emulation.addScreen এবং Emulation.removeScreen- এর মতো CDP কমান্ড ব্যবহার করে অনুকরণ করা হয়। এই কমান্ডগুলো দিয়ে, আপনি নিম্নলিখিত কাজগুলো করতে পারেন:
- যাচাই করুন যে নতুন মনিটরটি সংযোগ করার পর সেটির ওয়ার্ক এরিয়ার মধ্যে ওয়েব পেজগুলো নতুন উইন্ডো এবং পপ-আপ হিসেবে খোলা যায় কিনা।
- নিশ্চিত করুন যে, কোনো ওয়েব পেজ সক্রিয় থাকা অবস্থায় মনিটর সংযোগ বিচ্ছিন্ন হলে, তার উইন্ডোর আকার ও অবস্থান যেন অবশিষ্ট ডিসপ্লেগুলোর সাথে সুন্দরভাবে মানিয়ে নেয়।
একটি নতুন স্ক্রিনে উইন্ডোটি খুলুন এবং বড় করুন।
নিম্নলিখিত Puppeteer স্ক্রিপ্টটি একটি 800x600 স্ক্রিনের ডিফল্ট অবস্থানে একটি উইন্ডো খোলে, তারপর উইন্ডোটিকে একটি নতুন তৈরি করা স্ক্রিনে সরিয়ে নিয়ে যায় এবং ম্যাক্সিমাইজ করে। এরপর এটি উইন্ডোটিকে তার স্বাভাবিক অবস্থায় ফিরিয়ে আনে।
import puppeteer from 'puppeteer-core';
const browser = await puppeteer.launch({
args: ['--screen-info={800x600}'],
});
async function logWindowBounds() {
const bounds = await browser.getWindowBounds(windowId);
console.log(`${bounds.left},${bounds.top}` +
` ${bounds.width}x${bounds.height}` +
` ${bounds.windowState}`);
}
const page = await browser.newPage({type: 'window'});
const windowId = await page.windowId();
await logWindowBounds();
const screenInfo = await browser.addScreen({
left: 800,
top: 0,
width: 1600,
height: 1200,
});
await browser.setWindowBounds(windowId, {
left: screenInfo.left + 50,
top: screenInfo.top + 50,
width: screenInfo.width - 100,
height: screenInfo.height - 100,
});
await logWindowBounds();
await browser.setWindowBounds(windowId, {windowState: 'maximized'});
await logWindowBounds();
await browser.setWindowBounds(windowId, {windowState: 'normal'});
await logWindowBounds();
await browser.close();
আউটপুট :
20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal
আরও ব্যবহারের ক্ষেত্র, উদাহরণ এবং প্রাপ্যতা
pptr.dev-এ আরও কোড নমুনা খুঁজুন । যদি আপনি কোনো সমস্যার সম্মুখীন হন, তবে GitHub-এ Puppeteer-এর পাবলিক বাগ ট্র্যাকারের মাধ্যমে আমাদের জানান।
ক্রোমের ১৪২ সংস্করণ থেকে শুরু হওয়া স্থিতিশীল রিলিজগুলোতে হেডলেস স্ক্রিন কনফিগারেশন কার্যকারিতা উপলব্ধ।