使用 Chrome Headless 自動化和測試螢幕設定

Peter Kvitek

我們很高興宣布，Chrome 無頭模式 (chrome --headless) 和無頭 Shell (chrome-headless-shell) 現在都使用完全可設定的虛擬無頭螢幕，與系統執行的 Chrome 所連線的實體螢幕無關。您可以使用 --screen-info 指令列切換，指定初始無螢幕畫面設定。這個切換開關會定義每個螢幕的屬性，例如原點、大小、縮放比例係數、方向和工作區。

Chrome 以無頭模式執行時，可以使用 Chrome DevTools Protocol (CDP) 指令 Emulation.addScreen 和 Emulation.removeScreen 新增及移除虛擬無頭螢幕。

Puppeteer 完全支援這些新的無頭 Chrome 功能，讓您自動執行複雜的實際顯示情境，這些情境先前難以測試。無論您是需要驗證在高解析度 3K 螢幕上以全螢幕執行的資訊站應用程式、在雙螢幕設定中協調多視窗工作流程，還是確保 UI 在使用者突然中斷連線次要螢幕時能順利調整，Headless Chrome 和 Puppeteer 現在都能滿足您的需求。

測試靜態螢幕設定

透過 --screen-info 切換按鈕使用靜態螢幕設定，在靜態螢幕環境中評估網站。以下列出常見情況：

使用 --start-maximized 和 --start-fullscreen 切換開關測試行為，並考量螢幕工作區域和縮放比例 (例如 Kiosk 模式)。
評估各種螢幕大小和多螢幕設定下的 element.requestFullscreen() 和 document.exitFullscreen() 行為。
觀察視窗跨越多個螢幕或在螢幕間移動時，分割畫面的行為。
確認處理各種顯示設定，包括縮放、解析度和高 DPI 螢幕。
評估視窗或彈出式視窗在主要和次要螢幕上的開啟情形。

雙螢幕設定

下列 Puppeteer 指令碼會使用 --screen-info 切換鍵，將 Chrome 設定為以雙螢幕設定執行。主要 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();