Puppeteer

Puppeteer 란

Chrome/Chromum을 제어하는 API를 제공하는 Node.js 라이브러리로, Crawling, E2E 테스팅 툴 등 다양하게 쓰인다.

 

사용

설치는 puppeteer 또는 puppeteer-core 를 설치해서 사용할 수 있다.

npm i puppeteer or yarn add puppeteer
or 
npm i puppeteer-core or yarn add puppeteer-core

 

puppeteer와 puppeteer-core의 차이점은, core의 경우 chromium을 포함하지 않고, 설치되어있는 chrome 브라우져를 연결하여 실행한다. 

 

Example

import puppeteer from 'puppeteer';

(async () => {
  // Launch the browser and open a new blank page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate the page to a URL
  await page.goto('https://developer.chrome.com/');

  // Set screen size
  await page.setViewport({width: 1080, height: 1024});

  // Type into search box
  await page.type('.search-box__input', 'automate beyond recorder');

  // Wait and click on first result
  const searchResultSelector = '.search-box__link';
  await page.waitForSelector(searchResultSelector);
  await page.click(searchResultSelector);

  // Locate the full title with a unique string
  const textSelector = await page.waitForSelector(
    'text/Customize and automate'
  );
  const fullTitle = await textSelector?.evaluate(el => el.textContent);

  // Print the full title
  console.log('The title of this blog post is "%s".', fullTitle);

  await browser.close();
})();

 

 launch에 {headless:true} 값을 통해 headless 형태로 동작 할 수 있게끔 해줄 수 있다. 

하지만 실제 크롬과 headless 크롬의 경우 구현에 차이가 있기 때문에 문제가 있었다고 한다.

const browser = await puppeteer.launch({headless: true});

chrome 112 버전부터는 headless가 달라져서, new를 통해 현재 크롬과 같은 구현체를 사용할 수 있도록해서, 디버깅에 용이하도록 변경되었다고 한다.

const browser = await puppeteer.launch({headless: 'new'});

자세한 글은 아래를 참고

https://developer.chrome.com/articles/new-headless/

Chrome’s Headless mode gets an upgrade: introducing `--headless=new` - Chrome Developers

제일 많이 쓰는 기능 중에 하나가 page.evaluate 일텐데, 이는 headless로 접속한 페이지 내에서 javascript 코드를 실행하기 때문에, 스크래핑하거나, dom을 조작할 때 사용을 하게 된다.

 

Example

  const data = await page.evaluate(() => {
    return {
      title: document.querySelector('.title').textContent,
      // ...
    };
  });