puppeteerを利用してヘッドレスでとあるページにアクセスし、「そのページの読み込みが完了したら、スクリーンショットをとる」方法を紹介します。「puppeteerでスクショしてみたが、ローディング画面を撮ってしまった」アナタに捧げます。

なお、ここではpuppeteerの概要は取り上げません。それについて詳しくは、こちらなどオススメです。

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ミリ秒続いたとき

参考

• puppeteerのoptionsのメモ、とくにwaitUntilの値をよく忘れる – LOCAL-C BLOG
• puppeteer/api.md at v1.7.0 · puppeteer/puppeteer · GitHub