web-dev-qa-db-ja.com

フォーム送信後の操り人形待機ページのロード

次のコードを使用してフォームを送信します。フォームの送信後、Puppeteerにページの読み込みを待機させます。

await page.click("button[type=submit]");

//how to wait until the new page loads before taking screenshot?
// i don't want this:
// await page.waitFor(1*1000);  //← unwanted workaround
await page.screenshot({path: 'example.png'});

Puppeteerでページの読み込みを待つ方法は？

javascriptpuppeteer
43
redochka

ナビゲーションで非同期に待機して、リダイレクト時にnullを取得しないようにすることができます。

await Promise.all([
      page.click("button[type=submit]"),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

これは、page.clickがすでにナビゲーションをトリガーしている場合に役立ちます。

40
Md. Abu Taher
await page.waitForNavigation();
31
redochka

公式ドキュメント によると、以下を使用する必要があります。

page.waitForNavigation（options）

  • options < Object >次のプロパティを持つ可能性のあるナビゲーションパラメータ：
    • timeout < number >最大ナビゲーション時間（ミリ秒）、デフォルトは30秒、0を渡してタイムアウトを無効にします。デフォルト値は page.setDefaultNavigationTimeout（timeout） メソッドを使用して変更できます。
    • waitUntil < string | Array < string >>ナビゲーションが成功したと見なす場合、デフォルトはloadになります。イベント文字列の配列を指定すると、すべてのイベントが発生した後にナビゲーションが成功したと見なされます。イベントは次のいずれかです。
      • load-loadイベントが発生したときにナビゲーションが終了したと見なします。
      • domcontentloaded-DOMContentLoadedイベントが発生したときにナビゲーションが終了したと見なします。
      • networkidle0-少なくとも500 msの間、ネットワーク接続が0個以下になったときにナビゲーションが終了したと見なします。
      • networkidle2-少なくとも500 msの間、ネットワーク接続が2つ以下になったときにナビゲーションが終了したと見なします。
  • 戻り値：< Promise <[？Response] >>メインリソースレスポンスに解決されるPromise。複数のリダイレクトの場合、ナビゲーションは最後のリダイレクトの応答で解決されます。別のアンカーへのナビゲーションまたはHistory APIの使用によるナビゲーションの場合、ナビゲーションはnullで解決されます。

読みやすさ：

page.waitForNavigation() を使用して、ページがナビゲートするのを待つことができます。

await page.waitForNavigation();

性能：

ただし、page.waitForNavigation()はpage.mainFrame().waitForNavigation()のショートカットであるため、以下を使用してパフォーマンスを若干向上させることができます。

await page._frameManager._mainFrame.waitForNavigation();
16
Grant Miller

私はこれに答えるのが少し遅れていることを知っています。 waitForNavigationを実行中に例外を下回っている人に役立つかもしれません。

（ノード：14531）UnhandledPromiseRejectionWarning：TimeoutError：Navigation Timeout Exceeded：30000ms over Promise.then（/home/user/nodejs/node_modules/puppeteer/lib/LifecycleWatcher.js:142:21）at-フレームで。 （/home/user/nodejs/node_modules/puppeteer/lib/helper.js:111:15）at Page.waitForNavigation（/home/user/nodejs/node_modules/puppeteer/lib/Page.js:649:49）at Page 。 （/home/user/nodejs/node_modules/puppeteer/lib/helper.js:112:23）at /home/user/nodejs/user/puppeteer/example7.js:14:12 at

私のために働いた正しいコードは以下の通りです。

await page.click('button[id=start]', {waitUntil: 'domcontentloaded'});

同様に、新しいページに行く場合、コードは次のようになります

await page.goto('here goes url', {waitUntil: 'domcontentloaded'});
2
Austin
await Promise.all([
      page.click(selectors.submit),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

これは、すべてのネットワークが完了するまで待機し、500ミリ秒以上0を超えるネットワークコールがない場合に実行されると想定するため、最初に使用する優先順位です。

あなたも使用できます

await page.waitForNavigation({ waitUntil: 'Load' }}

または、使用できます

await page.waitForResponse(response => response.ok())

この関数は、すべての呼び出しが成功した場合、つまりすべての応答ステータスがOKの場合（200-299）にのみ先に進むことができるため、さまざまな場所でも使用できます。

0
Denish S.