ナビゲーション
はじめに
PlaywrightはURLへナビゲートしたり、ページ操作によって発生するナビゲーションを処理したりできます。
基本的なナビゲーション
ナビゲーションの最もシンプルな形式は、URLを開くことです。
// Navigate the page
await page.GotoAsync("https://example.com");
上記のコードはページをロードし、ウェブページがloadイベントを発火するまで待機します。`load`イベントは、スタイルシート、スクリプト、iframe、画像などのすべての依存リソースを含むページ全体がロードされたときに発火されます。
ページが`load`イベントの前にクライアントサイドのリダイレクトを行った場合、Page.GotoAsync()はリダイレクトされたページが`load`イベントを発火するまで待機します。
ページはいつロードされるのか?
最新のページでは、`load`イベントの発火後にも多数のアクティビティが実行されます。`load`イベントの発火後に、データを遅延ロードしたり、UIを構築したり、高コストなリソース、スクリプト、スタイルをロードしたりします。ページが「ロードされた」と判断する確実な方法はなく、それはページ、フレームワークなどによって異なります。では、いつページとのインタラクションを開始できるのでしょうか?
Playwrightでは、いつでもページとインタラクションを行うことができます。Playwrightは、ターゲット要素が自動的に操作可能になるまで待機します。
// Navigate and click element
// Click will auto-wait for the element
await page.GotoAsync("https://example.com");
await page.GetByText("Example Domain").ClickAsync();
上記のシナリオでは、Playwrightはテキストが表示されるまで待機し、その要素に対する残りの操作可能性チェックがすべてパスするまで待機してから、クリックします。
Playwrightは非常に高速なユーザーとして動作します。ボタンを認識した瞬間にクリックします。一般的には、すべてのリソースがロードされたかどうかなどを心配する必要はありません。
ハイドレーション
ある時点で、Playwrightがアクションを実行しても何も起こらないように見えるユースケースに遭遇することがあります。または、入力フィールドにテキストを入力してもそれが消えてしまうことがあります。その最も可能性の高い理由は、ページのハイドレーションが不十分であることです。
ページがハイドレートされるとき、まずページの静的バージョンがブラウザに送信されます。次に動的な部分が送信され、ページは「ライブ」になります。非常に高速なユーザーとして、Playwrightはページを認識した瞬間に操作を開始します。そして、ページ上のボタンが有効になっていても、リスナーがまだ追加されていない場合、Playwrightは自身の役割を果たしますが、クリックは効果がありません。
ページがハイドレーションの問題を抱えているか確認する簡単な方法は、Chrome開発者ツールを開き、ネットワークパネルで「低速3G」ネットワークエミュレーションを選択してページを再読み込みすることです。目的の要素が表示されたら、それを操作してみてください。ボタンのクリックが無視され、入力されたテキストがその後のページロードコードによってリセットされることがわかります。この問題の正しい解決策は、ハイドレーションが完了し、ページが完全に機能するようになるまで、すべてのインタラクティブなコントロールを無効にすることです。
ナビゲーションを待機する
要素をクリックすると、複数のナビゲーションがトリガーされることがあります。このような場合、特定のURLへのPage.WaitForURLAsync()を明示的に呼び出すことをお勧めします。
await page.GetByText("Click me").ClickAsync();
await page.WaitForURL("**/login");
ナビゲーションイベント
Playwrightは、ページに新しいドキュメントを表示するプロセスを**ナビゲーション**と**ロード**に分割しています。
**ナビゲーションは**ページのURLを変更するか、ページとのインタラクション(例:リンクのクリック)によって**開始されます**。ナビゲーションの意図は、例えば未解決のDNSアドレスにヒットした場合やファイルダウンロードに変換された場合など、キャンセルされることがあります。
レスポンスヘッダーがパースされ、セッション履歴が更新されると、**ナビゲーションはコミットされます**。ナビゲーションが成功し(コミットされ)た後にのみ、ページはドキュメントの**ロード**を開始します。
**ロード**には、ネットワーク経由で残りのレスポンスボディを取得し、解析し、スクリプトを実行し、`load`イベントを発火するまでが含まれます。
- `Page.Url`は新しいURLに設定されます
- ドキュメントコンテンツがネットワーク経由でロードされ、解析されます
- `Page.DOMContentLoaded`イベントが発火されます
- ページがいくつかのスクリプトを実行し、スタイルシートや画像などのリソースをロードします
- `Page.Load`イベントが発火されます
- ページが動的にロードされたスクリプトを実行します