Configurar telas virtuais no modo sem tela

Peter Kvitek

O modo headless do Chrome (chrome --headless) e o antigo Headless Shell (chrome-headless-shell) usam uma tela headless virtual totalmente configurável, independente das telas físicas conectadas ao sistema em que o Chrome está em execução. A configuração inicial da tela headless pode ser especificada usando a opção de linha de comando --screen-info command line switch. Essa opção define propriedades como origem, tamanho, fator de escala, orientação e área de trabalho para cada tela.

Enquanto o Chrome está em execução no modo headless, as telas headless virtuais podem ser adicionadas e removidas usando Chrome DevTools Protocol (CDP) comandos Emulation.addScreen e Emulation.removeScreen.

Esses novos recursos da versão headless do Chrome são totalmente compatíveis com o Puppeteer, permitindo automatizar cenários de exibição complexos e reais que antes eram difíceis de testar. Se você precisa verificar um aplicativo de quiosque em tela cheia em uma tela 3K de alta resolução, orquestrar fluxos de trabalho de várias janelas em uma configuração de monitor duplo ou garantir que a interface se adapte bem quando um usuário desconecta repentinamente uma tela secundária, a versão headless do Chrome e o Puppeteer agora podem ajudar.

Testar configurações de tela estática

Use a configuração de tela estática com a opção --screen-info para avaliar seu site em um ambiente de tela estática. Confira uma lista de cenários comuns:

• Testar o comportamento com as opções --start-maximized e --start-fullscreen, considerando a área de trabalho e o fator de escala da tela (por exemplo, o modo quiosque).
• Avaliar o comportamento de element.requestFullscreen() e document.exitFullscreen() em vários tamanhos de tela e em configurações de várias telas.
• Observar o comportamento de tela dividida quando uma janela abrange várias telas ou é movida entre elas.
• Verificar o processamento de diversas configurações de exibição, incluindo escalonamento, resoluções e telas de alta DPI.
• Avaliar a abertura de janelas ou pop-ups em telas principais e secundárias.

Configuração de tela dupla

O script do Puppeteer a seguir configura o Chrome para ser executado em uma configuração de tela dupla usando a opção --screen-info. A tela principal de 800 x 600 é configurada na orientação paisagem, e a tela secundária de 600 x 800, posicionada diretamente à direita da tela principal, está na orientação retrato.

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();

Saída:

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

Testar configurações de tela dinâmica

Configure dinamicamente o ambiente de tela para testar como seu site reage a conexões ou desconexões inesperadas de monitores, espelhando ações reais do usuário, como conectar um notebook a um monitor de computador. Esses cenários são emulados usando CDP comandos como Emulation.addScreen e Emulation.removeScreen. Com esses comandos, é possível fazer o seguinte:

• Verificar se a conexão de um novo monitor permite que as páginas da Web abram novas janelas e pop-ups na área de trabalho do novo monitor.
• Garantir que, quando um monitor é desconectado enquanto uma página da Web está ativa, o tamanho e a posição da janela se adaptem bem às telas restantes.

Abrir e maximizar a janela em uma nova tela

O script do Puppeteer a seguir abre uma janela na posição padrão em uma tela de 800 x 600 e, em seguida, move e maximiza a janela para uma tela recém-criada. Em seguida, ele restaura a janela ao estado normal.

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();

Saída:

20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal

Mais casos de uso, exemplos e disponibilidade

Encontre mais exemplos de código em pptr.dev. Se você tiver problemas, informe-nos pelo rastreador de bugs público do Puppeteer no GitHub.

A funcionalidade de configuração da tela headless está disponível em versões estáveis do Chrome a partir da versão 142.