Chrome ヘッドレス モード（chrome --headless）とヘッドレス シェル（chrome-headless-shell）の両方で、システムが実行されている Chrome に接続された物理ディスプレイとは独立した、完全に構成可能な仮想ヘッドレス スクリーンが使用されるようになりました。初期のヘッドレス画面構成は、--screen-info コマンドライン スイッチを使用して指定できます。このスイッチは、各ディスプレイの原点、サイズ、倍率、向き、ワークエリアなどのプロパティを定義します。
Chrome がヘッドレス モードで実行されている間、Chrome DevTools Protocol（CDP）コマンド Emulation.addScreen と Emulation.removeScreen を使用して、仮想ヘッドレス画面を追加および削除できます。
これらの新しい Headless Chrome 機能は Puppeteer で完全にサポートされているため、これまでテストが難しかった複雑な実際のディスプレイ シナリオを自動化できます。高解像度 3K ディスプレイで全画面表示されるキオスク アプリケーションの検証、デュアル モニター設定でのマルチウィンドウ ワークフローのオーケストレーション、ユーザーが突然セカンダリ スクリーンを切断した場合の UI のスムーズな適応の確認など、Headless Chrome と Puppeteer で対応できるようになりました。
静的画面構成をテストする
--screen-info スイッチを使用して静的画面構成を使用し、静的画面環境内でウェブサイトを評価します。一般的なシナリオを次に示します。
- 画面の作業領域とスケーリング係数（キオスクモードなど）を考慮して、
--start-maximizedスイッチと--start-fullscreenスイッチで動作をテストします。 - さまざまな画面サイズとマルチスクリーン構成で
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
動的画面構成をテストする
画面環境を動的に構成して、ウェブサイトが予期しないモニターの接続や切断にどのように反応するかをテストします。これは、ノートパソコンをデスクトップ モニターに接続するなどの実際のユーザー操作を反映したものです。これらのシナリオは、Emulation.addScreen や Emulation.removeScreen などの CDP コマンドを使用してエミュレートされます。これらのコマンドを使用すると、次のことができます。
- 新しいモニターを接続すると、新しいモニターのワークエリア内でウェブページが新しいウィンドウやポップアップを開くことを確認します。
- ウェブページがアクティブな状態でモニターが切断されたときに、ウィンドウのサイズと位置が残りのディスプレイに適切に調整されるようにします。
新しい画面でウィンドウを開いて最大化する
次の 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 の公開バグトラッカーからお知らせください。
ヘッドレス画面構成機能は、バージョン 142 以降の安定版 Chrome リリースで利用できます。