हमें यह बताते हुए खुशी हो रही है कि Chrome के हेडलेस मोड (chrome --headless) और हेडलेस शेल (chrome-headless-shell) में अब पूरी तरह से कॉन्फ़िगर की जा सकने वाली वर्चुअल हेडलेस स्क्रीन का इस्तेमाल किया जाता है. यह स्क्रीन, उस सिस्टम से जुड़े फ़िज़िकल डिसप्ले से अलग होती है जिस पर Chrome चल रहा है. --screen-info कमांड लाइन स्विच का इस्तेमाल करके, हेडलेस स्क्रीन के शुरुआती कॉन्फ़िगरेशन के बारे में बताया जा सकता है.
इस स्विच से, हर डिसप्ले के लिए ओरिजन, साइज़, स्केल फ़ैक्टर, ओरिएंटेशन, और वर्क एरिया जैसी प्रॉपर्टी तय की जाती हैं.
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले मोड में Chrome के चलने के दौरान, Chrome DevTools Protocol (सीडीपी) कमांड Emulation.addScreen और Emulation.removeScreen का इस्तेमाल करके, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाली वर्चुअल स्क्रीन जोड़ी और हटाई जा सकती हैं.
Headless Chrome की इन नई सुविधाओं के साथ Puppeteer पूरी तरह से काम करता है. इससे आपको डिसप्ले से जुड़े मुश्किल और असल दुनिया के ऐसे उदाहरणों को अपने-आप टेस्ट करने की सुविधा मिलती है जिन्हें पहले टेस्ट करना मुश्किल था. चाहे आपको हाई रिज़ॉल्यूशन वाले 3K डिसप्ले पर फ़ुल-स्क्रीन में चल रहे कियॉस्क ऐप्लिकेशन की पुष्टि करनी हो, डुअल-मॉनिटर सेटअप पर मल्टी-विंडो वर्कफ़्लो को व्यवस्थित करना हो या यह पक्का करना हो कि जब कोई उपयोगकर्ता अचानक सेकंडरी स्क्रीन को डिसकनेक्ट कर दे, तो आपका यूज़र इंटरफ़ेस (यूआई) ठीक से काम करे, अब Headless Chrome और Puppeteer आपकी मदद कर सकते हैं.
स्टैटिक स्क्रीन कॉन्फ़िगरेशन की जांच करना
स्टैटिक स्क्रीन एनवायरमेंट में अपनी वेबसाइट का आकलन करने के लिए, --screen-info स्विच का इस्तेमाल करके स्टैटिक स्क्रीन कॉन्फ़िगरेशन का इस्तेमाल करें. यहां कुछ सामान्य स्थितियां दी गई हैं:
--start-maximizedऔर--start-fullscreenस्विच का इस्तेमाल करके, व्यवहार की जांच करें. इसके लिए, स्क्रीन के वर्किंग एरिया और स्केल फ़ैक्टर (जैसे, कीऑस्क मोड) को ध्यान में रखें.- अलग-अलग स्क्रीन साइज़ और मल्टीस्क्रीन कॉन्फ़िगरेशन में,
element.requestFullscreen()औरdocument.exitFullscreen()के व्यवहार का आकलन करें. - जब कोई विंडो एक से ज़्यादा स्क्रीन पर फैली हो या उसे एक स्क्रीन से दूसरी स्क्रीन पर ले जाया जा रहा हो, तब स्प्लिट-स्क्रीन के व्यवहार को देखें.
- अलग-अलग डिसप्ले सेटिंग के काम करने की पुष्टि करें. जैसे, स्केलिंग, रिज़ॉल्यूशन, और हाई-डीपीआई डिसप्ले.
- प्राइमरी और सेकंडरी स्क्रीन पर विंडो या पॉप-अप खुलने का आकलन करें.
ड्यूअल स्क्रीन कॉन्फ़िगरेशन
यहां दी गई Puppeteer स्क्रिप्ट, Chrome को ड्यूअल-स्क्रीन कॉन्फ़िगरेशन में चलाने के लिए कॉन्फ़िगर करती है. इसके लिए, --screen-info स्विच का इस्तेमाल किया जाता है. मुख्य 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
डाइनैमिक स्क्रीन कॉन्फ़िगरेशन की जांच करना
अपनी स्क्रीन के एनवायरमेंट को डाइनैमिक तरीके से कॉन्फ़िगर करें. इससे यह टेस्ट किया जा सकता है कि मॉनिटर के अचानक कनेक्ट या डिसकनेक्ट होने पर, आपकी वेबसाइट कैसे काम करती है. साथ ही, इससे असल दुनिया में उपयोगकर्ता की कार्रवाइयों को भी मिरर किया जा सकता है. जैसे, किसी नोटबुक को डेस्कटॉप मॉनिटर से कनेक्ट करना. इन स्थितियों को CDP कमांड का इस्तेमाल करके, Emulation.addScreen और Emulation.removeScreen के तौर पर बनाया जाता है. इन कमांड की मदद से, ये काम किए जा सकते हैं:
- पुष्टि करें कि नई मॉनिटर कनेक्ट करने पर, वेब पेज नई मॉनिटर के वर्क एरिया में नई विंडो और पॉप-अप खोल सकते हैं.
- पक्का करें कि वेब पेज चालू होने के दौरान मॉनिटर के डिसकनेक्ट होने पर, उसकी विंडो का साइज़ और पोज़िशन, बाकी डिसप्ले के हिसाब से अपने-आप ठीक हो जाए.
नई स्क्रीन पर विंडो खोलना और उसे बड़ा करना
नीचे दी गई 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 पर कोड के ज़्यादा सैंपल देखें. अगर आपको कोई समस्या आ रही है, तो Puppeteer के GitHub पर मौजूद सार्वजनिक बग ट्रैकर के ज़रिए हमें बताएं.
हेडलेस स्क्रीन को कॉन्फ़िगर करने की सुविधा, Chrome के स्टेबल वर्शन में उपलब्ध है. यह सुविधा, 142 और उसके बाद के वर्शन में उपलब्ध है.