การกำหนดค่าหน้าจอสำหรับการทำงานอัตโนมัติและการทดสอบด้วย Chrome Headless

Peter Kvitek

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

ขณะที่ Chrome ทำงานในโหมด Headless คุณจะเพิ่มและนำหน้าจอ Headless เสมือนออกได้โดยใช้คำสั่ง Chrome DevTools Protocol (CDP) Emulation.addScreen และ Emulation.removeScreen

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

ทดสอบการกำหนดค่าหน้าจอแบบคงที่

ใช้การกำหนดค่าหน้าจอแบบคงที่ผ่านสวิตช์ --screen-info เพื่อประเมิน เว็บไซต์ของคุณภายในสภาพแวดล้อมหน้าจอแบบคงที่ ต่อไปนี้คือรายการสถานการณ์ที่พบบ่อย

• ทดสอบลักษณะการทำงานด้วยสวิตช์ --start-maximized และ --start-fullscreen โดยพิจารณาพื้นที่ทำงานของหน้าจอและปัจจัยการปรับขนาด (เช่น โหมดคีออสก์)
• ประเมินลักษณะการทำงานของ element.requestFullscreen() และ document.exitFullscreen() ในหน้าจอขนาดต่างๆ และในการกำหนดค่าแบบหลายหน้าจอ
• สังเกตลักษณะการทำงานของหน้าจอแยกเมื่อหน้าต่างครอบคลุมหลายหน้าจอหรือ ย้ายไปมาระหว่างหน้าจอ
• ตรวจสอบการจัดการการตั้งค่าการแสดงผลที่หลากหลาย ซึ่งรวมถึงการปรับขนาด ความละเอียด และการแสดงผลแบบ DPI สูง
• ประเมินการเปิดหน้าต่างหรือป๊อปอัปบนหน้าจอหลักและหน้าจอรอง

การกำหนดค่าจอคู่

สคริปต์ Puppeteer ต่อไปนี้จะกำหนดค่า Chrome ให้ทำงานในการกำหนดค่าแบบ 2 หน้าจอโดยใช้สวิตช์ --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

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