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

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

Contents

1 page.gotoに引数を追加
2 参考

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

参考

月額968円からの高速LiteSpeed採用クラウド型レンタルサーバー

DMM FXは初心者向け

【puppeteer】ページ読み込み完了まで処理を待つ

page.gotoに引数を追加

参考