Z przyjemnością informujemy, że zarówno tryb bez interfejsu graficznego Chrome (chrome --headless), jak i powłoka bez interfejsu graficznego (chrome-headless-shell) korzystają teraz z w pełni konfigurowalnego wirtualnego ekranu bez interfejsu graficznego, który jest niezależny od fizycznych wyświetlaczy podłączonych do systemu, w którym działa Chrome. Początkową konfigurację ekranu bez monitora można określić za pomocą przełącznika wiersza poleceń --screen-info.
Ten przełącznik określa właściwości każdego wyświetlacza, takie jak pochodzenie, rozmiar, współczynnik skalowania, orientacja i obszar roboczy.
Gdy Chrome działa w trybie bez interfejsu, można dodawać i usuwać wirtualne ekrany bez interfejsu za pomocą poleceń protokołu narzędzi deweloperskich Chrome (CDP): Emulation.addScreen i Emulation.removeScreen.
Te nowe funkcje Chrome bez interfejsu są w pełni obsługiwane przez Puppeteer, co pozwala automatyzować złożone scenariusze wyświetlania w rzeczywistych warunkach, które wcześniej były trudne do przetestowania. Niezależnie od tego, czy musisz zweryfikować aplikację kiosku działającą na pełnym ekranie na wyświetlaczu 3K o wysokiej rozdzielczości, zorganizować przepływy pracy w wielu oknach na konfiguracji z 2 monitorami czy sprawdzić, czy interfejs użytkownika dostosowuje się prawidłowo, gdy użytkownik nagle odłączy drugi ekran, Headless Chrome i Puppeteer Ci w tym pomogą.
Testowanie statycznych konfiguracji ekranu
Użyj statycznej konfiguracji ekranu za pomocą przełącznika --screen-info, aby ocenić witrynę w statycznym środowisku ekranu. Poniżej znajdziesz listę typowych scenariuszy:
- Sprawdź działanie za pomocą przełączników
--start-maximizedi--start-fullscreen, biorąc pod uwagę obszar roboczy ekranu i współczynnik skalowania (np. w trybie kiosku). - Oceniaj działanie
element.requestFullscreen()idocument.exitFullscreen()na różnych ekranach i w konfiguracjach z wieloma ekranami. - Obserwuj zachowanie podzielonego ekranu, gdy okno obejmuje wiele ekranów lub jest przenoszone między nimi.
- Sprawdź obsługę różnych ustawień wyświetlania, w tym skalowania, rozdzielczości i wyświetlaczy o wysokiej rozdzielczości DPI.
- Oceniaj otwieranie okien lub wyskakujących okienek na ekranach głównym i dodatkowym.
Konfiguracja dwóch ekranów
Poniższy skrypt Puppeteer konfiguruje Chrome do działania w konfiguracji dwuekranowej za pomocą przełącznika --screen-info. Główny ekran o rozdzielczości 800 × 600 jest skonfigurowany w orientacji poziomej, a dodatkowy ekran o rozdzielczości 600 × 800, umieszczony bezpośrednio po prawej stronie głównego ekranu, 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 testować reakcję witryny na nieoczekiwane podłączenia lub odłączenia monitora, odzwierciedlając działania użytkowników w rzeczywistym świecie, takie jak podłączenie notebooka do monitora stacjonarnego. Te scenariusze są emulowane za pomocą poleceń CDP, takich jak Emulation.addScreen i Emulation.removeScreen. Za pomocą tych poleceń możesz:
- Sprawdź, czy po podłączeniu nowego monitora strony internetowe otwierają nowe okna i wyskakujące okienka w obszarze roboczym nowego monitora.
- Sprawdź, czy po odłączeniu monitora, gdy strona internetowa jest aktywna, rozmiar i położenie okna dostosowują się do pozostałych wyświetlaczy.
Otwieranie i maksymalizowanie okna na nowym ekranie
Poniższy skrypt Puppeteer otwiera okno w domyślnej pozycji na ekranie o rozdzielczości 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 informacji o dostępności
Więcej przykładów kodu znajdziesz na 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 monitora jest dostępna w stabilnych wersjach Chrome od wersji 142.