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

Categories:puppeteer

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

参考

返信がありません

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です