puppeteer란?
구글에서 만든 노드 라이브러리로 Headless Chrime 또는 Chrominum을 제어할 수 있다.
백그라운드에서 실행되는 크롬 브라우저 + CDP(Chrome Devtool Protocol)이 베이스로 깔려있어 강력한 UI 테스트 도구로 볼 수 있다.
headless?
백그라운드에서(CLI) 작동하는 브라우저
때문에 일반 사용자가 브라우저를 사용할 때처럼 화면이 시각적으로 보이지 않는다.
보이는 화면은 없지만,일반적인 브라우저와 같이 웹페이지에 접속하여 HTML, CSS 으로 DOM Tree 와 CSSOM Tree 를 만들고, JS 엔진을 구동한다.
puppeteer에서는 옵션 설정을 통해 headless 모드와 non-headless 모드 둘다 사용할 수 있다.
const browser = await puppetter.launch({headless: false}) // default = true유일한 차이점은 만든 화면을 사용자에게 보여주지 않는다는 점이다.
일반 브라우저와 큰 차이가 없기 때문에 보여주는 화면이 없이도, 화면 테스트나 스크린샷을 찍는 것 등 다양한 기능 동작이 가능하며, 사용자가 실제 사용하는 환경과 비슷하게 테스트가 가능하다.
puppetter 기능
- 화면을 스크린샷하거나 pdf를 생성할 수 있다. (현재 프로젝트 내에서 하고있는 작업)
- SPA를 크롤링해서 사전에 콘텐츠를 랜더링할 수 있다.
- 자동화 된 UI 테스트 실행: Form을 submit, input 입력 등등
- 최신 버전의 크롬에서 자동화된 테스트 환경을 만들 수 있다.
- timeline trace를 통해 퍼포먼스 이슈를 진단할 수 있다.
- 크롬 확장 프로그램을 테스트할 수 있다.
<구조>
Puppteer API는 계층적인 구조로 구성되어 있고, 실제 브라우저 구성 요소처럼 되어있다.
- Puppeteer는 크롬 Devtools protocol을 사용해 브라우저를 컨트롤한다.
- Browser 인스턴스는 다수의 browser context를 가질 수 있다.
- BrowserContext 인스턴스는 브라우저의 세션을 규정하며 다수의 Page를 가질 수 있다.
- Page는 최소 하나의 Frame을 가지고 있어야 한다. (= 메인 Frame)
- 추가적으로 iframe이나 frame 태그를 통해 다른 Frame들을 가질 수 있다. - Frame은 최소 하나의 ExecutionContext를 가지고 있어야 한다. 여기서 Frame의 자바스크립트가 실행된다.
- Worker는 하나의 ExecutionContext를 가지고 있으며 WebWorkers와 인터렉트 한다.
예제
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();https://example.com로 이동하여 스크린샷을 example.png로 저장하는 코드
대부분의 메소드들은 Promise를 반환한다.
puppeteer.lanch(): browser 생성
- headless: 기본값은 true, false로 설정하면 브라우저가 실행
- defaultViewport: 기본값은 800X600이고 화면이 노출될 사이즈를 지정
- devtools: 기본값은 false고, false로 설정하면 브라우저에 Devtools가 열림
browser.newPage(): 새로운 페이지를 생성, 생성된 페이지로 실제 페이지를 조작 및 제어
page.goto(): 페이지 이동
page.screenshot(): 페이지의 스크린샷을 찍어 특정 path에 저장
이외 브라우저 공식문서 참고하기
https://pptr.dev/api/puppeteer.browser
