Puppeteer

Puppeteer는 Google의 Chrome 팀이 관리하는 오픈 소스 Node.js 라이브러리입니다. Chrome 또는 Chromium을 Chrome DevTools Protocol이나 WebDriver BiDi로 제어하며, Firefox도 제어할 수 있습니다. 기본적으로 헤드리스로 실행되므로 창을 띄우지 않고 페이지를 로드하고 렌더링합니다.

Puppeteer 스크립트는 브라우저를 실행하고 페이지를 열어 사용자와 같은 방식으로 작업합니다. 이동하고, 클릭하고, 입력하고, 콘텐츠를 기다립니다. 이 라이브러리는 스크린샷, PDF 생성, 스크래핑, 성능 점검, Chrome 기반 웹 앱의 자동화 테스트에 흔히 사용됩니다.

Puppeteer로 할 수 있는 작업

• Chrome, Chromium, Firefox를 실행하거나 실행 중인 브라우저에 연결
• 뷰포트, user agent, 위치 정보, 네트워크 조건 설정
• 클릭, 입력, 양식 제출, 선택자 또는 네트워크 유휴 상태 대기
• 광고, 이미지, 추적 도구를 차단하기 위해 요청 가로채기
• page.screenshot()으로 스크린샷, page.pdf()로 PDF 저장

스크린샷을 위한 Puppeteer

page.screenshot()은 PNG, JPEG, WebP 출력을 저장합니다. fullPage 옵션은 스크롤 가능한 문서 전체를 캡처하고, clip은 사각형 영역을, 요소 핸들은 요소 하나를 캡처합니다. page.setViewport()는 너비, 높이, deviceScaleFactor를 설정합니다. 이 값이 결과를 1배 해상도로 만들지 2배 해상도로 만들지 결정합니다.

page.pdf()는 스크린샷과 다릅니다. 브라우저의 인쇄 레이아웃과 인쇄용 CSS를 사용하므로 페이지가 여러 쪽으로 나뉘거나 일부 요소가 숨겨질 수 있습니다. page.screenshot()은 렌더링된 화면을 기록합니다.

Puppeteer와 Playwright 비교

Puppeteer는 Chrome을 중심으로 한 JavaScript 라이브러리입니다. Playwright는 Chromium, Firefox, WebKit을 지원하고 JavaScript, Python, Java, .NET용 바인딩과 내장 테스트 러너를 제공합니다. Puppeteer는 Chrome만 필요한 Node.js 프로젝트에 적합하고, Playwright는 Safari의 WebKit 엔진이나 다른 언어가 필요한 팀에 적합합니다.

자주 하는 실수

• 글꼴과 이미지가 로드되기 전에 탐색 직후 스크린샷을 찍음.
• page.pdf() 결과가 화면과 같을 것으로 기대함.
• 브라우저 인스턴스를 많이 동시에 실행해 메모리가 부족해짐.
• 브라우저를 닫지 않아 프로세스가 남아 있음.

같은 스크린샷을 반복해서 찍고 있나요?

Temposhot Website Capture는 관리되는 로컬 브라우저에서 URL 목록을 로드하고, URL마다 Viewport 또는 Full page 영역의 이미지 한 장을 저장합니다. 자세한 내용은 웹사이트 스크린샷 자동화를 참고하십시오.

자주 묻는 질문

Puppeteer는 Chrome 전용인가요?

Chrome이 주요 대상입니다. Puppeteer는 WebDriver BiDi를 통해 Firefox도 지원합니다.

Puppeteer로 Retina 스크린샷을 캡처할 수 있나요?

네. page.setViewport()에서 deviceScaleFactor를 2로 설정하면 픽셀 너비와 높이가 두 배가 됩니다.

Puppeteer는 코딩이 필요한가요?

네. Node.js에서 실행되는 JavaScript 또는 TypeScript 코드에서 사용하는 라이브러리입니다.

출처

• Puppeteer documentation
• Chrome DevTools Protocol

관련 자료

• Website Capture 빠른 시작: 코드 없이 여러 URL 캡처.
• Chrome 확장 프로그램: 현재 탭의 전체 페이지 PNG 한 장 저장.
• 스크린샷 이어 붙이기: 브라우저에서 캡처를 한 이미지로 연결.