กำหนดค่าหน้าจอเสมือนในโหมด Headless

Peter Kvitek

โหมด Headless (chrome --headless) ของ Chrome (และ Headless Shell (chrome-headless-shell) เวอร์ชันเก่า) ใช้หน้าจอ Headless เสมือนที่กำหนดค่าได้อย่างเต็มรูปแบบ ซึ่งไม่ขึ้นอยู่กับจอแสดงผลจริงที่เชื่อมต่อกับระบบที่ Chrome ทำงานอยู่ คุณระบุการกำหนดค่าหน้าจอ Headless เริ่มต้นได้โดยใช้สวิตช์บรรทัดคำสั่ง --screen-info command line switch สวิตช์นี้จะกำหนดพร็อพเพอร์ตี้ เช่น ต้นทาง ขนาด ค่าตัวคูณมาตราส่วน การวางแนว และพื้นที่ทำงานสำหรับจอแสดงผลแต่ละจอ

ขณะที่ Chrome ทำงานในโหมดไม่มีส่วนหัว คุณสามารถเพิ่มและนำหน้าจอไม่มีส่วนหัวเสมือนออกได้โดยใช้ โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (CDP) คำสั่ง Emulation.addScreen และ Emulation.removeScreen

Puppeteer รองรับความสามารถใหม่ของ Chrome แบบ Headless อย่างเต็มรูปแบบ ซึ่งช่วยให้คุณทำงานอัตโนมัติในสถานการณ์การแสดงผลที่ซับซ้อนและเกิดขึ้นจริง ซึ่งก่อนหน้านี้ทดสอบได้ยาก ไม่ว่าคุณจะต้องการยืนยันแอปพลิเคชันคีออสก์ที่ทำงานแบบเต็มหน้าจอบนจอแสดงผล 3K ความละเอียดสูง จัดการเวิร์กโฟลว์แบบหลายหน้าต่างในการตั้งค่าจอภาพคู่ หรือตรวจสอบว่า UI ปรับเปลี่ยนได้อย่างราบรื่นเมื่อผู้ใช้ยกเลิกการเชื่อมต่อหน้าจอรองอย่างกะทันหัน Chrome แบบ Headless และ 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

ทดสอบการกำหนดค่าหน้าจอแบบไดนามิก

กำหนดค่าสภาพแวดล้อมหน้าจอแบบไดนามิกเพื่อทดสอบว่าเว็บไซต์ของคุณตอบสนองต่อการเชื่อมต่อหรือยกเลิกการเชื่อมต่อจอภาพที่ไม่คาดคิดอย่างไร ซึ่งเป็นการจำลองการกระทำของผู้ใช้จริง เช่น การเชื่อมต่อโน้ตบุ๊กกับจอภาพเดสก์ท็อป 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

ฟังก์ชันการกำหนดค่าหน้าจอ Headless พร้อมใช้งานใน Chrome เวอร์ชันเสถียรตั้งแต่เวอร์ชัน 142 เป็นต้นไป