Temos o prazer de anunciar que o modo headless do Chrome (chrome --headless) e o Headless Shell (chrome-headless-shell) agora usam uma tela virtual headless totalmente configurável, independente dos monitores físicos conectados ao sistema em que o Chrome está sendo executado. A configuração inicial da tela sem interface gráfica pode ser especificada usando a opção de linha de comando --screen-info.
Essa chave define propriedades como origem, tamanho, fator de escala, orientação e
área de trabalho para cada tela.
Enquanto o Chrome está sendo executado no modo headless, telas headless virtuais podem ser adicionadas e removidas usando comandos do Protocolo Chrome DevTools (CDP) Emulation.addScreen e Emulation.removeScreen.
Esses novos recursos do Headless Chrome são totalmente compatíveis com o Puppeteer, permitindo automatizar cenários de exibição complexos e reais que 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 dois monitores ou garantir que sua interface se adapte normalmente quando um usuário desconecta repentinamente uma tela secundária, o Chrome sem interface gráfica e o Puppeteer agora oferecem suporte a você.
Testar configurações de tela estáticas
Use a configuração de tela estática com a chave --screen-info para avaliar
seu site em um ambiente de tela estática. Confira uma lista de cenários comuns:
- Teste o comportamento com as chaves
--start-maximizede--start-fullscreen, considerando a área de trabalho e o fator de escala da tela (por exemplo, modo quiosque). - Avalie o comportamento de
element.requestFullscreen()edocument.exitFullscreen()em vários tamanhos de tela e configurações de várias telas. - Observe o comportamento da tela dividida quando uma janela abrange várias telas ou é movida entre elas.
- Verifique o processamento de diversas configurações de exibição, incluindo escalonamento, resoluções e telas de alta DPI.
- Avalie a abertura de janelas ou pop-ups nas telas principal e secundária.
Configuração de tela dupla
O script Puppeteer a seguir configura o Chrome para ser executado em
uma configuração de tela dupla usando a chave --screen-info. A tela principal de 800 x 600 está 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 dinâmicas de tela
Configure dinamicamente o ambiente da tela para testar como seu site reage a conexões ou desconexões inesperadas de monitores, espelhando ações de usuários reais, como conectar um notebook a um monitor de computador. Esses cenários são emulados usando comandos CDP, como Emulation.addScreen e Emulation.removeScreen. Com esses comandos, você pode fazer o seguinte:
- Verifique 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.
- Verifique se, quando um monitor é desconectado enquanto uma página da Web está ativa, o tamanho e a posição da janela se adaptam normalmente aos monitores restantes.
Abrir e maximizar a janela em uma nova tela
O script Puppeteer a seguir abre uma janela na posição padrão em uma tela de 800x600, depois move e maximiza a janela para uma tela recém-criada. Em seguida, ela 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ê estiver enfrentando problemas, informe-nos pelo rastreador de bugs público do Puppeteer no GitHub.
A funcionalidade de configuração de tela headless está disponível nas versões estáveis do Chrome a partir da versão 142.