Configurazione dello schermo per l'automazione e i test con Chrome Headless

Peter Kvitek

Siamo felici di annunciare che sia la modalità headless di Chrome (chrome --headless) sia Headless Shell (chrome-headless-shell) ora utilizzano uno schermo virtuale headless completamente configurabile e indipendente dai display fisici collegati al sistema su cui è in esecuzione Chrome. La configurazione iniziale dello schermo headless può essere specificata utilizzando l'opzione della riga di comando --screen-info. Questo interruttore definisce proprietà come origine, dimensioni, fattore di scala, orientamento e area di lavoro per ogni display.

Mentre Chrome è in esecuzione in modalità headless, è possibile aggiungere e rimuovere schermi virtuali headless utilizzando i comandi del protocollo Chrome DevTools (CDP) Emulation.addScreen e Emulation.removeScreen.

Queste nuove funzionalità di Chrome senza interfaccia grafica sono completamente supportate da Puppeteer, consentendoti di automatizzare scenari di visualizzazione complessi e reali che in precedenza erano difficili da testare. Che tu debba verificare un'applicazione kiosk in esecuzione a schermo intero su un display 3K ad alta risoluzione, orchestrare flussi di lavoro multi-finestra su una configurazione a doppio monitor o assicurarti che la tua UI si adatti correttamente quando un utente scollega improvvisamente uno schermo secondario, Headless Chrome e Puppeteer ora ti offrono tutto ciò di cui hai bisogno.

Testare le configurazioni dello schermo statico

Utilizza la configurazione dello schermo statico tramite l'opzione --screen-info per valutare il tuo sito web in un ambiente di schermo statico. Di seguito è riportato un elenco di scenari comuni:

Testa il comportamento con gli interruttori --start-maximized e --start-fullscreen, tenendo conto dell'area di lavoro e del fattore di scala dello schermo (ad es. modalità kiosk).
Valuta il comportamento di element.requestFullscreen() e document.exitFullscreen() in varie dimensioni dello schermo e in configurazioni multischermo.
Osserva il comportamento dello schermo diviso quando una finestra si estende su più schermi o viene spostata tra questi.
Verifica la gestione di diverse impostazioni di visualizzazione, tra cui scalabilità, risoluzioni e display DPI elevati.
Valuta l'apertura di finestre o popup sugli schermi principali e secondari.

Configurazione del doppio schermo

Il seguente script Puppeteer configura Chrome per l'esecuzione in una configurazione a doppio schermo utilizzando l'opzione --screen-info. Lo schermo principale 800x600 è configurato in orientamento orizzontale e lo schermo secondario 600x800, posizionato direttamente a destra dello schermo principale, è in orientamento verticale.

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

Output:

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

Testare le configurazioni dinamiche dello schermo

Configura dinamicamente l'ambiente dello schermo per testare la reazione del tuo sito web a connessioni o disconnessioni impreviste del monitor, rispecchiando le azioni degli utenti reali, ad esempio la connessione di un notebook a un monitor desktop. Questi scenari vengono emulati utilizzando i comandi CDP come Emulation.addScreen e Emulation.removeScreen. Con questi comandi, puoi:

Verifica che il collegamento di un nuovo monitor consenta alle pagine web di aprire nuove finestre e popup all'interno dell'area di lavoro del nuovo monitor.
Assicurati che quando un monitor viene scollegato mentre una pagina web è attiva, le dimensioni e la posizione della finestra si adattino correttamente ai display rimanenti.

Aprire e massimizzare la finestra su una nuova schermata

Il seguente script Puppeteer apre una finestra nella posizione predefinita su uno schermo 800x600, quindi sposta e ingrandisce la finestra in una schermata appena creata. Successivamente, la finestra viene riportata allo stato normale.

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

Output:

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

Altri casi d'uso, esempi e disponibilità

Trova altri esempi di codice su pptr.dev. Se riscontri problemi, comunicacelo tramite il bug tracker pubblico di Puppeteer su GitHub.

La funzionalità di configurazione dello schermo headless è disponibile nelle versioni stabili di Chrome a partire dalla versione 142.

Configurazione dello schermo per l'automazione e i test con Chrome Headless Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.