Node.js 및 Puppeteer를 사용하여 웹사이트 스크린샷을 캡처하는 방법

Puppeteer는 Chrome 및 Chromium 브라우저를 제어하기 위한 API를 제공하는 Node.js 라이브러리입니다. 이 기사에서는 이를 사용하여 웹 사이트의 스크린샷을 캡처하지만 양식 제출을 자동화하고 UI 테스트를 수행하고 성능 문제를 진단하는 데 사용할 수도 있습니다.

Puppeteer를 시작하려면 먼저 Node.js(v10.18.1+)가 설치되어 있어야 합니다.

Node.js가 설치된 상태에서 다음 터미널 명령을 실행하여 프로젝트 폴더를 만들고 Puppeteer를 설치합니다.

mkdir screenshot
cd screenshot
npm install puppeteer

Puppeteer가 크기가 약 120MB인 Chromium을 다운로드하므로 설치하는 데 약간의 시간이 걸릴 수 있습니다. 설치가 완료되면 Wikipedia를 예로 사용하여 screenshot.js라는 새 파일에서 스크린샷을 캡처하도록 스크립트를 설정합니다.

const puppeteer = require("puppeteer");
const capture = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://www.wikipedia.org/");
  await page.screenshot({ path: "./screenshot.png" });
  await browser.close();
};
capture();

await 연산자를 사용하여 Promise를 기다리는 동안 코드는 async 함수 내에서 실행되어야 합니다. 이를 통해 약속 체인을 명시적으로 구성할 필요 없이 비동기식 약속 기반 동작을 보다 깔끔한 스타일로 작성할 수 있습니다.

이제 다음 명령을 실행하여 스크립트를 테스트할 시간입니다.

node screenshot.js

f 성공하면 스크립트가 있는 동일한 폴더에 screenshot.png라는 이름의 이미지가 저장됩니다. 기본적으로 스크린샷은 800×600 픽셀이지만 필요한 치수와 함께 다음을 추가하여 특정 뷰포트 크기를 설정할 수 있습니다.

await page.setViewport({ width: 1024, height: 768 });

또는 다음과 같이 page.screenshot을 수정하여 전체 페이지를 캡처할 수 있습니다.

await page.screenshot({ path: 'screenshot.png', fullPage: true };

지금까지는 스크린샷이 .png로 저장되지만 page.screenshot 줄을 다음으로 대체하여 .pdf로 저장할 수도 있습니다.

await page.pdf({ path: 'screenshot.pdf', format: 'A4' });