Chrome 헤드리스 모드(chrome --headless) 및 이전 헤드리스 셸(chrome-headless-shell)은 Chrome이 실행되는 시스템에 연결된 실제 디스플레이와 독립적인 완전히 구성 가능한 가상 헤드리스 화면을 사용합니다. 초기 헤드리스 화면 구성은
--screen-info 명령줄 스위치를 사용하여 지정할 수 있습니다.
이 스위치는 각 디스플레이의 원점, 크기, 배율, 방향, 작업 영역과 같은 속성을 정의합니다.
Chrome이 헤드리스 모드로 실행되는 동안 가상 헤드리스 화면을 추가 하고 Chrome DevTools 프로토콜 (CDP) 명령어 Emulation.addScreen 및 Emulation.removeScreen을 사용하여 삭제할 수 있습니다.
이러한 새로운 헤드리스 Chrome 기능은 Puppeteer에서 완전히 지원되므로 이전에 테스트하기 어려웠던 복잡한 실제 디스플레이 시나리오를 자동화할 수 있습니다. 고해상도 3K 디스플레이에서 전체 화면으로 실행되는 키오스크 애플리케이션을 확인하거나, 듀얼 모니터 설정에서 멀티 윈도우 워크플로를 오케스트레이션하거나, 사용자가 보조 화면을 갑자기 연결 해제할 때 UI가 원활하게 조정되도록 해야 하는 경우 이제 헤드리스 Chrome과 Puppeteer를 사용할 수 있습니다.
정적 화면 구성 테스트
--screen-info 스위치를 통해 정적 화면 구성을 사용하여 정적 화면 환경 내에서 웹사이트를 평가합니다. 다음은 일반적인 시나리오 목록입니다.
- 화면 작업 영역 및 배율 (예: 키오스크 모드)을 고려하여
--start-maximized및--start-fullscreen스위치로 동작을 테스트합니다. - 다양한 화면 크기와 멀티스크린 구성에서
element.requestFullscreen()및document.exitFullscreen()동작을 평가합니다. - 창이 여러 화면에 걸쳐 있거나 화면 간에 이동할 때 화면 분할 동작을 관찰합니다.
- 배율, 해상도, 고DPI 디스플레이를 비롯한 다양한 디스플레이 설정의 처리를 확인합니다.
- 기본 화면과 보조 화면에서 창 또는 팝업 열기를 평가합니다.
듀얼 화면 구성
다음 Puppeteer 스크립트는
듀얼 화면 구성에서 실행되도록 Chrome을 구성합니다.--screen-info 기본 800x600 화면은 가로 방향으로 구성되고 기본 화면 바로 오른쪽에 있는 보조 600x800 화면은 세로 방향으로 구성됩니다.
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();
출력:
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
동적 화면 구성 테스트
화면 환경을 동적으로 구성하여 노트북을 데스크톱 모니터에 연결하는 것과 같은 실제 사용자 작업을 미러링하여 웹사이트가 예기치 않은 모니터 연결 또는 연결 해제에 어떻게 반응하는지 테스트합니다. 이러한 시나리오는 CDP 명령어 Emulation.addScreen 및 Emulation.removeScreen을 사용하여 에뮬레이션됩니다. 이러한 명령어를 사용하면 다음 작업을 할 수 있습니다.
- 새 모니터를 연결하면 웹페이지에서 새 모니터의 작업 영역 내에서 새 창과 팝업을 열 수 있는지 확인합니다.
- 웹페이지가 활성 상태인 동안 모니터가 연결 해제되면 창 크기와 위치가 나머지 디스플레이에 원활하게 조정되는지 확인합니다.
새 화면에서 창 열기 및 최대화
다음 Puppeteer 스크립트는 800x600 화면의 기본 위치에서 창을 연 다음 창을 새로 만든 화면으로 이동하고 최대화합니다. 그런 다음 창을 일반 상태로 복원합니다.
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();
출력:
20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal
추가 사용 사례, 예시, 가용성
pptr.dev에서 더 많은 코드 샘플을 확인하세요. 문제가 발생하면 GitHub의 Puppeteer 공개 버그 트래커를 통해 알려주세요.
헤드리스 화면 구성 기능은 버전 142부터 안정적인 Chrome 출시 버전에서 사용할 수 있습니다.