UI モード
はじめに
UIモードを使用すると、ウォッチモードを完備したタイムトラベル体験で、テストの探索、実行、およびデバッグを行うことができます。すべてのテストファイルはテストサイドバーに表示され、各ファイルを展開し、describeブロックを展開して、各テストを個別に実行、表示、監視、およびデバッグできます。テストを名前、プロジェクト（playwright.configファイルで設定）、@tag、または実行ステータス（passed、failed、skipped）でフィルタリングします。テストの完全なトレースを表示し、各アクションにカーソルを合わせて前後に移動して、各ステップ中に何が起こっていたかを確認します。また、特定の瞬間のDOMスナップショットを別のウィンドウにポップアウトして、デバッグエクスペリエンスを向上させることもできます。
UI モードの起動
UIモードを開くには、ターミナルで次のコマンドを実行します
npx playwright test --ui
テストの実行
UIモードを起動すると、すべてのテストファイルの一覧が表示されます。サイドバーの三角形アイコンをクリックして、すべてのテストを実行できます。名前の上にカーソルを置き、その横にある三角形をクリックして、単一のテストファイル、テストブロック、または単一のテストを実行することもできます。
テストのフィルタリング
テキスト、@tag、または passed、failed、skipped テストでテストをフィルタリングします。playwright.config ファイルで設定されているプロジェクトでフィルタリングすることもできます。プロジェクトの依存関係を使用している場合は、依存するテストを実行する前に、必ずセットアップテストを最初に実行してください。UIモードはセットアップテストを考慮しないため、最初に手動で実行する必要があります。
タイムラインビュー
トレースの上部には、ナビゲーションとアクションを強調表示するために異なる色を使用したテストのタイムラインビューが表示されます。各アクションのイメージスナップショットを表示するには、前後にカーソルを合わせます。アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用して、選択したアクションを増やすことができます。これらは「アクション」タブに表示され、すべてのコンソールログとネットワークログは、選択したアクションのログのみを表示するようにフィルタリングされます。
アクション
「アクション」タブでは、すべてのアクションに使用されたロケーターと、それぞれの実行にかかった時間を確認できます。テストの各アクションにカーソルを合わせると、DOMスナップショットの変化を視覚的に確認できます。時間を前後に移動し、アクションをクリックして検査およびデバッグします。「Before」タブと「After」タブを使用して、アクションの前後に何が起こったかを視覚的に確認します。
DOM をポップアウトして検査
DOMスナップショットの上にあるポップアウトアイコンをクリックして、DOMスナップショットを独自のウィンドウにポップアウトすると、デバッグエクスペリエンスが向上します。そこから、ブラウザの開発者ツールを開き、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の場合、ポートはデフォルトでアカウントからのみアクセス可能です。