웹사이트 스크래핑 라이브러리 Puppeteer 소개

해당 포스트는 Puppeteer 에 대해 학습하기 위해 puppeteer 의 영어 문서를 토대로 부가적인 설명과 간단한 puppeteer의 사용 방법을 소개합니다.

Puppeteer

---

Puppeteer는 DevTools Protocol을 통해 Chrome 또는 Chromium을 제어하기 위한 API를 제공하는 node.js 라이브러리 입니다. 다양한 기능이 있지만 가장 큰 특징은 Headless로 실행될 수 있다는 점 입니다.

 

puppeteer 문서에서 소개되는 대표적인 기능들은 아래와 같습니다.

1. SPA(Single-Page Application)를 크롤링하고 미리 렌더링된 컨텐츠 (SSR - Server Side Rendering)를 생성 할 수 있습니다.

2. 최신 자동 테스트 환경을 만듭니다. JavaScript 테스트를 최신 버전의 Chrome에서 직접 수행할 수 있습니다.

3. 사이트의 timeline trace 를 기록하여 성능 문제를 진단할 수 있습니다.

4. Form Submit, UI 테스트, 키보드 입력 등을 자동화 합니다.

5. 웹 페이지의 스크린샷, PDF를 생성할 수 있습니다.

6. Chrome Extensions을 테스트 할 수 있습니다.

puppeteer 구조도 : http://bit.ly/3024OZC

Puppeteer는 Google Chrome 개발팀에서 직접 개발하였습니다. 때문에 Chrome 브라우저 환경만을 지원한다는 단점이 있습니다. 하지만 그만큼 Chrome 브라우저에 대한 제어 기능이 많고 조합이 좋으며 간단하게 설정하고 사용할 수 있다는 장점이 있습니다.

Headless란?

---

그럼 puppeteer에서 강조하는 headless란 무엇일까요? 쉽게 말하면 브라우저가 사용자의 눈에 보여지지 않고 백그라운드 환경에서 작동하는 것을 의미합니다.

 

실제 브라우저 환경에서 Javascript 코드를 테스트 하고 싶을 때 실제 브라우저 창을 띄워야 한다면 테스트 운영체제에 대한 제약이 많아집니다. 예를들어 우분투 서버와 같은 GUI가 없는 OS나 GPU가 없는 데스크탑의 경우 해당 테스트를 수행해볼 수 없습니다. 때문에 headless 모드가 이를 해결해 줄 수 있습니다.

 

실제 창을 띄우지 않고도 실제 브라우저에서 수행되는 렌더링 과정을 가상으로 수행하기 때문에 실제 브라우저와 동일하게 동작하지만 '창'이 띄워지지 않는 방식으로 동작 합니다.

Puppeteer VS Selenium

---

웹 스크래핑 라이브러리를 찾으면 가장 대표적으로 puppeteer와 selenium 이 추천되고 있습니다. 이 두 가지 중 어떤 라이브러리를 사용해야 하는지 결정하기 위해 장단점을 간단하게 알아보겠습니다.

라이브러리	Puppeteer	Selenium
장점	- 크롬 브라우저에 대한 강력한 기능 제공 - 스크린샷 테스트 - 웹 페이지 성능 측정 및 프로파일링 - Selenium 에 비해 빠름	- JavaScript 외 다양한 언어 지원 - 크롬 외에 테스트 환경에 설치된 다양한 브라우저 지원 - Android, IOS 등 모바일 환경 테스트 - puppeteer 보다 많은 사용자 커뮤니티
단점	- JavaScript 만 지원 - Chrome, Chromium 만 지원	- puppeteer에 비해 느린 속도 - puppeteer에 비해 브라우저 제어 기능이 적음 - puppeteer에 비해 복잡한 설정

간단한 기준을 제시하자면, JavaScript에서 Chrome 환경만을 테스트 할때 Puppeteer를, 다양한 언어에서 여러 플랫폼 환경을 테스트하고 싶다면 Selenium을 선택하면 될것 같습니다.

Puppeteer 사용해보기

---

npm 또는 yarn을 사용하여 쉽게 모듈을 설치할 수 있습니다. puppeteer를 설치하게 되면 puppeteer와 호환되는 가장 최신 버전의 Chromium도 함께 설치됩니다.

npm i puppeteer
 # 또는 "yarn add puppeteer"

만약 Chromium을 설치하고 싶지 않다면 기존에 설치된 브라우저를 사용하는 방법도 있습니다. puppeteer-core를 설치하면 되는데요, 이 때 주의해야 할 점은 기존에 설치했던 Chrome 버전이 설치한 puppeteer-core와 호환되는지를 확인해야 합니다. (puppeteer vs puppeteer-core)

npm i puppeteer-core
 # 또는 "yarn add puppeteer-core"

이렇게 모듈을 설치했다면 본격적으로 puppeteer를 사용해 보겠습니다. 아래 예제는 puppeteer를 사용하여 google에서 '박스여우' 키워드를 검색해서 나오는 링크 텍스트들을 가져오는 코드 입니다.

  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://google.com'); // 구글 검색창 이동
  await page.type('input[class="gLFyf gsfi"]', '박스여우'); // 박스여우 검색어 입력
  await page.type('input[class="gLFyf gsfi"]', String.fromCharCode(13));  // 엔터키를 입력하여 검색 수행
  await page.waitForSelector('a h3'); // a 태그 밑, h3태그 가 존재하는 컨텐츠가 로드될 때 까지 대기
  const links = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('a h3')).map(h3 => (h3.textContent)); // h3태그 의 text 가져옴
  });
  console.log(links.join('\n'));  //콘솔에 출력
  browser.close();

위 예제에서 browser와 page 객체를 만들고 goto api를 통해 google.com 사이트에 접속합니다. 그리고 검색어 입력창에 '박스여우'와 검색을 수행하기 위한 엔터 키를 입력합니다.

 

그러면 검색이 진행되고 페이지가 다시 로드될 것 입니다. 이 때 검색이 완료될 때 까지 대기하기 위해 waitForSelector API를 사용해 Selector에 해당되는 컨텐츠가 로드될 때 까지 기다립니다.

 

예제를 통해 캡처된 '박스여우' 검색 결과

그 이후 스크린샷을 찍어 저장한 후 a 태그 하위에 존재하는 h3 태그를 탐색하여 그 안의 텍스트 컨텐츠들을 가져옵니다. 최종적으로 콘솔에 출력되는 결과는 아래와 같습니다. 검색 결과는 검색 엔진에의해 달라질 수 있기 때문에 출력 결과가 다르게 나올 수 있습니다.

// 예제 수행 결과
박스여우 - BoxFox
BoxFox - 박스여우 - YouTube
[닫음]여우박스🦊 (@FoX___B0X) | Twitter
#여우박스 hashtag on Twitter
여우의 전화 박스 - YES24
골골박스 여우 - 모모제리
여우의 전화박스 : 네이버 블로그
[여우의 전화박스]를 읽고
동화와 어린이
finish

참고 자료

---

GoogleChrome/puppeteer