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

ナビゲーション

はじめに​

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 を開き、[ネットワーク] パネルで [低速 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') イベントが発火します
  • ページは動的にロードされたスクリプトを実行します