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