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

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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();
});

page.screenshot({ path: 'hoge.png' }); で開いているページのスクリーンショットが撮れます。

ドロワー開いたときも合わせて撮れました。便利。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×