Nos complace anunciar que el modo sin interfaz gráfica de Chrome (chrome --headless) y Headless Shell (chrome-headless-shell) ahora usan una pantalla virtual sin interfaz gráfica completamente configurable que es independiente de las pantallas físicas conectadas al sistema en el que se ejecuta Chrome. La configuración inicial de la pantalla sin encabezado se puede especificar con el interruptor de línea de comandos --screen-info.
Este modificador define propiedades como el origen, el tamaño, el factor de escala, la orientación y el área de trabajo para cada pantalla.
Mientras Chrome se ejecuta en modo sin interfaz gráfica, se pueden agregar y quitar pantallas virtuales sin interfaz gráfica con los comandos Chrome DevTools Protocol (CDP) Emulation.addScreen y Emulation.removeScreen.
Puppeteer admite por completo estas nuevas capacidades de Headless Chrome, lo que te permite automatizar situaciones de visualización complejas del mundo real que antes eran difíciles de probar. Ya sea que necesites verificar una aplicación de quiosco que se ejecuta en pantalla completa en una pantalla 3K de alta resolución, coordinar flujos de trabajo de varias ventanas en una configuración de doble monitor o asegurarte de que tu IU se adapte correctamente cuando un usuario desconecta repentinamente una pantalla secundaria, Headless Chrome y Puppeteer ahora te brindan la solución.
Prueba configuraciones de pantalla estáticas
Usa la configuración de pantalla estática a través del interruptor --screen-info para evaluar tu sitio web en un entorno de pantalla estática. A continuación, se incluye una lista de situaciones habituales:
- Prueba el comportamiento con los interruptores
--start-maximizedy--start-fullscreen, teniendo en cuenta el área de trabajo de la pantalla y el factor de escala (p.ej., el modo kiosco). - Evalúa el comportamiento de
element.requestFullscreen()ydocument.exitFullscreen()en varios tamaños de pantalla y en configuraciones de múltiples pantallas. - Observa el comportamiento de la pantalla dividida cuando una ventana abarca varias pantallas o se mueve entre ellas.
- Verifica el manejo de diversos parámetros de configuración de pantalla, incluidos el ajuste de escala, las resoluciones y las pantallas con DPI alto.
- Evalúa la apertura de ventanas o ventanas emergentes en pantallas principales y secundarias.
Configuración de Dual Screen
La siguiente secuencia de comandos de Puppeteer configura Chrome para que se ejecute en una configuración de pantalla doble con el parámetro de configuración --screen-info. La pantalla principal de 800 x 600 está configurada en orientación horizontal, y la pantalla secundaria de 600 x 800, ubicada directamente a la derecha de la pantalla principal, está en orientación vertical.
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();
Resultado:
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
Prueba las configuraciones de pantalla dinámicas
Configura de forma dinámica el entorno de la pantalla para probar cómo reacciona tu sitio web a las conexiones o desconexiones inesperadas del monitor, lo que refleja las acciones del usuario en el mundo real, como conectar una notebook a un monitor de escritorio. Estos casos se emulan con los comandos de CDP Emulation.addScreen y Emulation.removeScreen. Con estos comandos, puedes hacer lo siguiente:
- Verifica que, al conectar un monitor nuevo, las páginas web puedan abrir ventanas y elementos emergentes en el área de trabajo del monitor nuevo.
- Asegúrate de que, cuando se desconecte un monitor mientras una página web está activa, el tamaño y la posición de su ventana se adapten correctamente a las pantallas restantes.
Abre y maximiza la ventana en una pantalla nueva
El siguiente script de Puppeteer abre una ventana en la posición predeterminada en una pantalla de 800 x 600, luego mueve y maximiza la ventana en una pantalla recién creada. Luego, restablece la ventana a su 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();
Resultado:
20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal
Más casos de uso, ejemplos y disponibilidad
Encuentra más muestras de código en pptr.dev. Si tienes problemas, infórmanos a través del bug tracker público de Puppeteer en GitHub.
La funcionalidad de configuración de pantalla sin interfaz gráfica está disponible en las versiones estables de Chrome a partir de la versión 142.