আমরা আনন্দের সাথে ঘোষণা করছি যে Chrome Headless Mode ( chrome --headless ) এবং Headless Shell ( chrome-headless-shell ) উভয়ই এখন সম্পূর্ণরূপে কনফিগারযোগ্য ভার্চুয়াল হেডলেস স্ক্রিন ব্যবহার করে যা Chrome যে সিস্টেমে চলছে তার সাথে সংযুক্ত ভৌত প্রদর্শন থেকে স্বাধীন। প্রাথমিক হেডলেস স্ক্রিন কনফিগারেশন --screen-info কমান্ড লাইন সুইচ ব্যবহার করে নির্দিষ্ট করা যেতে পারে। এই সুইচটি প্রতিটি ডিসপ্লের জন্য উৎপত্তি, আকার, স্কেল ফ্যাক্টর, ওরিয়েন্টেশন এবং কর্মক্ষেত্রের মতো বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে।
Chrome যখন হেডলেস মোডে চলছে, তখন Chrome DevTools Protocol (CDP) কমান্ড Emulation.addScreen এবং Emulation.removeScreen ব্যবহার করে ভার্চুয়াল হেডলেস স্ক্রিন যোগ এবং সরানো যেতে পারে।
এই নতুন হেডলেস ক্রোম ক্ষমতাগুলি Puppeteer দ্বারা সম্পূর্ণরূপে সমর্থিত, যা আপনাকে জটিল, বাস্তব-বিশ্বের প্রদর্শনের দৃশ্যপটগুলিকে স্বয়ংক্রিয় করতে দেয় যা আগে পরীক্ষা করা কঠিন ছিল। আপনার যদি উচ্চ-রেজোলিউশন 3K ডিসপ্লেতে পূর্ণ-স্ক্রিন চলমান একটি কিয়স্ক অ্যাপ্লিকেশন যাচাই করার প্রয়োজন হয়, একটি ডুয়াল-মনিটর সেটআপ জুড়ে মাল্টি-উইন্ডো ওয়ার্কফ্লো পরিচালনা করার প্রয়োজন হয়, অথবা যখন কোনও ব্যবহারকারী হঠাৎ একটি সেকেন্ডারি স্ক্রিন সংযোগ বিচ্ছিন্ন করে তখন আপনার UI সুন্দরভাবে মানিয়ে নেয় তা নিশ্চিত করার প্রয়োজন হয়, Headless Chrome এবং Puppeteer এখন আপনাকে কভার করেছে।
স্ট্যাটিক স্ক্রিন কনফিগারেশন পরীক্ষা করুন
স্ট্যাটিক স্ক্রিন পরিবেশের মধ্যে আপনার ওয়েবসাইট মূল্যায়ন করতে --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-এর পাবলিক বাগ ট্র্যাকারের মাধ্যমে আমাদের জানান।
১৪২ সংস্করণ থেকে শুরু করে স্থিতিশীল Chrome রিলিজে হেডলেস স্ক্রিন কনফিগারেশন কার্যকারিতা উপলব্ধ।