[Node.js] Crawling을 위한 Puppeteer 알아보기

Puppeteer.

공식 문서 링크

https://pptr.dev

 

Puppeteer란?

구글 크롬의 DevTools Protocol을 통해 Chrome 혹은 Chromium을 제어하기 위한 API를 제공한다. 참고로 Google Chrome 개발 팀에서 직접 개발했다고 한다.

구조는 아래와 같다. 간단하게 하나만 설명하면,

• Puppeteer는 하나의 Browser를 갖고 default BrowserContext가 생성된다.
• 하나의 Browser는 여러 개의 Browser Context를 갖는다.

나머지 구조도 아래에서 볼 수 있듯 계층적으로 이뤄진다.

보통 Puppeteer로 가져온 데이터를 파싱할 때 cheerio(https://github.com/cheeriojs/cheerio)를 많이 사용한다.

 

특징

• Headless Browser로 작동(그러나, 브라우저를 띄울 수도 있다)

  UI 없이 간편하게 백그라운드에서 실행되는 브라우저로, 특정 페이지에 접속하고 렌더링되는 과정 이후 코드를 수행할 때 용이하다. (참고로 puppeteer를 설치할 때 Chromium도 같이 깔리기 때문에 가능하다고 한다. puppeteer-core는 Chromium 제외)
  ⇒ 그냥 화면을 보여주지 않고 똑같은 동작을 한다고 생각하면 된다.

• 넓은 제어폭

  마우스, 키보드 뿐 아니라 브라우저 스크린 크키, 쿠키 및 세션 스토리지, 서비스 워커까지 제어가 가능하다고 한다.

 

할 수 있는 일들

• 해당 페이지의 스크린 샷을 찍을 수 있음(PDF로 변환 가능)
• SPA를 크롤링할 수 있을 뿐 아니라, SSR로 만들어진 컨텐츠도 크롤링할 수 있음
• UI testing, 키보드 인풋, 폼 제출 등을 자동화할 수 있음
• 사이트의 Timeline Trace를 기록하여 성능 문제를 진단할 수 있음.

 

예제 코드

// Youtube에서 검색한 결과 가져오기
const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('https://youtube.com');
await page.waitForSelector('input[id="search"]');
await setCookies(page);

const input = await page.$('input[id="search"]');
await input.click();
// Search 창에 입력
await input.type(keyword);
// 엔터 키 누름
await page.keyboard.press('Enter');
await page.waitForSelector('ytd-video-renderer,ytd-grid-video-renderer');

const html = await page.content();

browser.close();

한계

Chrome, Chromium만 지원한다고 한다.