알찬정보 툰코 개발 트렌드 이슈 코딩

Puppeteer란, 크롬 DevTools 프로토콜을 이용하여 Chrome 및 Chromium을 자유롭게 컨트롤할 수 있게 해주는 웹크롤링 Node.js 라이브러리입니다. (Chromium은 오픈소스 코어 웹 브라우저로 크롬 등 다양한 브라우저들이 Chromium을 기초해서 개발되었습니다.)

 Puppeteer(퍼펫 티어)는 Selenium 같은 다른 툴과는 다르게 기본적으로 Headless 브라우저에서 동작을 하는데, Headless 브라우저는 사용자에게 보이는 디스플레이 및 UI 기능을 제거하고 백 단에서 동작하는 브라우저로 더 적은 리소스로 더 빠르게 동작할 수 있게 해 줍니다. (물론 일반 브라우저에서도 동작이 가능합니다.)

 Puppeteer는 Google 크롬팀에서 개발되었고, 사용자가 하는 크롬의 거의 모든 기능을 코드로 구현이 가능하게 하여 웹크롤링 및 UI/UX 자동화 테스트 등을 가능하게 해 줍니다. 단 Chrome 및 Chromium을 제외한 다른 브라우저에서는 동작이 불가능합니다.

1. Puppeteer 설치

먼저 Node.js 및 VS Code가 세팅이 되어 있어야 합니다.

VS Code 하단의 터미널 창에서 아래와 같이 명령어를 쳐서 puppeteer-core 라이브러리를 설치합니다.

(VS Code 터미널창 실행은 [Ctrl + `] 단축키 또는 상단 메뉴 [View > Terminal]입니다.)

npm i puppeteer-core

2. Puppeteer 샘플 예제 – 스크린샷

Puppeteer는 브라우저에서 할 수 있는 수많은 기능들을 여러 API로 제공을 하고 있는데요, 해당 내용은 공식 페이지인 https://pptr.dev/에서 (영어이긴 하지만..) 상세히 확인하실 수 있습니다.

공식 페이지에 나와 있는 예제 중 스크린샷 예제를 먼저 구현해 보겠습니다. 아주 간단한 예제인데, 아래의 코드를 index.js 파일에 작성해 줍니다. puppeteer는 동기식으로 작성을 하게 되면 꼬이는 케이스가 많기 때문에 아래와 같이 비동기식으로 async/await를 이용하여 작성해줍니다.

간단하게 puppeteer는 launch를 통해 브라우저를 정의하고 newPage를 통해 신규 페이지를 오픈하고, goto 명령을 통해 페이지로 이동을 해서 screenshot 명령을 통해 스크린샷을 저장하는 식으로 실제 사람이 수행하는 것처럼 동작을 합니다. launch를 할 때 여러 옵션을 정의할 수 있는 아래 사용된 옵션은 아래와 같습니다.

•  executablePath : puppeteer-core를 설치를 하였다면, 설치되어있는 크롬(혹은 Chromium)의 경로를 정의해야 합니다. (Window의 경우 경로를 ‘\’가 아닌 ‘/’로 사용함을 주의)
•  defaultViewport : 브라우저의 디폴트 해상도는 800 × 600px라서, 가장 흔하게 사용하는 1920X1080 px 해상도로 변경하였습니다.
• headless : 백 단에서 돌아가게 할지 말지를 선택하는 옵션으로 디폴트는 true인데, 개발 중 실제 돌아가는 것을 확인하고 싶다면 false로 정의하면 됩니다.

const puppeteer = require(‘puppeteer-core’);

(async () => {

  const browser = await puppeteer.launch({ // Puppeteer용 브라우저 실행

    executablePath: ‘C:/Program Files/Google/Chrome/Application/chrome.exe’

    ,defaultViewport : {

      width: 1920,

      height: 1080

    }

    //,headless : false

    });

  const page = await browser.newPage(); // 신규 탭(페이지) 생성

  await page.goto(‘https://www.naver.com’); // 해당 URL로 이동

  await page.screenshot({ path: ‘screenshot.png’ }); // 해당 경로에 스크린 샷 저장

  await browser.close(); // 브라우저 종료

})();

VS Code에서 lauch.json이 세팅이 되었다면 F5 버튼, 아니라면 터미널에서 node index.js를 입력하여 실행을 시키면 아래와 같이 동일 폴더에 screenshot.png 파일이 생성되면서 스크린샷 이미지가 저장된 것을 확인할 수 있습니다. 유사하게 pdf 명령을 통해 pdf 파일로도 저장할 수 있습니다. (해당 예제는 공식 페이지 https://pptr.dev/ 에서 확인 가능합니다)