Puppeteerを使って簡単に自動でサイトのスクリーンショットを保存してみる

2021年3月26日

PuppeteerはブラウザのChromeをプログラムから動かすことができるNode.jsのライブラリです。

今回はPuppeteerを使って、Googleのトップ画面のスクリーンショットを保存してみます。

インストール

以下のコマンドを実行して puppeteer-coreをインストールします。

npm install pupeteer

※試した時のnodeのバージョンはv14.16.0でした

package.jsonの編集

type: module と、 start を追加をします。

{
  "name": "puppeteer-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^8.0.0",
    "puppeteer-core": "^8.0.0"
  }
}

ソースコードを書く

src ディレクトリを作成して、その下にindex.jsを作ります。

index.jsの内容は以下です。

import puppeteer from "puppeteer";

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com/');
  await page.screenshot({ path: `screenshot/google_${new Date().getTime()}.png` });

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