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

ナビゲーション

はじめに​

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

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

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

// Navigate the page
await page.goto('https://example.com');

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

注記

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

ページの読み込みはいつ完了しますか？​

最新のページでは、`load`イベントが発火した後も多くの処理が行われます。データは遅延読み込みされ、UIが構築され、高コストなリソース、スクリプト、スタイルが`load`イベントの発火後に読み込まれます。ページが「読み込まれた」と判断する明確な方法はなく、それはページやフレームワークなどに依存します。では、いつページとのインタラクションを開始できるのでしょうか？

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