تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

ضبط الشاشات الافتراضية في "وضع التشغيل بدون شاشة"

Peter Kvitek

يستخدم "وضع التشغيل بلا واجهة مستخدم رسومية" في Chrome (chrome --headless) (وHeadless Shell القديم (chrome-headless-shell)) شاشة افتراضية بلا واجهة مستخدم رسومية قابلة للضبط بالكامل ومستقلة عن الشاشات الفعلية المتصلة بالجهاز الذي يتم تشغيل Chrome عليه. يمكن تحديد الإعدادات الأولية للشاشة بلا واجهة مستخدم رسومية باستخدام مفتاح سطر الأوامر ‎--screen-info command line switch. يحدّد هذا المفتاح خصائص مثل المصدر والحجم وعامل القياس والاتجاه ومنطقة العمل لكل شاشة.

أثناء تشغيل Chrome في وضع التشغيل بلا واجهة مستخدم رسومية، يمكن إضافة شاشات افتراضية بلا واجهة مستخدم رسومية وإزالتها باستخدام بروتوكول أدوات مطوّري البرامج في Chrome (CDP) أوامر Emulation.addScreen وEmulation.removeScreen.

تتوافق Puppeteer بالكامل مع إمكانات "Chrome بلا واجهة مستخدم رسومية" الجديدة هذه، ما يتيح لك أتمتة سيناريوهات العرض المعقدة في العالم الحقيقي التي كان من الصعب اختبارها سابقًا. سواء أردت التحقّق من تطبيق Kiosk يعمل في وضع ملء الشاشة على شاشة 3K عالية الدقة، أو تنسيق مهام سير عمل النوافذ المتعددة على إعداد شاشة مزدوجة، أو التأكّد من أنّ واجهة المستخدم تتكيّف بسلاسة عندما يقطع المستخدم فجأة اتصال شاشة ثانوية، فإنّ "Chrome بلا واجهة مستخدم رسومية" وPuppeteer يوفّران لك الآن كل ما تحتاجه.

اختبار إعدادات الشاشة الثابتة

استخدِم إعدادات الشاشة الثابتة من خلال مفتاح --screen-info لتقييم موقعك الإلكتروني ضمن بيئة شاشة ثابتة. في ما يلي قائمة بالسيناريوهات الشائعة:

اختبِر السلوك باستخدام مفتاحَي ‎--start-maximized و‎--start-fullscreen، مع الأخذ في الاعتبار منطقة عمل الشاشة وعامل القياس (مثل وضع Kiosk).
قيِّم سلوكَي element.requestFullscreen() وdocument.exitFullscreen() على أحجام الشاشات المختلفة وفي إعدادات الشاشات المتعددة.
راقِب سلوك الشاشة المقسّمة عندما تمتد نافذة على شاشات متعددة أو يتم نقلها بينها.
تحقَّق من طريقة التعامل مع إعدادات العرض المتنوعة، بما في ذلك القياس ودرجات الدقة وشاشات DPI العالية.
قيِّم فتح النوافذ أو النوافذ المنبثقة على الشاشات الأساسية والثانوية.

إعداد الشاشة المزدوجة

يضبط نص Puppeteer البرمجي التالي Chrome للتشغيل في إعداد شاشة مزدوجة باستخدام مفتاح --screen-info. تم ضبط الشاشة الأساسية بحجم 800×600 في الاتجاه الأفقي، والشاشة الثانوية بحجم 600×800، والتي يتم وضعها مباشرةً على يمين الشاشة الأساسية، في الاتجاه العمودي.

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 CDP، وهما Emulation.addScreen و Emulation.removeScreen. باستخدام هذين الأمرين، يمكنك إجراء ما يلي:

التأكّد من أنّ توصيل شاشة جديدة يتيح لصفحات الويب فتح نوافذ ونوافذ منبثقة جديدة ضمن منطقة عمل الشاشة الجديدة.
التأكّد من أنّه عند قطع اتصال شاشة أثناء نشاط صفحة ويب، يتكيّف حجم النافذة وموضعها بسلاسة مع الشاشات المتبقية.

فتح النافذة وتكبيرها على شاشة جديدة

يفتح نص Puppeteer البرمجي التالي نافذة في الموضع التلقائي على شاشة بحجم 800×600، ثم ينقل النافذة ويكبّرها على شاشة تم إنشاؤها حديثًا. بعد ذلك، يعيد النافذة إلى حالتها العادية.

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();