[JavaScript] Puppeteer란?

오늘은 Puppeteer에 대해 알아보겠습니다.

 

 

[ Puppeteer ]

puppeteer은 구글에서 만든 노드 라이브러리로 Headless Chrome 또는 Chrominum을 제어할 수 있습니다.

* headless
백그라운드에서 작동하는 브라우저입니다.
때문에 일반 사용자가 브라우저를 사용할 때처럼 화면에 창이 시각적으로 보이지 않습니다.
보이는 화면은 없지만, 실제로 띄워진 화면에서 화면 테스트를 하듯이 테스트를 할 수 있습니다.
puppeteer에서는 옵션 설정을 통해 headless모드와 non-headless모드 둘 다 사용할 수 있습니다.

 

const browser = await puppeteer.launch({ headless: false }); // default is true

 

[ Puppeteer의 용도 ]

 

1. 화면을 스크린샷 하거나 PDF를 생성할 수 있습니다. 

 

2. SPA(Single-Page Application)을 크롤링하여 사전에 콘텐츠를 랜더링 할 수 있습니다.

 

3. 자동화된 UI 테스트 실행이 가능합니다.  ex) Form을 submit, input 입력 등

 

4. 최신 버전의 크롬에서 자동화된 테스트 환경을 만들 수 있습니다.

 

5. timeline trace를 통해 퍼포먼스 이슈를 진단할 수 있습니다.

 

6. 크롬 확장 프로그램을 테스트 할 수 있습니다. 

 

[ Puppeteer의 구조 ]

 

출처: puppeteer 공식 웹사이트

 

puppeteer API는 다음과 같은  계층적인 구조로 구성되어 있고, 실제 브라우저 구성요소처럼 되어있습니다.

 

- Puppeteer는 크롬의 DevTools Protocol를 사용하여 브라우저를 컨트롤합니다.
- Browser 인스턴스는 다수의 browser context를 가질 수 있습니다.
- BrowserContext 인스턴스는 브라우저의 세션을 규정하며 다수의 Page를 가질 수 있습니다.
- Page는 최소 하나의 Frame을 가지고 있어야 한다 (= 메인 Frame). 추가적으로 iframe이나 frame 태그를 통해 다른 Frame들을 가질 수 있습니다.

- Frame은 최소 하나의 ExecutionContext를 가지고 있어야 한다. 여기서 Frame의 자바스크립트가 실행됩니다. 
- Worker는 하나의 ExecutionContext를 가지고 있으며 WebWorkers와 인터렉트 합니다.

 

 

[ 설치 ]

 

npm i puppeteer

 

[ 기본 예제 ]

아래는 example 페이지에 접속하여 스크릿 샷을 찍는 예제입니다.

 

// https://developers.google.com/web/tools/puppeteer/get-started
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

대부분의 메소드들은 Promise를 반환합니다.

 

puppeteer.launch() 메서드를 통해 browser 를 생성할 수 있습니다.

이때, 옵션을 전달하여 브라우저를 제어할 수 있습니다.

• headless: 기본값은 true 이고, false로 설정하면, 브라우저가 실행됩니다.
• defaultViewport: 기본값은 800x600 이고, 화면이 노출될 사이즈를 지정할 수 있습니다.
• devtools: 기본값은 false 이고, true로 설정하면, 브라우저에 Devtools 가 열립니다.

이 외에도 많은 옵션이 제공됩니다.

생성된 browser 으로 browser.newPage() 메서드를 통해 page를 생성할 수 있습니다.

생성된 page 로 실제 페이지를 조작 및 제어할 수 있습니다.

page.goto 메서드로 페이지를 이동할 수 있습니다.

page에서 $, $eval으로 Element를 선택할 수 있는데, 이때 선택자는 jQuery에서 많이 사용되었던, CSS selectors로 선택할 수 있습니다.

만약 여러개가 선택된다면, 첫 번째 인자를 선택합니다.

$$, $$eval 로 다중 선택할 수 있는데, 이때 배열로 반환됩니다.

$ 와 $eval 의 차이는 $ 는 Element를 반환하고, $eval는 콜백함수를 전달하고, Element를 인자로 받습니다.

page.screenshot으로 해당 페이지의 스크린샷을 찍어서 특정 path에 저장할 수 있습니다.

type 키보드 입력, click 클릭, hover 마우스 호버 등 다양한 방법으로 페이지를 조작할 수 있습니다.

 

 

 

아래는 https://despiteallthat.tistory.com/190

[JavaScript] Jest란?

에서 이름과 나이를 입력하고 버튼을 누르면 입력한 값을 반환해주는 form에 대하여 End-to-End  테스트를 진행해 보겠습니다. 

 

 

util.test.js 

 

// E2E 테스트
 
test('should click around with text and correct class', async () => {
    const browser = await puppeteer.launch({
        headless: false,
        slowMo: 80,
        args: ['--window-size=1920,1080']
    });
    const page = await browser.newPage();
    await page.goto('http://127.0.0.1:5500/udemy/js_work/Automated_Testing_study/testing-01/index.html');
    await page.click('input#name');
    await page.type('input#name', 'Zenghyun');
    await page.click('input#age');
    await page.type('input#age', '27');
    await page.click('#btnAddUser');
    const finalText = await page.$eval('.user-item', el => el.textContent);
    expect(finalText).toBe('Zenghyun (27 years old)');
},25000);