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