Wir freuen uns, Ihnen mitteilen zu können, dass sowohl der monitorlose Modus von Chrome (chrome --headless) als auch die Headless Shell (chrome-headless-shell) jetzt einen vollständig konfigurierbaren virtuellen monitorlosen Bildschirm verwenden, der unabhängig von physischen Displays ist, die an das System angeschlossen sind, auf dem Chrome ausgeführt wird. Die anfängliche Konfiguration des Headless-Bildschirms kann mit dem Befehlszeilenschalter --screen-info angegeben werden.
Mit diesem Schalter werden Eigenschaften wie Ursprung, Größe, Skalierungsfaktor, Ausrichtung und Arbeitsbereich für jeden Bildschirm definiert.
Während Chrome im Headless-Modus ausgeführt wird, können virtuelle Headless-Bildschirme mit Chrome DevTools Protocol-Befehlen (CDP) Emulation.addScreen und Emulation.removeScreen hinzugefügt und entfernt werden.
Diese neuen Headless Chrome-Funktionen werden vollständig von Puppeteer unterstützt. So können Sie komplexe, realistische Anzeigeszenarien automatisieren, die bisher schwer zu testen waren. Ob Sie eine Kiosk-Anwendung überprüfen müssen, die im Vollbildmodus auf einem hochauflösenden 3K-Display ausgeführt wird, Multi-Window-Workflows auf einem Dual-Monitor-Setup orchestrieren oder dafür sorgen müssen, dass sich Ihre Benutzeroberfläche anpasst, wenn ein Nutzer plötzlich einen sekundären Bildschirm trennt – Headless Chrome und Puppeteer sind jetzt für Sie da.
Statische Bildschirmkonfigurationen testen
Verwenden Sie die statische Bildschirmkonfiguration über den Schalter --screen-info, um Ihre Website in einer statischen Bildschirmumgebung zu testen. Im Folgenden finden Sie eine Liste mit häufigen Szenarien:
- Testen Sie das Verhalten mit den Schaltern
--start-maximizedund--start-fullscreenund berücksichtigen Sie dabei den Arbeitsbereich des Bildschirms und den Skalierungsfaktor (z.B. im Kioskmodus). - Bewerten Sie das Verhalten von
element.requestFullscreen()unddocument.exitFullscreen()bei verschiedenen Bildschirmgrößen und in Multiscreen-Konfigurationen. - Beobachten Sie das Verhalten im Splitscreen-Modus, wenn sich ein Fenster über mehrere Bildschirme erstreckt oder zwischen ihnen verschoben wird.
- Prüfen Sie, wie verschiedene Anzeigeeinstellungen gehandhabt werden, z. B. Skalierung, Auflösungen und High-DPI-Displays.
- Bewerten Sie das Öffnen von Fenstern oder Pop-ups auf primären und sekundären Bildschirmen.
Dual Screen-Konfiguration
Das folgende Puppeteer-Skript konfiguriert Chrome so, dass es mit dem Schalter --screen-info in einer Dual-Screen-Konfiguration ausgeführt wird. Der primäre Bildschirm mit 800 × 600 Pixeln ist im Querformat konfiguriert. Der sekundäre Bildschirm mit 600 × 800 Pixeln befindet sich direkt rechts neben dem primären Bildschirm und ist im Hochformat konfiguriert.
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();
Ausgabe:
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
Dynamische Bildschirmkonfigurationen testen
Konfigurieren Sie Ihre Bildschirmumgebung dynamisch, um zu testen, wie Ihre Website auf unerwartete Monitorverbindungen oder ‑trennungen reagiert. So können Sie Nutzeraktionen wie das Anschließen eines Notebooks an einen Desktopmonitor simulieren. Diese Szenarien werden mit CDP-Befehlen wie Emulation.addScreen und Emulation.removeScreen emuliert. Mit diesen Befehlen haben Sie folgende Möglichkeiten:
- Prüfen Sie, ob beim Anschließen eines neuen Monitors Webseiten neue Fenster und Pop-ups im Arbeitsbereich des neuen Monitors öffnen können.
- Wenn ein Monitor getrennt wird, während eine Webseite aktiv ist, sollten sich Fenstergröße und -position an die verbleibenden Displays anpassen.
Fenster auf einem neuen Bildschirm öffnen und maximieren
Das folgende Puppeteer-Script öffnet ein Fenster an der Standardposition auf einem 800 × 600-Bildschirm, verschiebt und maximiert das Fenster dann auf einem neu erstellten Bildschirm. Anschließend wird das Fenster wieder in den Normalzustand zurückgesetzt.
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();
Ausgabe:
20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal
Weitere Anwendungsfälle, Beispiele und Verfügbarkeit
Weitere Codebeispiele finden Sie auf pptr.dev. Wenn Sie Probleme haben, teilen Sie uns dies über den öffentlichen Bugtracker von Puppeteer auf GitHub mit.
Die Funktion zur Konfiguration monitorloser Bildschirme ist in stabilen Chrome-Versionen ab Version 142 verfügbar.