Puppeteerを使ってみる

ヘッドレスブラウザのChromiumを操作するライブラリ「Puppeteer」を使ってみます。

使い方

Puppeteerを使って、ページ全体のスクリーンショットの取得を試してみます。
プロジェクトディレクトリに移動して、package.jsonを作成します。

npm init -y

PuppeteerとChromiumをインストールします。

npm install puppeteer --save

補足として、下記の場合はChromiumは含まれず、Puppeteerのみのインストールになるようです。

npm install puppeteer-core --save

screenshot.jsというファイルを作成して、以下の内容にします。

const puppeteer = require('puppeteer');

(async () => {
  // ブラウザを起動して、新しい空白ページを開く
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 指定したURLに移動
  await page.goto('https://cly7796.net/blog/');

  // 画面サイズの指定
  await page.setViewport({width: 1080, height: 1024});

  // スクリーンショットを取得して保存
  await page.screenshot({
    path: 'full_screenshot.png',
    fullPage: true
  });

  // ブラウザを閉じる
  await browser.close();
})();

上記の場合、このブログのトップ(https://cly7796.net/blog/)のスクリーンショットの取得になるので、URLは適宜変更してください。
これで処理の準備ができたので、実際に試してみます。

node screenshot.js

これでページのスクリーンショットの取得ができました。
full_screenshot.png