メインコンテンツへスキップ

ナビゲーション

はじめに​

PlaywrightはURLへナビゲートしたり、ページのインタラクションによって引き起こされるナビゲーションを処理したりできます。

基本的なナビゲーション​

最もシンプルなナビゲーションはURLを開くことです。

// Navigate the page
page.navigate("https://example.com");

上記のコードはページを読み込み、ウェブページが load イベントを発火するのを待ちます。`load` イベントは、スタイルシート、スクリプト、iframe、画像などのすべての依存リソースを含むページ全体が読み込まれたときに発火されます。

注記

ページが `load` の前にクライアントサイドリダイレクトを行う場合、Page.navigate() はリダイレクトされたページが `load` イベントを発火するのを待ちます。

ページはいつ読み込まれるのか？​

最新のページは、`load` イベントが発火された後も多数のアクティビティを実行します。それらは `load` イベントが発火された後、データを遅延ロードしたり、UIを構築したり、高コストなリソース、スクリプト、スタイルを読み込んだりします。ページが完全に「読み込まれた」と判断する方法はなく、それはページやフレームワークなどに依存します。では、いつページとのインタラクションを開始できるのでしょうか？

Playwrightでは、いつでもページとインタラクションできます。Playwrightは、ターゲット要素が操作可能になるまで自動的に待ちます。

// Navigate and click element
// Click will auto-wait for the element
page.navigate("https://example.com");
page.getByText("Example Domain").click();

上記のシナリオでは、Playwrightはテキストが表示されるのを待ち、その要素に対する残りの操作可能性チェックがすべてパスするのを待ってから、クリックします。

Playwrightは非常に高速なユーザーとして動作します。ボタンを認識した瞬間にそれをクリックします。一般的なケースでは、すべてのリソースが読み込まれたかどうかなどを心配する必要はありません。

ハイドレーション​

ある時点で、Playwrightがアクションを実行しても何も起こらないように見えるユースケースに遭遇するかもしれません。あるいは、入力フィールドにテキストを入力してもそれが消えてしまうかもしれません。その最も可能性の高い理由は、ページのハイドレーションが不十分であることです。

ページがハイドレートされるとき、まずページの静的バージョンがブラウザに送信されます。その後、動的な部分が送信され、ページは「ライブ」状態になります。非常に高速なユーザーとして、Playwrightはページを認識した瞬間にインタラクションを開始します。ページ上のボタンが有効になっていても、リスナーがまだ追加されていない場合、Playwrightは動作を完了しますが、クリックは効果がありません。

ページが不十分なハイドレーションに悩まされているかどうかを確認する簡単な方法は、Chrome DevToolsを開き、ネットワークパネルで「Slow 3G」ネットワークエミュレーションを選択してページを再読み込みすることです。関心のある要素が表示されたら、それを操作します。ボタンクリックが無視され、入力したテキストが後続のページロードコードによってリセットされることがわかります。この問題の正しい修正策は、ページが完全に機能するハイドレーション完了後まで、すべてのインタラクティブなコントロールを無効にしておくことです。

ナビゲーションの待機​

要素をクリックすると、複数のナビゲーションがトリガーされることがあります。このような場合、特定のURLに対して明示的にPage.waitForURL()を使用することが推奨されます。

page.getByText("Click me").click();
page.waitForURL("**/login");

Playwrightは、ページに新しいドキュメントを表示するプロセスをナビゲーションと読み込みに分割します。

ページのURLを変更したり、ページとインタラクションしたり（例：リンクをクリックする）することで、**ナビゲーションが開始されます**。ナビゲーションの意図は、未解決のDNSアドレスにヒットした場合やファイルダウンロードに変換された場合など、キャンセルされることがあります。

応答ヘッダーが解析され、セッション履歴が更新されると、**ナビゲーションはコミットされます**。ナビゲーションが成功（コミット）した後で初めて、ページはドキュメントの**読み込み**を開始します。

**読み込み**には、ネットワーク経由での残りの応答ボディの取得、解析、スクリプトの実行、`load` イベントの発火が含まれます。

  • Page.url() が新しいURLに設定されます
  • ドキュメントの内容がネットワーク経由で読み込まれ、解析されます
  • Page.onDOMContentLoaded(handler) イベントが発火されます
  • ページが一部のスクリプトを実行し、スタイルシートや画像などのリソースを読み込みます
  • Page.onLoad(handler) イベントが発火されます
  • ページが動的に読み込まれたスクリプトを実行します