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

ナビゲーション

はじめに​

Playwright は URL にナビゲートし、ページ操作によって引き起こされるナビゲーションを処理できます。

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

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

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

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

注

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

ページはいつロードされるのか？​

最近のページは、load イベントが発火した後も多数のアクティビティを実行します。データは遅延ロードされ、UI が表示され、高価なリソース、スクリプト、スタイルが load イベント後にロードされます。ページが「ロードされた」ことを知る方法はありません。それはページ、フレームワークなどに依存します。それでは、いつ操作を開始できるのでしょうか？

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 を開き、[Network] パネルで [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) イベントが発火されます
  • ページは動的にロードされたスクリプトを実行します