JavaScript에서 DOM 조작을 하고 요소를 출력하고 있는 페이지에 대해서 스크래핑을 실시하기 위해서Puppeteer가 필요하게 될 것 같았기 때문에 만만 시도했습니다.

우선 움직이고 싶다.

우선 README.md의 첫 번째 스크린 샷을 찍는 샘플을 https://qiita.com/ 페이지 전체를 대상으로 작동시켜 보려고했습니다.

example.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://qiita.com/');
  await page.screenshot({path: 'example.png'});

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

node example.js 실행해보기

오류

node_modules/puppeteer/.local-chromium/linux-588429/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

Troubleshooting을 확인하면
CentOS Dependencies라는 항목이 있었으므로 Check out discussions을 확인해 보았습니다.
From a minimal CentOS 7 setup 다음과 같이 실행

yum -y install libX11 libXcomposite libXcursor libXdamage libXext libXi libXtst cups-libs libXScrnSaver libXrandr alsa-lib pango atk at-spi2-atk gtk3

다시 node example.js 실행

오류

ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

Troubleshooting을 확인하면
Chrome Headless fails due to sandbox issues이라는 항목이 있었기 때문에

- const browser = await puppeteer.launch();
+ const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

수정하고 다시 node example.js 실행

우선 무사히 다음 스크린샷을 찍었습니다.

만약에 로딩이 없어지고 나서 스크린 샷하고 싶다

- await page.goto('https://qiita.com/');
+ await page.goto('https://qiita.com/', {waitUntil : 'networkidle0'});

waitUntil : 'networkidle0'그렇다면 돌아 오지 않는 페이지가 있었기 때문에waitUntil: 'domcontentloaded'후에page.waitFor(milliseconds)에서 기다리는 방법이 무난할 것 같습니다.

그래도 돌아 오지 않으면 순서대로 시도하는 방법이 좋을 것 같습니다.
여기 에서 사용하는 것처럼 다음과 같은 옵션 목록을 만들 수도 있습니다.

optionList = [
    {waitUntil: 'load'},
    {waitUntil: 'domcontentloaded'},
    {waitUntil: 'networkidle0'},
    {waitUntil: 'networkidle2'}
];

글자를 깨고 싶다.

yum -y install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc

스크린샷의 폭을 넓히고 싶다

+ await page.setViewport({width: 1280, height: 720});
(widthのみの指定ではエラーになりました。)

모든 페이지로 만들고 싶습니다.

- await page.screenshot({path: 'example.png'});
+ await page.screenshot({path: 'example.png', fullPage: true});

수정하고 다시 node example.js 실행

영어로 되어 있으므로 언어 ​​설정이나 사용자 에이전트를 설정하고 싶습니다.

언어 설정

How to specify browser language in Puppeteer

이에 따르면
브라우저 옵션에서 설정하는 방법
page 메서드에서 설정하는 방법
있는 모습.

이번에는 browser 옵션으로 설정해 보겠습니다.

+ '--lang=ja,en-US;q=0.9,en;q=0.8',

사용자 에이전트 설정

브라우저 옵션에서 설정하는 방법
브라우저의 메소드에서 설정하는 방법
page 메서드에서 설정하는 방법
페이지 emulate 옵션에서 설정하는 방법
있는 모습.

이번에는 browser 옵션으로 설정해 보겠습니다.

+ '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36',

수정하고 다시 node example.js 실행

example.js

const puppeteer = require('puppeteer');

(async () => {
  try {
    const browser = await puppeteer.launch({
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--lang=ja,en-US;q=0.9,en;q=0.8',
        '--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36',
      ]
    });
    const page = await browser.newPage();
    await page.goto('https://qiita.com/', {waitUntil : 'domcontentloaded'});
    await page.waitFor(2000);
    await page.setViewport({width: 1280, height: 720});
    await page.screenshot({path: 'example.png', fullPage: true});

    await page.close();
    await browser.close();
  } catch (error) {
    throw error;
  }
})().catch((error) => {
  console.log(error);
  process.exit(1);
});