Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Virtuelle Bildschirme im Headless-Modus konfigurieren

Peter Kvitek

Im monitorlosen Modus von Chrome (chrome --headless) und in der alten monitorlosen Shell (chrome-headless-shell) wird ein vollständig konfigurierbarer virtueller monitorloser Bildschirm verwendet, der unabhängig von den physischen Displays ist, die an das System angeschlossen sind, auf dem Chrome ausgeführt wird. Die anfängliche Konfiguration des monitorlosen Bildschirms kann mit dem Befehlszeilenschalter `--screen-info` angegeben werden. Mit diesem Schalter werden Eigenschaften wie Ursprung, Größe, Skalierungsfaktor, Ausrichtung und Arbeitsbereich für jedes Display definiert.

Während Chrome im monitorlosen Modus ausgeführt wird, können virtuelle monitorlose Bildschirme mit den Chrome DevTools Protocol-Befehlen (CDP) Emulation.addScreen und Emulation.removeScreen hinzugefügt und entfernt werden.

Diese neuen Funktionen von Headless Chrome werden von Puppeteer vollständig unterstützt. So können Sie komplexe, realistische Displayszenarien 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 sicherstellen möchten, dass sich Ihre UI reibungslos anpasst, wenn ein Nutzer plötzlich einen sekundären Bildschirm trennt – Headless Chrome und Puppeteer sind 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 häufiger Szenarien:

Testen Sie das Verhalten mit den Schaltern --start-maximized und --start-fullscreen unter Berücksichtigung des Arbeitsbereichs und des Skalierungsfaktors des Bildschirms (z.B. Kioskmodus).
Testen Sie das Verhalten von element.requestFullscreen() und document.exitFullscreen() bei verschiedenen Bildschirmgrößen und in Konfigurationen mit mehreren Bildschirmen.
Beobachten Sie das Verhalten im Splitscreen-Modus, wenn sich ein Fenster über mehrere Bildschirme erstreckt oder zwischen ihnen verschoben wird.
Prüfen Sie die Verarbeitung verschiedener Displayeinstellungen, einschließlich Skalierung, Auflösung und Displays mit hoher DPI.
Testen Sie das Öffnen von Fenstern oder Pop-ups auf primären und sekundären Bildschirmen.

Dual-Screen-Konfiguration

Mit dem folgenden Puppeteer-Skript wird Chrome so konfiguriert, dass es in einer Dual-Screen-Konfiguration mit dem --screen-info Schalter ausgeführt wird. Der primäre Bildschirm mit 800 × 600 Pixeln ist im Querformat konfiguriert und der sekundäre Bildschirm mit 600 × 800 Pixeln, der sich direkt rechts neben dem primären Bildschirm befindet, ist im Hochformat.

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 reale Nutzeraktionen wie das Verbinden eines Notebooks mit einem Desktop-Monitor simulieren. Diese Szenarien werden mit CDP Befehlen wie Emulation.addScreen und Emulation.removeScreen emuliert. Mit diesen Befehlen können Sie Folgendes tun:

Prüfen Sie, ob beim Anschließen eines neuen Monitors neue Fenster und Pop-ups auf Webseiten im Arbeitsbereich des neuen Monitors geöffnet werden können.
Achten Sie darauf, dass sich die Fenstergröße und -position reibungslos an die verbleibenden Displays anpassen, wenn ein Monitor getrennt wird, während eine Webseite aktiv ist.

Fenster auf einem neuen Bildschirm öffnen und maximieren

Mit dem folgenden Puppeteer-Skript wird ein Fenster an der Standardposition auf einem Bildschirm mit 800 × 600 Pixeln geöffnet. Anschließend wird das Fenster auf einen neu erstellten Bildschirm verschoben und maximiert. Danach wird das Fenster wieder in den Normalzustand versetzt.

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 unter pptr.dev. Wenn Sie Probleme haben, teilen Sie uns dies über den öffentlichen Bugtracker von Puppeteer auf GitHub mit.

Die Funktion zur Konfiguration des monitorlosen Bildschirms ist in stabilen Chrome-Versionen ab Version 142 verfügbar.

Virtuelle Bildschirme im Headless-Modus konfigurieren Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.