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