Puppeteerでスクレイピングしたサイトのスクリーンショットを撮影する

Puppeteerとは

Puppeteerは、Googleが開発したJavaScriptのライブラリで、Node.js上で動作するヘッドレスブラウザの制御やWebスクレイピング、Webアプリケーションの自動テストなどに利用されます。

用途としては、スクリーンショットの作成、PDFの生成、フォームの自動入力、キーボード・マウスイベントのシミュレーションなど、様々なタスクを実行することができます。

Puppeteerは、WebスクレイピングやWebアプリケーションの自動テスト、スクレイピングにおいては、多くの手動作業を自動化することができるため、非常に便利なツールとなっています。

実装方法

今回はPuppeteerを使って、対象サイトのスクリーンショットを撮影していきます。

まずはディレクトリの作成を行います。

$ mkdir puppeteer-screenshot
$ cd puppeteer-screenshot

yarn initして、Puppeteerをインストールします。

$ yarn init
$ yarn add puppeteer

index.tsを作成します。

$ touch index.ts

index.tsにスクリーンショットを撮影するためのコードを記述します。

index.ts

const puppeteer = require('puppeteer');

// ヘッドレスブラウザで店舗診断のスクリーンショットを撮る
(async () => {
    // スクリーンショットを撮るURL
    const url = 'https://example.com/'

    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    // 取得したいスクリーンショットの幅、高さを設定
    page.setViewport({ width: 1200, height: 800 })

    await page.goto(url);

    // 表示まで少し待機
    await page.waitForTimeout(1000);

    await page.screenshot({ path: 'screenshot.png', fullPage: true })
    await browser.close();
})();

コードを動作させます。

$ node index.ts

簡単にスクリーンショットを取得することができました！