PuppeteerのwaitForNavigationで正しくページ遷移を待つ

「Puppeteer入門スクレイピング+Web操作自動処理プログラミング」を読むまで、PuppeteerのwaitForNavigationの動きを誤って理解していました。

ここでは、Puppeteerを利用して「ページ遷移を待つ」というよくある処理における誤った実装と正しい実装を紹介します。

誤った実装　やりがちなNGパターン

Puppeteerで非同期処理を同期的に記述するawaitを用いて、click後にページ遷移を待つという処理を思い浮かべた場合、次のような書き方をしがちです。

await page.click('.some .a');
await page.waitForNavigation({ waitUntil: 'load'});

waitForNavigationとは、「waitForNavigationを呼び出してから次の遷移を待つ」という意味の処理です。

上記の書き方だと、waitForNavigationを呼び出した時には、すでにclickによるページ遷移処理は終わっています。よって、Navigation Timeout Exceededエラーになってしまいます。

私は、このwaitForNavigationをずっと理解しないまま利用していて、しばしばエラーに悩まされていました。

正しい実装としては、Promise.allを利用して、waitForNavigationとclickを同時に呼び出すことで、クリックしてページ遷移を待つ処理となります。

await page.goto('http://example.com');
await Promise.all([
    page.waitForNavigation({ waitUntil: 'load'}),
    page.click('.some .a'),
]);

出版社：秀和システム

著者:ヴェネチア冒険團美崎薫小原亮一酒井一成

発売日: 2018/09/19