ヘッドレス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
インストール
Puppeteer本体を追加すると、最新版のChromiumも一緒にnode_modules内に追加されます。
使う
script.js1 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, timeout: 0, devtools: false }).then(async browser => { const page = await browser.newPage(); const iPhone = devices['iPhone 6']; await page.emulate(iPhone);
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' });
で開いているページのスクリーンショットが撮れます。
ドロワー開いたときも合わせて撮れました。便利。