Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Configurer des écrans virtuels en mode Headless

Peter Kvitek

Le mode headless de Chrome (chrome --headless) (et l'ancienne interface headless (chrome-headless-shell)) utilisent un écran headless virtuel entièrement configurable, indépendant des écrans physiques connectés au système sur lequel Chrome s'exécute. La configuration initiale de l'écran headless peut être spécifiée à l'aide de l'option de ligne de commande --screen-info command line switch. Cette option définit des propriétés telles que l'origine, la taille, le facteur d'échelle, l'orientation et la zone de travail pour chaque écran.

Lorsque Chrome s'exécute en mode headless, des écrans headless virtuels peuvent être ajoutés et supprimés à l'aide des commandes Emulation.addScreen et Emulation.removeScreen du protocole Chrome DevTools (CDP).

Ces nouvelles fonctionnalités de Headless Chrome sont entièrement compatibles avec Puppeteer, ce qui vous permet d'automatiser des scénarios d'affichage complexes et réels qui étaient auparavant difficiles à tester. Que vous ayez besoin de vérifier qu'une application de kiosque s'exécute en plein écran sur un écran 3K haute résolution, d'orchestrer des workflows en mode multifenêtre sur une configuration à double écran ou de vous assurer que votre interface utilisateur s'adapte correctement lorsqu'un utilisateur déconnecte soudainement un écran secondaire, Headless Chrome et Puppeteer sont désormais là pour vous aider.

Tester les configurations d'écran statiques

Utilisez la configuration de l'écran statique via l'option --screen-info pour évaluer votre site Web dans un environnement d'écran statique. Voici une liste de scénarios courants :

Testez le comportement avec les options --start-maximized et --start-fullscreen, en tenant compte de la zone de travail de l'écran et du facteur d'échelle (par exemple, le mode Kiosque).
Évaluez le comportement de element.requestFullscreen() et document.exitFullscreen() sur différentes tailles d'écran et dans des configurations multi-écrans.
Observez le comportement de l'écran partagé lorsqu'une fenêtre s'étend sur plusieurs écrans ou est déplacée entre eux.
Vérifiez la gestion de divers paramètres d'affichage, y compris la mise à l'échelle, les résolutions et les écrans à haute résolution.
Évaluez l'ouverture de fenêtres ou de pop-ups sur les écrans principal et secondaire.

Configuration à double écran

Le script Puppeteer suivant configure Chrome pour qu'il s'exécute dans une configuration à double écran à l'aide de l'option --screen-info. L'écran principal de 800 x 600 est configuré en mode paysage, et l'écran secondaire de 600 x 800, placé directement à droite de l'écran principal, est en mode portrait.

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

Résultat :

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

Tester les configurations d'écran dynamiques

Configurez dynamiquement votre environnement d'écran pour tester la réaction de votre site Web aux connexions ou déconnexions inattendues de moniteur, en simulant des actions utilisateur réelles, comme la connexion d'un ordinateur portable à un moniteur de bureau. Ces scénarios sont émulés à l'aide des CDP comme Emulation.addScreen et Emulation.removeScreen. Ces commandes vous permettent d'effectuer les opérations suivantes :

Vérifiez que la connexion d'un nouveau moniteur permet aux pages Web d'ouvrir de nouvelles fenêtres et des pop-ups dans la zone de travail du nouveau moniteur.
Assurez-vous que lorsqu'un moniteur est déconnecté alors qu'une page Web est active, la taille et la position de sa fenêtre s'adaptent correctement aux écrans restants.

Ouvrir et agrandir la fenêtre sur un nouvel écran

Le script Puppeteer suivant ouvre une fenêtre à la position par défaut sur un écran de 800 x 600, puis déplace et agrandit la fenêtre sur un écran nouvellement créé. Il restaure ensuite la fenêtre dans son état normal.

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

Résultat :

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

Autres cas d'utilisation, exemples et disponibilité

Vous trouverez d'autres exemples de code sur pptr.dev. Si vous rencontrez des problèmes, faites-le nous savoir via l'outil public de suivi des bugs de Puppeteer sur GitHub.

La fonctionnalité de configuration de l'écran headless est disponible dans les versions stables de Chrome à partir de la version 142.

Configurer des écrans virtuels en mode Headless Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.