Puppeteer

Puppeteer는 Google에서 개발한 Node.js 라이브러리로, 프로그래밍을 통해 Chrome 또는 Chromium 브라우저를 제어할 수 있게 해주는 고급 웹 자동화 도구.
기본적으로 헤드리스 모드로 실행되지만, 필요에 따라 전체 브라우저 인터페이스를 표시할 수도 있다.

Puppeteer는 브라우저 자동화의 복잡성을 추상화하여 개발자가 더 쉽고 효율적으로 웹 상호작용을 프로그래밍할 수 있도록 설계되었다.
브라우저의 모든 기능을 프로그래밍적으로 제어할 수 있게 함으로써, 테스팅, 웹 스크래핑, PDF 생성 등 다양한 use case를 지원한다.

주요 특징

  1. 포괄적인 브라우저 제어:
    Puppeteer는 다음과 같은 고급 브라우저 제어 기능을 제공한다:

    • 페이지 탐색 및 상호작용
    • 자바스크립트 실행
    • 네트워크 요청 모니터링
    • 브라우저 이벤트 캡처
    • 스크린샷 및 PDF 생성

  2. 고급 자동화 기능:

    • 동적 웹페이지 렌더링 지원
    • 완벽한 비동기 API
    • 확장 가능한 플러그인 아키텍처

장점

  1. 완벽한 Chrome/Chromium 통합
  2. 강력한 웹 스크래핑 기능
  3. 높은 성능과 안정성
  4. 풍부한 API와 유연성
  5. 자동화 테스팅에 최적화

단점 및 한계

  1. Chrome/Chromium에 제한됨
  2. 초기 학습 곡선이 가파름
  3. 리소스 집약적일 수 있음
  4. 고급 브라우저 자동화에 복잡성

설치 및 기본 설정

  1. Npm을 통한 설치

    1

    npm install puppeteer

  2. 기본 설정 예시

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    const puppeteer = require('puppeteer');

(async () => {
  // 브라우저 실행 옵션
  const browser = await puppeteer.launch({
    headless: true,  // 헤드리스 모드
    defaultViewport: {
      width: 1920,
      height: 1080
    }
  });
})();

주요 사용 방법 및 예시

주요 명령어

  • puppeteer.launch(): 브라우저 인스턴스 생성
  • browser.newPage(): 새 페이지 생성
  • page.goto(url): 지정된 URL로 이동
  • page.click(selector): 요소 클릭
  • page.type(selector, text): 텍스트 입력
  • page.screenshot(): 스크린샷 캡처
  • page.pdf(): PDF 생성
  • page.evaluate(): 페이지 컨텍스트에서 JavaScript 실행

기본 웹 페이지 탐색

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 웹사이트 방문
  await page.goto('https://example.com');
  
  // 페이지 제목 추출
  const title = await page.title();
  console.log(title);
  
  await browser.close();
})();

스크린샷 및 PDF 생성

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // 전체 페이지 스크린샷
  await page.screenshot({ path: 'page.png', fullPage: true });
  
  // PDF 생성
  await page.pdf({ path: 'page.pdf', format: 'A4' });
  
  await browser.close();
})();

웹 스크래핑

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://news.example.com');
  
  // 데이터 추출
  const articles = await page.evaluate(() => {
    const titles = document.querySelectorAll('.article-title');
    return Array.from(titles).map(title => title.textContent);
  });
  
  console.log(articles);
  
  await browser.close();
})();

자동화된 폼 제출

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://login.example.com');
  
  // 로그인 폼 자동 입력
  await page.type('#username', 'user@example.com');
  await page.type('#password', 'secretpassword');
  
  // 폼 제출
  await page.click('#submit-button');
  
  // 로그인 후 페이지 대기
  await page.waitForNavigation();
  
  await browser.close();
})();

CLI 및 고급 명령어

1
2
3
4
5

# Puppeteer를 이용한 스크립트 실행
node script.js

# 디버깅 모드
DEBUG=puppeteer node script.js

참고 및 출처

Puppeteer | Puppeteer