UIモード
概要
UIモードでは、ウォッチモードを完備したタイムトラベル体験でテストを探索、実行、デバッグできます。すべてのテストファイルはテストサイドバーに表示され、各ファイルと記述ブロックを展開して、個別に各テストを実行、表示、監視、デバッグできます。テストは、名前、プロジェクト (playwright.config ファイルで設定)、@tag、または実行ステータス (成功、失敗、スキップ済み) でフィルタリングできます。テストの完全なトレースを確認し、各アクションの上で前後にホバーして、各ステップで何が起こっていたかを確認できます。また、デバッグ体験を向上させるために、特定の時点のDOMスナップショットを別のウィンドウにポップアウトすることもできます。
UIモードを開く
UIモードを開くには、ターミナルで次のコマンドを実行します
npx playwright test --ui
テストの実行
UIモードを起動すると、すべてのテストファイルの一覧が表示されます。サイドバーの三角形のアイコンをクリックすると、すべてのテストを実行できます。また、名前の上にカーソルを合わせ、その隣にある三角形をクリックすることで、単一のテストファイル、テストのブロック、または単一のテストを実行することもできます。
テストのフィルタリング
テキストまたは@tag、または成功、失敗、スキップされたテストでテストをフィルタリングします。また、playwright.config ファイルで設定されたプロジェクトでフィルタリングすることもできます。プロジェクト依存関係を使用している場合は、依存するテストを実行する前に、セットアップテストを最初に実行するようにしてください。UIモードはセットアップテストを考慮しないため、最初に手動で実行する必要があります。
タイムラインビュー
トレースの上部には、ナビゲーションとアクションを強調表示するために異なる色で表示されたテストのタイムラインビューが表示されます。前後にホバーして、各アクションの画像スナップショットを確認できます。アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用して選択されたアクションを増やすことができ、これらは「アクション」タブに表示され、すべてのコンソールログとネットワークログは選択されたアクションのログのみを表示するようにフィルタリングされます。
アクション
「アクション」タブでは、各アクションでどのロケーターが使用されたか、および各アクションの実行にどれくらいの時間がかかったかを確認できます。テストの各アクションの上にカーソルを合わせると、DOMスナップショットの変化を視覚的に確認できます。時間を前後に移動し、アクションをクリックして調査およびデバッグできます。「前」と「後」タブを使用して、アクションの前後で何が起こったかを視覚的に確認します。
DOMをポップアウトして検査する
DOMスナップショットの上にあるポップアウトアイコンをクリックすると、DOMスナップショットを独自のウィンドウにポップアウトして、より良いデバッグ体験を得ることができます。そこからブラウザのDevToolsを開き、HTML、CSS、コンソールなどを検査できます。UIモードに戻り、別のアクションをクリックしてポップアウトすると、2つを並べて簡単に比較したり、それぞれを個別にデバッグしたりできます。
ロケーターを選択
ロケーター選択ボタンをクリックし、DOMスナップショットの上にカーソルを合わせると、ホバー中に各要素のロケーターがハイライト表示されます。要素をクリックすると、ロケータープレイグラウンドが追加されます。プレイグラウンドでロケーターを修正し、修正したロケーターがDOMスナップショット内のロケーターと一致するかどうかを確認できます。ロケーターに満足したら、コピーボタンを使用してロケーターをコピーし、テストに貼り付けることができます。
ソース
テストの各アクションの上にカーソルを合わせると、そのアクションのコード行がソースパネルでハイライト表示されます。「VSCodeで開く」ボタンは、このセクションの右上にあります。ボタンをクリックすると、クリックしたコード行でVS Codeにテストが開かれます。
呼び出し
呼び出しタブには、実行にかかった時間、使用されたロケーター、厳格モードかどうかに加え、どのキーが使用されたかなど、アクションに関する情報が表示されます。
ログ
テストの完全なログを確認することで、Playwrightがビューへのスクロール、要素が可視化、有効化、安定化されるまでの待機、クリック、入力、キープレスなどのアクションの実行といった舞台裏で何を行っているかをよりよく理解できます。
エラー
テストが失敗した場合、「エラー」タブに各テストのエラーメッセージが表示されます。タイムラインにもエラーが発生した場所をハイライトする赤い線が表示されます。ソースタブをクリックして、エラーがソースコードのどの行にあるかを確認することもできます。
コンソール
ブラウザとテストの両方からのコンソールログを確認できます。コンソールログがブラウザから来たのか、テストファイルから来たのかを示すために、異なるアイコンが表示されます。
ネットワーク
「ネットワーク」タブには、テスト中に発生したすべてのネットワークリクエストが表示されます。さまざまなリクエストの種類、ステータスコード、メソッド、リクエスト、コンテンツタイプ、期間、サイズで並べ替えることができます。リクエストをクリックすると、リクエストヘッダー、レスポンスヘッダー、リクエストボディ、レスポンスボディなどの詳細情報が表示されます。
添付ファイル
「添付ファイル」タブでは、添付ファイルを探索できます。ビジュアルリグレッションテストを行っている場合、画像差分、実際の画像、期待される画像を調べてスクリーンショットを比較できます。期待される画像をクリックすると、スライダーを使用して画像を重ねて表示し、スクリーンショットの違いを簡単に確認できます。
メタデータ
「アクション」タブの隣には「メタデータ」タブがあり、ブラウザ、ビューポートサイズ、テストの実行時間など、テストに関する詳細情報が表示されます。
ウォッチモード
サイドバーの各テスト名の隣には目のアイコンがあります。アイコンをクリックするとウォッチモードが有効になり、テストに変更を加えると再実行されます。各テストの隣にある目のアイコンをクリックするか、サイドバーの上部にある目のアイコンをクリックすることで、複数のテストを同時に監視できます。
Docker & GitHub Codespaces
DockerおよびGitHub Codespaces環境では、ブラウザでUIモードを実行できます。エンドポイントをコンテナ外からアクセス可能にするには、0.0.0.0インターフェースにバインドする必要があります
npx playwright test --ui-host=0.0.0.0
GitHub Codespacesの場合、ポートは自動的に転送されるため、ターミナルのリンクをクリックすることでブラウザでUIモードを開くことができます。
静的ポートを使用するには、--ui-portフラグを渡すことができます
npx playwright test --ui-port=8080 --ui-host=0.0.0.0
--ui-host=0.0.0.0フラグを指定すると、UIモードがトレース、パスワード、シークレットとともにネットワーク内の他のマシンからアクセス可能になることに注意してください。GitHub Codespacesの場合、ポートはデフォルトであなたのアカウントからのみアクセス可能です。