Nous sommes heureux d'annoncer que le mode headless de Chrome (chrome --headless) et Headless Shell (chrome-headless-shell) utilisent désormais un écran virtuel headless entièrement configurable, indépendant des écrans physiques connectés au système sur lequel Chrome est exécuté. La configuration initiale de l'écran sans affichage peut être spécifiée à l'aide du commutateur de ligne de commande --screen-info.
Ce commutateur 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 est exécuté en mode headless, des écrans headless virtuels peuvent être ajoutés et supprimés à l'aide des commandes Chrome DevTools Protocol (CDP) Emulation.addScreen et Emulation.removeScreen.
Ces nouvelles fonctionnalités Headless Chrome sont entièrement compatibles avec Puppeteer. Elles vous permettent d'automatiser des scénarios d'affichage complexes et concrets qui étaient auparavant difficiles à tester. Que vous ayez besoin de vérifier qu'une application kiosque s'exécute en plein écran sur un écran 3K haute résolution, d'orchestrer des workflows multifenêtres sur une configuration à double écran ou de vous assurer que votre UI 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 d'écran statique via le commutateur --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 commutateurs
--start-maximizedet--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()etdocument.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 du commutateur --screen-info. L'écran principal 800x600 est configuré en orientation paysage, et l'écran secondaire 600x800, positionné directement à droite de l'écran principal, est en orientation 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 moniteurs, en reproduisant les actions des utilisateurs réels, comme la connexion d'un ordinateur portable à un moniteur de bureau. Ces scénarios sont émulés à l'aide des commandes CDP telles que Emulation.addScreen et Emulation.removeScreen. Ces commandes vous permettent d'effectuer les opérations suivantes :
- Vérifiez que la connexion d'un nouvel écran permet aux pages Web d'ouvrir de nouvelles fenêtres et des pop-ups dans l'espace de travail du nouvel écran.
- Assurez-vous que lorsqu'un écran 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éé. La fenêtre est ensuite restaurée 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
Plus de cas d'utilisation, d'exemples et de disponibilité
Retrouvez d'autres exemples de code sur pptr.dev. Si vous rencontrez des problèmes, faites-le nous savoir via le gestionnaire de bugs public de Puppeteer sur GitHub.
La fonctionnalité de configuration d'écran sans affichage est disponible dans les versions stables de Chrome à partir de la version 142.