웹페이지 스크린샷 저장하기

아침에 새로운 아이디어가 생각나서 크롤링을 찾아봤다.
그러던중 화면을 복사할게 아니라 스크린샷을 저장하고 이를 원(origin) 페이지로 링크를 걸기로 했다.

GPT에 물어보니, puppeteer를 이용하면 된다고 했다.

---

Puppeteer 사용법을 알려줘세요

Puppeteer는 Node.js 기반의 라이브러리로, Chrome 또는 Chromium 브라우저를 제어하여 웹페이지 스크린샷을 생성하고 다양한 웹 테스트 및 자동화 작업을 수행할 수 있게 해줍니다. 아래는 Puppeteer를 사용하여 웹페이지 스크린샷을 캡처하는 간단한 예제입니다.

1. Puppeteer 설치:
   Node.js 프로젝트에서 Puppeteer를 사용하려면 먼저 Puppeteer를 설치해야 합니다. 프로젝트 폴더에서 다음 명령을 실행하여 Puppeteer를 설치하세요:

   npm install puppeteer

2. 스크린샷 캡처 코드:

   아래 코드 예제는 Puppeteer를 사용하여 웹페이지의 스크린샷을 캡처하는 방법을 보여줍니다.

   const puppeteer = require('puppeteer');
   
   (async () => {
     // Puppeteer를 시작합니다.
     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();
   })();

   이 코드는 Puppeteer를 사용하여 'https://example.com' 웹페이지로 이동하고, 스크린샷을 'example.png' 파일로 저장합니다. 필요에 따라 웹페이지의 크기, 스크린샷 형식 및 다른 옵션을 사용자 정의할 수 있습니다.

3. 스크린샷 생성:
   코드를 실행하려면 Node.js 스크립트를 실행하면 됩니다.

   node your_script.js

4. 출력 확인:
   스크린샷은 현재 작업 디렉토리에 'example.png'라는 파일 이름으로 저장됩니다. 웹페이지 스크린샷을 확인할 수 있습니다.

이것은 Puppeteer의 간단한 사용 예제이며, Puppeteer는 훨씬 더 많은 기능과 옵션을 제공합니다. 브라우저 조작, 웹 테스트, 자동화, PDF 생성 등 다양한 작업을 수행할 수 있습니다. 필요에 따라 Puppeteer 문서를 참고하여 자세한 정보를 얻을 수 있습니다.

로그인이 필요한 사이트면 어떻게 하죠?

로그인이 필요한 웹페이지의 스크린샷을 캡처하려면 Puppeteer와 같은 도구를 사용하여 로그인 과정을 자동화해야 합니다. 아래는 Puppeteer를 사용하여 로그인이 필요한 웹페이지에서 스크린샷을 캡처하는 예제입니다:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 웹페이지로 이동
  await page.goto('https://example.com');

  // 로그인 폼 입력 필드를 찾고 입력
  await page.type('#username', 'your_username');
  await page.type('#password', 'your_password');

  // 로그인 버튼을 클릭
  await page.click('#login-button');

  // 로그인 완료 후 대기 (로그인 완료를 확인하는 방법은 웹페이지에 따라 다를 수 있습니다)
  await page.waitForNavigation();

  // 스크린샷 캡처
  await page.screenshot({ path: 'after_login.png' });

  // 브라우저 닫기
  await browser.close();
})();

이 예제에서는 Puppeteer를 사용하여 웹페이지로 이동하고, 로그인 폼의 필드에 사용자 이름과 비밀번호를 입력한 후 로그인 버튼을 클릭합니다. 그리고 로그인이 완료될 때까지 대기한 뒤 스크린샷을 캡처합니다.

로그인 웹페이지의 HTML 구조와 로그인 프로세스는 사이트마다 다를 수 있으므로 웹페이지에 따라 필드 및 버튼을 선택하는 방법을 조정해야 합니다. Puppeteer의 page.type, page.click, 및 page.waitForNavigation 등의 메서드를 사용하여 작업을 수행합니다.

또한, 로그인 자격 증명을 코드 내에 하드코딩하는 것은 보안상 취약할 수 있으므로, 민감한 정보를 관리하기 위한 안전한 방법을 고려해야 합니다.

---

여기서 로그인 폼 입력 필드를 찾는게 어려울 수 있는데
이때는 개발자도구를 이용하면 편하다.

• selector 정보가 필요한 요소에 우클릭 > 검사 > copy > Copy selector
  
• 그렇게 복사한 값을 코드에 적용하면

  // 로그인 폼 입력 필드에 값을 입력
  await page.type('#login_form > div.form-group > input:nth-child(1)', 'username');
  await page.type('#login_form > div.form-group > input.form-control.is-invalid', 'password');

  // 로그인 버튼 클릭
  await page.click('#login_form > a');

마지막으로, 이미지 크기가 default 600x800 이라고 하는데
나는 fullSize가 필요했다.
찾아보니, fullPage가 있었다.

await page.screenshot({ path: `${name}.png`, fullPage: true});