[Node.js] Puppeteer

 

 

 

---

Puppeteer?

• 구글 크롬의 DevTools Protocol을 통해 Headless Chrome 혹은 Chromium을 제어하기 위한 API를 제공한다.
  • Headless Browser??
    • CLI(Command Line Interface)에서 작동하는 브라우저이다.
    • 백그라운드에서 작동하는 브라우저
    • 일반 사용자가 브라우저를 사용할 때(GUI)처럼 화면에 창이 시각적으로 보이지 않는다.
    • 보이는 화면은 없지만, 실제로 띄워진 화면에서 화면 테스트를 하듯이 테스트할 수 있다.
      • HTML, CSS로 DOM Tree와 CSSOM Tree를 만들고 JS엔진을 구동한다.
    • puppeteer에서는 옵션 설정을 통해 headless모드와 non-headless모드 둘 다 사용할 수 있다.

// puppeteer로 headless모드를 false로 수정
// default 값은 true이다.
const browser = await puppeteer.launch({ headless : false })

• Google Chrome 개발 팀에서 직접 개발했다고 한다.

 

 

 

 

---

Puppeteer의 구조

 

• Puppeteer API는 계층적인 구조로 구성되어 있다.
• Puppeteer : 크롬의 DevTool Protocol을 사용하여 브라우저를 컨트롤 한다.
• Browser : 인스턴스는 다수의 browser context를 가질 수 있다.
• BrowserContext : 브라우저의 세션을 규정하거나 다수의 page를 가질 수 있다.
• page : 최소 하나의 Frame을 가지고 있어야 한다. 
  • 추가적으로 iframe이나 frame태그를 통해 다른 Frame들을 가질 수 있다. 
• Frame : 최소 하나의 ExecutionContext(실행 컨텍스트)를 가지고 있어야 한다.
  • 여기서 JS가 실행된다.
• Worker : 하나의 ExecutionContext를 가지고 있으며 WebWorkers와 인터렉트한다.

 

 

---

Puppeteer로 할 수 있는 기능

• 화면을 스크린샷 하거나 PDF를 생성할 수 있다.
• SPA(Single Page Application)을 크롤링하여 사전에 콘텐츠를 렌더링 할 수 있다.
  • SSR로 만들어진 컨텐츠도 크롤링이 가능하다.
• 자동화된 UI 테스트 실행이 가능하다.
  • Form 을 submit, input을 입력 등
• 최신 버전의 크롬에서 자동화된 테스트 환경을 만들 수 있다.
• timeline trace를 통해 퍼포먼스 이슈를 진단할 수 있다.
• 크롬 확장 프로그램을 테스트할 수 있다.

 

 

 

---

Puppeteer_사용하기

출처: https://kim-oriental.tistory.com/17

Puppeteer 설치

• 먼저 Node.js 및 VS Code가 세팅이 되어 있어야 한다.
• VS Code 하단의 터미널 창에서 아래와 같이 명령어를 쳐서 puppeteer-core 라이브러리를 설치한다.
• 설치는 npm i puppeteer와 puppeteer-core로 설치가 가능하다.
  • puppeteer :  Chrominum 브라우저가 같이 설치.
  • puppeteer-core : 브라우저가 따로 설치가 되지 않는다.
    • 이미 크롬이 설치되어 있다면 굳이 중복으로 설치할 필요가 없기 때문에 위와 같이 puppeteer-core를 설치다.

npm i puppeteer-core

 

👩‍🏫 Puppeteer를 이용해서 크롤링 해보자!

예시 사이트는 "여기어때" 사이트의 호텔 숙박 정보를 크롤링한 예제를 다루고 있다.

해당 사이트에 들어가 어떤 식으로 적용되는지 확인해보자! 

Puppeteer를 이용한 웹 크롤링 해보기 (예제 1)

 

 

 

👩‍🏫 Puppeteer 사용 예시

// 1. puppeteer 설치
// npm install puppeteer

// 2. 모듈 불러오기
const puppeteer = require('puppeteer');

// 3. 비동기함수로 작업을 진행한다.
    // puppeteer 메서드들이 대부분 promise를 반환하기 때문에 비동기 처리를 할 수 있는 함수 내에서 작업해야 한다.
(async () => {
  // 브라우저 창 열기
  // puppeteer.launch : 브라우저의 인스턴스를 생성한다.
    // 해당 인스턴스는 브라우저 행동의 시작점으로 사용되며, 여기에 새로운 페이지를 생성하거나 다른 작업을 수행할 수 있다.
  const browser = await puppeteer.launch();
  // browser.newPage : 새로운 페이지를 열어준다.
  const page = await browser.newPage();

  // 두 메서드는 promise를 반환하기 때문에 비동기처리가 필요하다.

  // 4. 타겟 URL로 이동
  // 페이지 인스턴스를 통해 원하는 웹사이트로 이동한다.
  await page.goto('http://example.com');

  // 5. 원하는 데이터를 선택하는 적절한 셀렉터를 찾아야 합니다.
  const title = await page.$eval('h1', el => el.textContent);
  console.log(title);
  
  // 제품 정보를 스크레이핑
  const productInfo = await page.$eval('.product-info', el => el.innerText); // 제품정보 선택자 변경 필요함

  console.log(productInfo);

  // 6. 브라우저 닫기
  await browser.close();
})();

 

 

 

 

• https://bluayer.com/35
• https://kim-oriental.tistory.com/17
• https://kkangdda.tistory.com/112
• https://pks2974.medium.com/puppeteer-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-a252bffbb2a8