puppeteerを利用してヘッドレスでとあるページにアクセスし、「そのページの読み込みが完了したら、スクリーンショットをとる」方法を紹介します。「puppeteerでスクショしてみたが、ローディング画面を撮ってしまった」アナタに捧げます。
なお、ここではpuppeteerの概要は取り上げません。それについて詳しくは、こちらなどオススメです。
Contents
page.gotoに引数を追加
結論としては簡単で、以下のサンプルコードのようにpage.gotoの第二引数にwaitUntil: “networkidle0”を追加するだけです。
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); try { await page.goto( '<https://www.sample.com>', {waitUntil: "networkidle0" }); await page.screenshot({ path: './puppeteer/image.png' }); } catch (err) { console.log(err); } finally { await browser.close(); }})();このwaitUntilは、「どのタイミングをもって遷移完了とみるか？」を設定するためのプロパティです。そのタイミングは、以下の設定値から選んで指定します。ちなみに、何も指定しない場合のデフォルトはloadです。
- load: ページの読込みが画像含めて完了したとき
- domcontentloaded: HTMLの読込みが終わったとき
- networkidle0: ネットワーク接続が0件の状態が500ミリ秒続いたとき
- networkidle2: ネットワーク接続が2件以下の状態が500ミリ秒続いたとき
