トレースログを利用したデバッグ

このページでは、Autify から取得したデバッグトレースログを使用して、Playwright Trace Viewer でテストの分析とデバッグを行う方法について説明します。

Trace Viewerを利用するためには、Autify のテスト結果ページからデバッグトレース（.zip ファイル）をダウンロードしておく必要があります。このファイルは、設定で「デバッグトレース」が有効になっている場合にテスト結果画面より取得できます。
ファイルの取得方法について詳しくは、こちらをご覧ください：カスタマーサポートへのお問い合わせ方法

Playwright Trace Viewer とは？

Playwright Trace Viewerは、Playwrightが提供する、テストの実行をステップバイステップで調査できるツールです。Autify Nexusは内部で Playwright を使用しているため、生成したデバッグトレースログをこのビューアで分析できます。

ビューアは、完全な視覚的タイムライン、ネットワークログ、コンソールメッセージ、および各アクションの DOM スナップショットを提供し、失敗の根本原因を特定するのに役立ちます。

Trace Viewer を開く方法

トレースファイルは、Web ブラウザで直接開く方法と、ご自身のコンピュータ上でコマンドを実行して開く方法の2種類があります。

ブラウザで開く方法

これは最も手軽な方法です。

Web ブラウザで https://trace.playwright.dev/ にアクセスします。
ページにデバッグトレースの .zip ファイルをドラッグ＆ドロップするか、ファイル選択ダイアログから選択します。
ビューアがブラウザ内で起動し、トレースの分析を開始できます。

トレースファイルには、テスト中に表示された画面や入力データがすべて含まれます。
trace.playwright.dev を使用する場合、ファイルは お使いのブラウザ内でのみ処理され、サーバーにアップロードされることはありませんが、機密性の高い情報を含むトレースを分析する場合は次に説明する「ローカルで開く方法」も併せてご確認ください。

ローカルで開く方法

この方法は、コマンドラインインターフェイス（macOS のターミナル、Windows のコマンドプロンプト/PowerShell など）を使用します。

お使いのコンピュータに Node.js（npx を含む）がインストールされている必要があります。

ビューアをローカルで起動するには、次の手順に従います。

コンピュータのターミナルアプリケーションを開きます。
.zip 形式のデバッグトレースファイルを保存したディレクトリに移動します。cd (change directory) コマンドで移動できます。
- 例: cd ~/Downloads
以下のコマンドを実行します。[your-file-name].zip は、実際のトレースファイル名に置き換えてください。
```
npx playwright show-trace [your-file-name].zip
```

このコマンドにより、必要なコンポーネントがダウンロード（またはローカルのものが使用）され、新しいブラウザウィンドウで Trace Viewer が開きます。

Trace Viewer のインターフェースについて

ビューアは、いくつかの主要なセクションに分かれています。

以下で紹介する機能や内容が実際の画面と異なる場合があります。

スナップショット（中央パネル）

これは主要な視覚コンポーネントです。テスト実行時にブラウザがどのように見えていたかを表示します。

Action: デフォルトのビューで、アクション対象の要素がハイライトされた状態のページスナップショットが表示されます。
Before: アクションが実行される前のページスナップショットです。要素が存在していたか、正しい状態だったかを確認するのに役立ちます。
After: アクションが完了した後のページスナップショットです。
Pick Locator: スナップショット上をクリックして、任意の要素の Playwright ロケータを確認できるインタラクティブなツールです。
Open Snapshot: パネルの右上にあるボタンをクリックすると、スナップショットを新しいタブで開くことができます。開いたタブでは、ブラウザの開発者ツールを使用して、DOMの構造や状態を確認できます。

アクションタイムライン（左パネル）

このパネルには、クリック、テキスト入力、ページナビゲーションなど、テスト中に実行されたすべてのアクションが一覧表示されます。

失敗したアクションは赤色でハイライトされます。
任意のアクションをクリックすると、そのステップに対応するスナップショットが表示されます。
任意のアクションをダブルクリックすると、タイムラインがそのアクションの区間に連動してハイライトされ、詳細パネル（Console、Networkなど）もそのアクションに関連する情報のみにフィルタリングされます。

タイムライン（上部パネル）

このパネルには、テスト実行全体のタイムラインが表示されます。

タイムライン上の任意の箇所をクリックすると、その箇所に対応するスナップショットが表示されます。
タイムライン上の任意の区間を選択すると、その区間のアクションタイムラインが表示され、下部の詳細パネル（Log、Networkなど）もその区間に関連する情報のみにフィルタリングされます。

詳細（下部パネル）

このパネルには、選択したアクションやタイムラインに関する詳細な技術情報が表示されます。

Call: 実行された内部の Playwright コマンドを表示します。
Log: アクション実行中に Playwright が裏側で行っている処理を表示します。
- 例: 要素が 表示されるのを待機している、有効化されるのを待機している、安定するのを待機しているなど
Errors: 選択したアクションの実行中に発生したエラーを表示します。
Console:ブラウザコンソールメッセージ（console.log、エラー、警告）を表示します。
Network: ネットワークリクエスト（XHR、Fetch）を表示します。リクエストをクリックすると、そのヘッダー、リクエストボディ、レスポンスを調査できます。

テスト失敗時の調査手順

テストが失敗した場合、以下のような手順で失敗の原因を調査します。

失敗アクションとスナップショットの確認

まず、何が起きたのかを視覚的に確認します。

失敗アクションの選択: 左側の Actions パネルで、赤色でハイライトされているステップをクリックします。
スナップショットの確認: 中央パネルで選択したアクション付近のスナップショットを確認し、意図した画面での操作かどうか確認します。期待していたページと違う、予期しないポップアップが表示されている、ローディング画面のままである、などを確認します。
操作対象要素の確認: スナップショットでは、操作対象の要素やクリック箇所がハイライトされます。意図する要素に対して正しくアクションが実施されているかどうかを確認します。
また、Pick Locator タブを使い、ハイライトされた要素のロケータが、テストで想定しているものと一致しているか確認します。

詳細情報のドリルダウン

スナップショットから原因が特定できない場合には、詳細パネルで原因を探ります。

アプリケーションエラーの調査:
- Consoleタブを開き、失敗したアクションの直前で、アプリケーションにてエラーが発生していないか確認します。
Playwright の内部動作の確認:
- Log タブを開き、要素のステータス(操作・可視性)がアクションを妨げていなかったかなどを確認します。
ネットワーク問題の調査:
- Network タブを開き、APIリクエストが失敗（ステータス 4xx や 5xx）していないか、レスポンスが遅延していなかったかなど、ネットワークに起因する問題がなかったかを確認します。リクエストをクリックすれば、サーバーからの具体的なレスポンス内容も調査できます。
DOM構造の調査:
- 対象の要素が想定通りでない場合、中央パネル右上のOpen Snapshotボタンをクリックします。
- スナップショットが新規タブで開くため、ブラウザの開発者ツールを起動し、DOMの構造を詳細に調査します。