屏幕配置

使用 --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

未指定 --screen-info 标志时，无头屏幕只有一个 800x600 屏幕，除非指定了 --window-size 标志，此时无头屏幕的大小与请求的窗口大小一致。

动态无头屏幕配置

使用 Puppeteer 的 Browser.addScreen 和 Browser.removeScreen 方法，在 Chrome 浏览器运行期间添加和移除屏幕。使用 Browser.screens 方法获取当前屏幕配置。

下面的脚本添加并移除一个副屏幕，同时在每一步记录屏幕配置。

import puppeteer from 'puppeteer-core';

const browser = await puppeteer.launch({
  args: ['--screen-info={800x600 label=1st}'],
});

function getScreenInfo(s) {
  return (
    `Screen [${s.id}]` +
    ` ${s.left},${s.top} ${s.width}x${s.height}` +
    ` label='${s.label}'` +
    ` isPrimary=${s.isPrimary}` +
    ` isExtended=${s.isExtended}`
  );
}

async function logScreenConfig(text) {
  if (text !== undefined) {
    console.log(text);
  }
  const screens = await browser.screens();
  const screenInfos = screens.map(s => getScreenInfo(s));

  console.log(
    `Number of screens: ${screens.length}\n` + screenInfos.join('\n'),
  );
}

await logScreenConfig('---- Initial:');

// Add a screen.
const addedScreenInfo = await browser.addScreen({
  left: 800,
  top: 0,
  width: 800,
  height: 600,
  label: '2nd',
});

console.log('Added screen: ' + getScreenInfo(addedScreenInfo));
await logScreenConfig('---- With the screen added:');

// Remove the added screen.
await browser.removeScreen(addedScreenInfo.id);
await logScreenConfig('---- With added screen removed:');

await browser.close();

输出：

---- Initial:
Number of screens: 1
Screen [1] 0,0 800x600 label='1st' isPrimary=true isExtended=false
Added screen: Screen [2] 800,0 800x600 label='2nd' isPrimary=false isExtended=true
---- With the screen added:
Number of screens: 2
Screen [1] 0,0 800x600 label='1st' isPrimary=true isExtended=true
Screen [2] 800,0 800x600 label='2nd' isPrimary=false isExtended=true
---- With added screen removed:
Number of screens: 1
Screen [1] 0,0 800x600 label='1st' isPrimary=true isExtended=false