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

ナビゲーション

概要​

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

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

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

# Navigate the page
page.goto("https://example.com")

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

注記

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

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

最近のページは、loadイベントが発行された後も多数のアクティビティを実行します。データは遅延ロードされ、UI が設定され、高負荷なリソース、スクリプト、スタイルがloadイベント後にロードされます。ページがloadedであるかどうかを判断する方法はありません。それはページ、フレームワークなどに依存します。では、いつインタラクションを開始できるのでしょうか？

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

# Navigate and click element
# Click will auto-wait for the element
page.goto("https://example.com")
page.get_by_text("example domain").click()

上記のシナリオでは、Playwright はテキストが可視になるのを待ち、その要素に対する残りの操作可能性チェックがパスするのを待ち、クリックします。

Playwright は非常に高速なユーザーとして動作します。ボタンが見えた瞬間にクリックします。一般的に、すべてのリソースがロードされたかどうかなどを気にする必要はありません。

ハイドレーション​

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

ページがハイドレーションされると、最初にページの静的バージョンがブラウザに送信されます。次に、動的な部分が送信され、ページが「ライブ」になります。非常に高速なユーザーとして、Playwright はページを見た瞬間にインタラクションを開始します。そして、ページのボタンが有効になっているにもかかわらず、リスナーがまだ追加されていない場合、Playwright はそのジョブを実行しますが、クリックは効果がありません。

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

ナビゲーションの待機​

要素をクリックすると、複数のナビゲーションがトリガーされる可能性があります。このような場合、特定の URL へのpage.wait_for_url()を明示的に行うことをお勧めします。

page.get_by_text("Click me").click()
page.wait_for_url("**/login")

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

ナビゲーションの開始は、ページ URL を変更するか、ページとインタラクションすること（リンクをクリックするなど）によって行われます。ナビゲーションの意図は、たとえば、解決されていない DNS アドレスにヒットした場合や、ファイルのダウンロードに変換された場合にキャンセルされる可能性があります。

ナビゲーションのコミットは、レスポンスヘッダーが解析され、セッション履歴が更新されたときに行われます。ナビゲーションが成功（コミット）した後でのみ、ページはドキュメントのロードを開始します。

ロードは、ネットワーク経由で残りのレスポンスボディを取得し、解析し、スクリプトを実行し、ロードイベントを発行することをカバーします。

  • page.url が新しい URL に設定されます
  • ドキュメントコンテンツがネットワーク経由でロードおよび解析されます
  • page.on("domcontentloaded") イベントが発行されます
  • ページはいくつかのスクリプトを実行し、スタイルシートや画像などのリソースをロードします
  • page.on("load") イベントが発行されます
  • ページは動的にロードされたスクリプトを実行します