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

ナビゲーション

はじめに​

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

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

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

// Navigate the page
await 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
await page.goto('https://example.com');
await page.getByText('Example Domain').click();

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

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

ハイドレーション​

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

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

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

ナビゲーションを待つ​

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

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

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

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

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

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

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