Puppeteer 란?
puppeteer는 구글에서 만든 노드 라이브러리로 Headless Chrome 또는 Chrominum을 제어할 수 있다.
headless란?
백그라운드에서 작동하는 브라우저로 실제 화면을 출력하지 않지만, 브라우저에서 테스트를 실제로 하듯이 테스트를 할 수 있다.
puppeteer에서는 옵션 설청을 통해 headless모드와 non-headless모드로 선택해서 사용할 수 있다.
const browser = await puppeteer.launch({headless:false});
puppeteer의 장점
- 화면을 스크린샷하거나 PDF로 생성할 수 있다.
- SPA(Single-Page Application)을 크롤링하여 사전에 콘텐츠를 랜더링 할 수 있다.
(ssr:https://d2.naver.com/helloworld/7804182) - 자동화된 UI테스트 실행 : Form을 submit, input을 입력
- 최신 버전의 크롬에서 자동화된 테스트 환경을 만들 수 있다.
- timeline trace를 통해 퍼포먼스 이슈를 진달 할 수 있다.
(https://developer.chrome.com/docs/devtools/performance/reference/)
백그라운드에서 실행되는 크롬 브라우저 + CDP (Chrome Devtool Protocol)가 베이스로 깔려있어 강력한 UI 테스트 도구로 볼 수 있다. 그리고 puppeteer가 제공하는 API를 통해 우리는 자동화 테스트 스크립트를 작성할 수 있다.
DevTools Protocold을 사용하여 브라우저를 컨트롤한다
Browser 인스턴스는 다수의 browser context를 가질 수 있다.
BrowserContext 인스턴스는 브라우저의 세션을 규정하며 다수의 page를 가질 수 있다.
page는 최소 하나의 Frame을 가지고 있다. 추가적으로 iframe이나 frame태그를 통해 다른 frame들을 가질 수 있다.
frame은 최소 하나의 ExecutionContext를 가지고 있어야한다. 여기서 Frame의 자바스크립트가 실행된다.
Worker는 하나의 ExecutionContext를 가지고 있으며 WebWorkers와 인터렉트 한다.
npm init => npm install puppeteer
yarn init => yarn add puppeteer
puppeteer의 자세한 내용은 아래 래퍼런스를 참고하자.
래퍼런스:https://kkangdda.tistory.com/112
