Deze pagina is vertaald door de Cloud Translation API.

Schermconfiguratie voor automatisering en testen met Chrome Headless

Peter Kvitek

We zijn blij te kunnen aankondigen dat zowel Chrome Headless Mode ( chrome --headless ) als Headless Shell ( chrome-headless-shell ) nu gebruikmaken van een volledig configureerbaar virtueel scherm zonder scherm, dat onafhankelijk is van de fysieke beeldschermen die op het systeem zijn aangesloten waarop Chrome draait. De initiële configuratie van het scherm zonder scherm kan worden opgegeven met de opdrachtregeloptie --screen-info. Deze optie definieert eigenschappen zoals oorsprong, grootte, schaalfactor, oriëntatie en werkgebied voor elk scherm.

Wanneer Chrome in headless-modus draait, kunnen virtuele headless-schermen worden toegevoegd en verwijderd met behulp van de Chrome DevTools Protocol (CDP)-opdrachten Emulation.addScreen en Emulation.removeScreen .

Deze nieuwe Headless Chrome-mogelijkheden worden volledig ondersteund door Puppeteer, waardoor u complexe, realistische weergavescenario's kunt automatiseren die voorheen moeilijk te testen waren. Of u nu een kiosktoepassing in volledig scherm op een 3K-scherm met hoge resolutie wilt verifiëren, workflows met meerdere vensters wilt coördineren over een configuratie met twee monitoren, of ervoor wilt zorgen dat uw gebruikersinterface zich soepel aanpast wanneer een gebruiker plotseling een tweede scherm loskoppelt, Headless Chrome en Puppeteer bieden nu de oplossing.

Test statische schermconfiguraties

Gebruik de statische schermconfiguratie met de schakelaar --screen-info om uw website in een statische schermomgeving te evalueren. Hieronder vindt u een lijst met veelvoorkomende scenario's:

Test het gedrag met de schakelaars --start-maximized en --start-fullscreen , rekening houdend met het werkgebied van het scherm en de schaalfactor (bijv. kioskmodus).
Evalueer het gedrag element.requestFullscreen() en document.exitFullscreen() bij verschillende schermformaten en in configuraties met meerdere schermen.
Observeer het gedrag van de gesplitste schermweergave wanneer een venster zich over meerdere schermen uitstrekt of tussen schermen wordt verplaatst.
Controleer de verwerking van diverse weergave-instellingen, waaronder schaling, resoluties en schermen met een hoge DPI.
Beoordeel het openen van vensters of pop-ups op het primaire en secundaire scherm.

Configuratie met dubbel scherm

Het volgende Puppeteer- script configureert Chrome voor gebruik met twee schermen met behulp van de schakelaar --screen-info . Het primaire scherm van 800x600 pixels is ingesteld op liggend formaat en het secundaire scherm van 600x800 pixels, direct rechts van het primaire scherm, is ingesteld op staand formaat.

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

Uitvoer :

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

Test dynamische schermconfiguraties

Configureer uw schermomgeving dynamisch om te testen hoe uw website reageert op onverwachte monitorverbindingen of -ontkoppelingen. Dit simuleert gebruikersacties in de praktijk, zoals het aansluiten van een laptop op een desktopmonitor. Deze scenario's worden gesimuleerd met behulp van CDP- opdrachten zoals Emulation.addScreen en Emulation.removeScreen . Met deze opdrachten kunt u het volgende doen:

Controleer of het aansluiten van een nieuwe monitor ervoor zorgt dat webpagina's in nieuwe vensters en pop-ups worden geopend binnen het werkgebied van de nieuwe monitor.
Zorg ervoor dat wanneer een monitor wordt losgekoppeld terwijl een webpagina actief is, de venstergrootte en -positie zich soepel aanpassen aan de overige schermen.

Open en maximaliseer het venster op een nieuw scherm.

Het volgende Puppeteer- script opent een venster op de standaardpositie op een scherm van 800x600 pixels, verplaatst het venster vervolgens naar een nieuw scherm en maximaliseert het dit. Daarna wordt het venster teruggezet naar de normale staat.

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

Uitvoer :

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

Meer gebruiksscenario's, voorbeelden en beschikbaarheid

Meer codevoorbeelden vind je op pptr.dev . Als je problemen ondervindt, laat het ons dan weten via de openbare bugtracker van Puppeteer op GitHub .

De functionaliteit voor schermconfiguratie zonder grafische interface is beschikbaar in stabiele Chrome-releases vanaf versie 142.

Schermconfiguratie voor automatisering en testen met Chrome Headless Stay organized with collections Save and categorize content based on your preferences.