إعداد الشاشة لأغراض التشغيل الآلي والاختبار باستخدام Chrome Headless

Peter Kvitek

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

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

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

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

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

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

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

يضبط نص 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();