Konfigurowanie ekranów wirtualnych w trybie bez monitora

Peter Kvitek

Tryb bez interfejsu graficznego w Chrome (chrome --headless) (oraz stara wersja Headless Shell (chrome-headless-shell)) korzysta z w pełni konfigurowalnego wirtualnego ekranu bez interfejsu graficznego, który jest niezależny od fizycznych wyświetlaczy podłączonych do systemu, na którym działa Chrome. Początkową konfigurację ekranu bez interfejsu graficznego można określić za pomocą przełącznika wiersza poleceń `--screen-info`. Ten przełącznik definiuje właściwości takie jak źródło, rozmiar, współczynnik skalowania, orientacja i obszar roboczy każdego wyświetlacza.

Gdy Chrome działa w trybie bez interfejsu graficznego, wirtualne ekrany bez interfejsu graficznego można dodawać i usuwać za pomocą protokołu narzędzi deweloperskich w Chrome (CDP) poleceń Emulation.addScreen i Emulation.removeScreen.

Te nowe możliwości Chrome bez interfejsu graficznego są w pełni obsługiwane przez Puppeteer, co pozwala zautomatyzować złożone scenariusze wyświetlania w rzeczywistych warunkach, które wcześniej były trudne do przetestowania. Niezależnie od tego, czy musisz sprawdzić, czy aplikacja kiosku działa na pełnym ekranie na wyświetlaczu 3K o wysokiej rozdzielczości, czy chcesz zorganizować przepływy pracy z wieloma oknami na konfiguracji z 2 monitorami, czy też chcesz mieć pewność, że interfejs użytkownika dostosowuje się płynnie, gdy użytkownik nagle odłączy ekran dodatkowy, Chrome bez interfejsu graficznego i Puppeteer zapewniają Ci wszystko, czego potrzebujesz.

Testowanie statycznych konfiguracji ekranu

Aby ocenić witrynę w statycznym środowisku ekranu, użyj statycznej konfiguracji ekranu za pomocą przełącznika --screen-info. Oto lista typowych scenariuszy:

• Testowanie zachowania za pomocą przełączników --start-maximized i --start-fullscreen z uwzględnieniem obszaru roboczego ekranu i współczynnika skalowania (np. trybu kiosku).
• Ocena zachowania element.requestFullscreen() i document.exitFullscreen() na ekranach o różnych rozmiarach i w konfiguracjach z wieloma ekranami.
• Obserwowanie zachowania w trybie podzielonego ekranu, gdy okno obejmuje wiele ekranów lub jest przenoszone między nimi.
• Sprawdzanie obsługi różnych ustawień wyświetlania, w tym skalowania, rozdzielczości i wyświetlaczy o wysokiej rozdzielczości.
• Ocena otwierania okien lub wyskakujących okienek na ekranach głównych i dodatkowych.

Konfiguracja 2 ekranów

Poniższy skrypt Puppeteer konfiguruje Chrome do działania w konfiguracji z 2 ekranami za pomocą przełącznika --screen-info. Ekran główny o wymiarach 800 x 600 jest skonfigurowany w orientacji poziomej, a ekran dodatkowy o wymiarach 600 x 800, umieszczony bezpośrednio po prawej stronie ekranu głównego, jest w orientacji pionowej.

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

Dane wyjściowe:

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

Testowanie dynamicznych konfiguracji ekranu

Dynamicznie konfiguruj środowisko ekranu, aby sprawdzić, jak witryna reaguje na nieoczekiwane podłączenie lub odłączenie monitora, odzwierciedlając rzeczywiste działania użytkownika, takie jak podłączenie notebooka do monitora. Te scenariusze są emulowane za pomocą CDP poleceń, takich jak Emulation.addScreen i Emulation.removeScreen. Za pomocą tych poleceń możesz wykonać te czynności:

• Sprawdź, czy podłączenie nowego monitora umożliwia otwieranie nowych okien i wyskakujących okienek na stronach internetowych w obszarze roboczym nowego monitora.
• Upewnij się, że gdy monitor zostanie odłączony, gdy strona internetowa jest aktywna, rozmiar i położenie okna dostosowują się płynnie do pozostałych wyświetlaczy.

Otwieranie i maksymalizowanie okna na nowym ekranie

Poniższy skrypt Puppeteer otwiera okno w domyślnym położeniu na ekranie o wymiarach 800 x 600, a następnie przenosi i maksymalizuje okno na nowo utworzonym ekranie. Następnie przywraca okno do normalnego stanu.

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

Dane wyjściowe:

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

Więcej przypadków użycia, przykładów i dostępności

Więcej próbek kodu znajdziesz na stronie pptr.dev. Jeśli napotkasz problemy, poinformuj nas o tym za pomocą publicznego narzędzia do śledzenia błędów Puppeteer na GitHubie.

Funkcja konfiguracji ekranu bez interfejsu graficznego jest dostępna w stabilnych wersjach Chrome od wersji 142.