خوشحالیم اعلام کنیم که هم حالت بدون سر کروم ( chrome --headless ) و هم پوسته بدون سر ( chrome-headless-shell ) اکنون از یک صفحه نمایش مجازی بدون سر کاملاً قابل تنظیم استفاده میکنند که مستقل از نمایشگرهای فیزیکی متصل به سیستمی است که کروم روی آن اجرا میشود. پیکربندی اولیه صفحه نمایش بدون سر را میتوان با استفاده از سوئیچ خط فرمان --screen-info مشخص کرد. این سوئیچ ویژگیهایی مانند مبدا، اندازه، ضریب مقیاس، جهتگیری و ناحیه کاری را برای هر نمایشگر تعریف میکند.
در حالی که کروم در حالت بیسروصدا (headless mode) اجرا میشود، میتوان با استفاده از دستورات پروتکل توسعهدهندگان کروم (CDP) به نامهای Emulation.addScreen و Emulation.removeScreen ، صفحات مجازی بیسروصدا را اضافه و حذف کرد.
این قابلیتهای جدید Headless Chrome به طور کامل توسط Puppeteer پشتیبانی میشوند و به شما امکان میدهند سناریوهای نمایش پیچیده و واقعی را که قبلاً آزمایش آنها دشوار بود، خودکار کنید. چه نیاز به تأیید اجرای تمام صفحه یک برنامه کیوسک روی یک صفحه نمایش با وضوح بالای 3K داشته باشید، چه بخواهید گردشهای کاری چند پنجرهای را در یک سیستم دو مانیتوره هماهنگ کنید، یا مطمئن شوید که رابط کاربری شما هنگامی که کاربر ناگهان صفحه نمایش ثانویه را جدا میکند، به خوبی سازگار میشود، Headless Chrome و Puppeteer اکنون این کار را برای شما انجام میدهند.
تنظیمات صفحه نمایش استاتیک را آزمایش کنید
از پیکربندی صفحه نمایش استاتیک از طریق سوئیچ --screen-info برای ارزیابی وبسایت خود در یک محیط صفحه نمایش استاتیک استفاده کنید. در زیر لیستی از سناریوهای رایج آمده است:
- با استفاده از سوئیچهای
--start-maximizedو--start-fullscreen، رفتار را با در نظر گرفتن ناحیه کاری صفحه نمایش و ضریب مقیاس (مثلاً حالت کیوسک) آزمایش کنید. - رفتار توابع
element.requestFullscreen()وdocument.exitFullscreen()را در اندازههای مختلف صفحه نمایش و در پیکربندیهای چندصفحهای ارزیابی کنید. - رفتار تقسیم صفحه را هنگامی که یک پنجره چندین صفحه را در بر میگیرد یا بین آنها جابجا میشود، مشاهده کنید.
- بررسی کنید که آیا تنظیمات مختلف نمایشگر، از جمله مقیاسبندی، وضوح تصویر و نمایشگرهای با DPI بالا، به درستی کار میکنند یا خیر.
- میزان باز شدن پنجرهها یا پاپآپها را در صفحات اصلی و فرعی ارزیابی کنید.
پیکربندی صفحه نمایش دوگانه
اسکریپت Puppeteer زیر، کروم را برای اجرا در حالت دو صفحهای با استفاده از سوئیچ --screen-info پیکربندی میکند. صفحه اصلی ۸۰۰x۶۰۰ در جهت افقی پیکربندی شده و صفحه ثانویه ۶۰۰x۸۰۰ که مستقیماً در سمت راست صفحه اصلی قرار دارد، در جهت عمودی است.
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 زیر یک پنجره را در موقعیت پیشفرض روی صفحه نمایش ۸۰۰x۶۰۰ باز میکند، سپس پنجره را به یک صفحه نمایش جدید منتقل و به حداکثر میرساند. سپس پنجره را به حالت عادی خود برمیگرداند.
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 به ما اطلاع دهید.
قابلیت پیکربندی صفحه نمایش بدون سر (Headless Screen) از نسخه ۱۴۲ به بعد در نسخههای پایدار کروم موجود است.