Puppeteerを使ってスクリーンショットを撮る

ヘッドレスChromeを扱うためのNodeライブラリであるPuppeteerを使って、サイトのスクリーンショットを撮ります。

Puppeteer is 何

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol.
GoogleChrome/puppeteer: Headless Chrome Node API

インストール

Shell

1	$ yarn add puppeteer

Puppeteer本体を追加すると、最新版のChromiumも一緒にnode_modules内に追加されます。

使う

script.js

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');

const baseUrl = 'https://www.google.com/';

puppeteer.launch({
  headless: false, // falseだとChrome表示
  timeout: 0,
  devtools: false // devtools表示
}).then(async browser => {
  const page = await browser.newPage();
  const iPhone = devices['iPhone 6']; //プリセットのデバイスからiPhone 6を選択
  await page.emulate(iPhone); // iPhone 6でエミュレート

  await page.goto(baseUrl, { waitUntil: 'load' });
  await page.screenshot({ path: 'sp/top.png', fullPage: true });
  await console.log('sp/top.png shotted.');
  await page.tap('div#gbwa'); // ドロワーを開く
  await page.screenshot({ path: 'sp/top-drawer.png', fullPage: true });
  await console.log('sp/top-drawer.png shotted.');

  await browser.close();
});