티스토리 뷰

해당 포스트는 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

Headless Chrome Node API. Contribute to GoogleChrome/puppeteer development by creating an account on GitHub.

github.com

댓글
댓글쓰기 폼
Total
354,596
Today
15
Yesterday
658
링크
«   2019/11   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함