[Tech] Javascript 웹 스크래퍼 : Puppeteer 사용해보기

Puppeteer?

• Puppeteer는 Google Chrome 팀에서 공개한 Node.js 라이브러리로 Node.js를 이용해서 Headless Chrome 혹은 Chromium를 제어하도록 도와주는 라이브러리이다.

---

Headless Browser

• CLI(Command Line Interface)에서 동작하는 브라우저이다.
• 일반적으로 사용자가 사용하는 GUI(Graphical User Interface)에서 동작하는 브라우저가 아니다.
• 백그라운드에서 동작하며, 실제로 브라우저 창을 띄우지 않고 백그라운드에서 가상으로 진행되며 특정 페이지에 접속하고 랜더링 한다.

---

Features

puppeteer는 아래와 같은 기능들을 제공한다.

• SPA 화면을 랜더링 할 수 있다.
• 랜더링 후 키보드, 마우스 입력을 제어할 수 있다.
• 웹 페이지의 자동 테스트 도구를 만들 수 있다.
• JavaScript 테스트를 최신 버전의 Chrome에서 직접 수행할 수 있다.
• 크롤링을 할 수 있다
• 페이지의 스크린샷을 찍거나 PDF로 만들 수 있다.

---

Install

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

yarn add puppeteer // "또는 npm -i puppeteer"

---

Why?

• 이번에 puppeteer를 사용하려는 이유는 간단한 테스트 코드를 작성해보기 위해서다. 프론트 엔드 테스트에는 3가지 종류가 있다. 그중 puppeteer는 E2E(End to End) 테스트의 한 종류로, 브라우저 위에서 기능이 제대로 동작하는지를 사용자 관점에서 테스트하는 방법이다.

---

Test

• 코드를 작성할 때는 puppeteer 공식 홈페이지 또는 puppeteer github를 켜놓고 작성하는 것이 좋다.
• 테스트 코드를 작성하기 이전에 어떤 시나리오로 진행해볼 것인지에 대해서 먼저 생각해볼 필요가 있다.
• 간단한 시나리오를 작성해서 코드를 작성해보겠다.

---

Scenario : 구글의 검색 기능이 잘 동작하는지 테스트해보는 시나리오?!

1. 원하는 페이지의 로그인 페이지 URL로 접속한다. 이번 테스트의 경우에는 google로 접속해볼 것이다.
2. puppeteer test를 검색 창에 입력하고, 검색 버튼을 누른다.
3. 결과물을 스크린샷 캡처하여 원하는 폴더에 저장한다.

• 아래와 같이 간단하게 코드를 작성해서 테스트해볼 수 있다.
• screen 폴더에 screen1.png의 이름으로 저장되어있는 것을 볼 수 있다.

// 설치된 puppeteer 모듈 사용하기
const puppeteer = require('puppeteer');

(async () => {
  // headless 브라우저 실행
  const browser = await puppeteer.launch();
  // 새로운 페이지 열기
  const page = await browser.newPage();
  // `https://www.google.com/` URL에 접속
  await page.goto('https://www.google.com/');

  inputArea = await page.$('.gLFyf');
  searchBtn = await page.$(
    '.FPdoLc > center:nth-child(1) > input:nth-child(1)',
  );

  await inputArea.type('puppeteer test');
  await searchBtn.click();

    await page.waitForNavigation();
  // `screen1.png` 스크린샷을 캡처 하여 screen 폴더에 저장
  await page.screenshot({ path: "./screen/screen1.png" });

  // 모든 스크래핑 작업을 마치고 브라우저 닫기
  await browser.close();
})();

---

Takeaway from It

• 웹 페이지 개발을 진행하면서 병행한다면, 사용자의 관점에서의 테스트를 자동화하여 진행할 수 있기 때문에 개발의 안정성을 다지면서 개발을 진행할 수 있을 것 같다.
• 다만, 익숙해지는 시간, 코드를 작성하는 시간을 투자해서 output을 내는 것과 순전히 개발에 투자하는 시간을 잘 분배해서 효율적인 개발 루틴을 만들어 가는 게 필요할 것 같다.