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

ナビゲーション

はじめに​

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 を開き、ネットワークパネルで「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") イベントが発火される
  • ページが動的に読み込まれたスクリプトを実行する