Puppeteer를 사용하여 테스트하는 방법

Puppeteer를 사용하여 테스트하는 방법

Puppeteer는 Node.js 라이브러리로 헤드리스 Chrome 또는 Chromium을 제어할 수 있습니다. 이를 통해 웹 페이지의 스크린샷을 찍거나 PDF로 저장하거나 웹 애플리케이션을 테스트할 수 있습니다.

nodejs 설치

sudo apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 \
libfontconfig1 libgbm1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 \
libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 \
libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 \
libnss3 lsb-release xdg-utils wget libgbm-dev libxshmfence-dev

curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -

apt-get install -y nodejs

$ node --version
v18.20.3

Puppeteer 설치

Puppeteer를 프로젝트에 설치합니다. Node.js가 설치되어 있어야 합니다.

npm install puppeteer

sudo npm install --location=global --unsafe-perm puppeteer

Puppeteer를 사용하여 간단한 테스트로 구글 페이지에 접속하여 스크린샷을 찍는 예제

1. 프로젝트 디렉토리 생성 및 초기화

mkdir puppeteer-test

cd puppeteer-test

npm init -y

npm install puppeteer

2. 스크립트 작성

vim google-screenshot.js

// google-screenshot.js
const puppeteer = require('puppeteer');

(async () => {
  // 브라우저를 실행합니다.
  const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
  // 새 페이지를 엽니다.
  const page = await browser.newPage();
  // 페이지에 접속합니다.
  await page.goto('https://www.google.com');
  // 스크린샷을 찍습니다.
  await page.screenshot({ path: '/usr/share/nginx/html/google.png' });

  // 브라우저를 종료합니다.
  await browser.close();
})();

sudo mkdir -p /usr/share/nginx/html

3. 스크립트 실행

node google-screenshot.js

이렇게 하면 현재 디렉토리에 google.png라는 이름의 스크린샷 파일이 생성됩니다.

4. google.png 파일 확인

$ ls -l /usr/share/nginx/html/google.png 
-rw-r--r-- 1 root root 26806 Jun 13 14:56 /usr/share/nginx/html/google.png

5. 브라우저에서 google.png 확인

http://localhost/google.png

google.png

728x90

웹 페이지를 PDF로 저장하는 Node.js 예제

1. generate_pdf.js 작성

vim generate_pdf.js

const puppeteer = require('puppeteer');

(async () => {
  try {
    // 브라우저 시작 (no-sandbox 옵션 추가)
    const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    const page = await browser.newPage();

    // PDF로 변환할 웹 페이지로 이동
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });

    // PDF 생성
    await page.pdf({
      path: 'example.pdf',    // 저장할 파일 경로
      format: 'A4',           // PDF 포맷 (A4, Letter 등)
      printBackground: true,  // 배경 그래픽 포함
    });

    console.log('PDF 생성 완료: example.pdf');

    // 브라우저 종료
    await browser.close();
  } catch (error) {
    console.error('PDF 생성 중 오류 발생:', error);
  }
})();

2. generate_pdf.js 실행

node generate_pdf.js

$ node generate_pdf.js 
PDF 생성 완료: example.pdf

3. 브라우저에서 example.pdf 확인

example.pdf

https://example.com 페이지를 PDF로 변환하여 example.pdf 파일로 저장합니다. 스크립트를 실행하면 PDF가 성공적으로 생성되었는지 확인할 수 있습니다. 

 

참고URL

- Google : Puppeteer Installation

- SPATIE.BE : PUPPETEER Requirements