Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Configura pantallas virtuales en el modo sin encabezado

Peter Kvitek

El modo sin interfaz gráfica de Chrome (chrome --headless) (y el shell sin interfaz gráfica anterior (chrome-headless-shell)) 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 interfaz gráfica se puede especificar con el parámetro de línea de comandos --screen-info . Este parámetro define propiedades como el origen, el tamaño, el factor de escala, la orientación y el área de trabajo de 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 del protocolo de Herramientas para desarrolladores de Chrome (CDP) Emulation.addScreen y Emulation.removeScreen.

Puppeteer admite por completo estas nuevas capacidades de Chrome sin interfaz gráfica, lo que te permite automatizar situaciones de visualización complejas y del mundo real que antes eran difíciles de probar. Ya sea que necesites verificar una aplicación de kiosco que se ejecuta en pantalla completa en una pantalla 3K de alta resolución, organizar flujos de trabajo multiventana en una configuración de doble monitor o asegurarte de que tu IU se adapte correctamente cuando un usuario desconecta repentinamente una pantalla secundaria, Chrome sin interfaz gráfica y Puppeteer ahora te brindan todo lo que necesitas.

Prueba configuraciones de pantalla estáticas

Usa la configuración de pantalla estática a través del parámetro --screen-info para evaluar tu sitio web en un entorno de pantalla estática. A continuación, se incluye una lista de situaciones comunes:

Prueba el comportamiento con los parámetros --start-maximized y --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() y document.exitFullscreen() en varios tamaños de pantalla y en configuraciones de varias 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 escalamiento, las resoluciones y las pantallas de alta DPI.
Evalúa la apertura de ventanas o ventanas emergentes en pantallas principales y secundarias.

Configuración de doble pantalla

La siguiente secuencia de comandos de Puppeteer configura Chrome para que se ejecute en una configuración de doble pantalla con el parámetro --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 configuraciones de pantalla dinámicas

Configura de forma dinámica tu entorno de pantalla para probar cómo reacciona tu sitio web a 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. Estas situaciones se emulan con los CDP CDP como Emulation.addScreen y Emulation.removeScreen. Con estos comandos, puedes hacer lo siguiente:

Verifica que la conexión de un monitor nuevo permita que las páginas web abran ventanas y ventanas emergentes nuevas dentro del área de trabajo del monitor nuevo.
Asegúrate de que, cuando se desconecta un monitor mientras una página web está activa, el tamaño y la posición de la ventana se adapten correctamente a las pantallas restantes.

Abre y maximiza la ventana en una pantalla nueva

La siguiente secuencia de comandos de Puppeteer abre una ventana en la posición predeterminada en una pantalla de 800 x 600 y, luego, mueve y maximiza la ventana a 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 ejemplos de código en pptr.dev. Si tienes problemas, infórmanos a través del rastreador de errores público de Puppeteer en GitHub.

La funcionalidad de configuración de la pantalla sin interfaz gráfica está disponible en las versiones estables de Chrome a partir de la versión 142.

Configura pantallas virtuales en el modo sin encabezado Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.