La modalità headless di Chrome (chrome --headless) (e la vecchia shell headless (chrome-headless-shell)) utilizzano uno schermo headless virtuale completamente configurabile, 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 command line switch.
Questa opzione definisce proprietà come origine, dimensioni, fattore di scalabilità, orientamento e area di lavoro per ogni display.
Mentre Chrome è in esecuzione in modalità headless, è possibile aggiungere e rimuovere schermi headless virtuali utilizzando Chrome DevTools Protocol (CDP) comandi Emulation.addScreen e Emulation.removeScreen.
Queste nuove funzionalità di Chrome headless sono completamente supportate da Puppeteer, il che ti consente di automatizzare scenari di visualizzazione complessi e reali che in precedenza erano difficili da testare. Se devi verificare un'applicazione kiosk in esecuzione a schermo intero su un display 3K ad alta risoluzione, orchestrare flussi di lavoro multi-finestra in una configurazione a doppio monitor o assicurarti che l'interfaccia utente si adatti correttamente quando un utente scollega improvvisamente uno schermo secondario, Chrome headless e Puppeteer sono ora a tua disposizione.
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 le opzioni
--start-maximizede--start-fullscreen, tenendo conto dell'area di lavoro dello schermo e del fattore di scalabilità (ad es. modalità kiosk). - Valuta il comportamento di
element.requestFullscreen()edocument.exitFullscreen()su varie dimensioni dello schermo e in configurazioni multi-schermo. - Osserva il comportamento dello schermo diviso quando una finestra si estende su più schermi o viene spostata tra di essi.
- Verifica la gestione di diverse impostazioni di visualizzazione, tra cui scalabilità, risoluzioni e display ad alta risoluzione.
- Valuta l'apertura di finestre o popup sugli schermi primari e secondari.
Configurazione a doppio schermo
Il seguente script Puppeteer configura Chrome per l'esecuzione in
una configurazione a doppio schermo utilizzando l'opzione --screen-info. Lo schermo primario 800x600 è configurato in orientamento orizzontale e lo schermo secondario 600x800, posizionato direttamente a destra dello schermo primario, è 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 dello schermo dinamico
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 il collegamento di un notebook a un monitor desktop. Questi scenari vengono emulati utilizzando CDP come Emulation.addScreen ed Emulation.removeScreen. Con questi comandi puoi:
- Verificare che il collegamento di un nuovo monitor consenta alle pagine web di aprire nuove finestre e popup nell'area di lavoro del nuovo monitor.
- Assicurarti 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 un nuovo schermo
Il seguente script Puppeteer apre una finestra nella posizione predefinita su uno schermo 800x600, quindi sposta e massimizza la finestra su uno schermo appena creato. Poi ripristina la finestra 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 tracker di bug pubblico di Puppeteer su GitHub.
La funzionalità di configurazione dello schermo headless è disponibile nelle release stabili di Chrome a partire dalla versione 142.