Puppeteerで何かおかしいときはとりあえずスクショを出す

puppeteer

PuppeteerはJavascript内でGoogle Chrome（のようなもの）を起動できるすごいツールで ブラウザを使って手動でやっていた面倒な作業が自動化できたりする。

しかし、実装ミスやサイトの仕様で特定の要素が現れるのを待機したまま止まってしまい、タイムアウトなんてことがよくある。

TimeoutError: waiting for selector "#element" failed: timeout 30000ms exceeded

こういうときに「中で何が起こったのか？」エラーメッセージだけではわかりづらいので、ブラウザの現在状態を見たくなる。 WindowsやMacであれば普通に headless: false をつけてGoogle Chromeを直接実行すれば様子が見られるが、 たとえばLinuxのサーバー上でPuppeteerを起動していたら難しい。

というわけで、何か例外が起きたらスクリーンショットを撮るようにしたら便利だった。

try {
    const url = `https://...`;
    await page.goto(url);
    await page.waitFor(1000);
} catch (err) {
    console.error(`error occured while processing in browser: ${err}`);
    await page.screenshot({ path: outPath });
} finally {
    await page.close();
}

撮ったスクリーンショットをエラーと一緒にSlackに添付して投げてくれたりしたらより便利そう（やったことはないが）。