[Node] Puppeteer로 브라우저 제어하기 (스크린샷, 버튼클릭)

Puppeteer는 Chrome 팀이 개발한 Node 라이브러리이다. Puppeteer를 이용하면 Headless 혹은 Headful한 브라우저(크롬)을 제어할 수 있는 각종 API를 제공하며, 테스트에도 사용될 수 있다. 



이 블로그가 대략적인 내용을 이해하기에 쉬웠다.

Puppeteer 활용 브라우저 테스트 자동화

 

이곳은 공식 문서

Puppeteer | Puppeteer

 

 

 

1. 프로젝트를 만들고 puppeteer를 설치한다.

yarn add puppeteer

 

2. import 를 사용하기 위해서 package.json에서 "type": "module"을 추가해준다.

{
  "type": "module",
  "dependencies": {
    "puppeteer": "^20.3.0"
  }
}

 

3. examples.js라는 파일을 만들고 아래와 같이 적어준다. 문법은 https://developer.chrome.com/articles/new-headless/ 에서 나와있는 new headless (정확하게 무엇인지는 모르겠지마..)을 따랐다. 

 

버튼을 클릭하는가 클릭하지 않는가에 따라서 h2 태그로 작성한 글자 내용이 달라지게 만들어두었다. 각각 버튼을 클릭 후 0.5 초 이후의 스크린샷이 어떻게 달라지는 지를 확인할 수 있다.

//examples.js
import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  // `headless: true` (default) enables old Headless;
  // `headless: 'new'` enables new Headless;
  // `headless: false` enables “headful” mode.
});

const page = await browser.newPage();
await page.goto('http://localhost:3000/puppeteer');
await page.screenshot({ path: '/Users/../puppeteer/1.webp' ,  fullPage: true });
 
await page.click('button[id="firstButton"]');
await new Promise(r => setTimeout(r, 500));
await page.screenshot({ path: '/Users/../puppeteer/2.webp' ,  fullPage: true });

await page.click('button[id="secondButton"]');
await new Promise(r => setTimeout(r, 500));
await page.screenshot({ path: '/Users/../3.webp' ,  fullPage: true });

// …

await browser.close();

 

4. examples.js 파일을 노드로 실행시킨다. 

node examples.js