ブラウザーテスト出力

ステップのタイムライン

ステップのタイムラインには、各テストステップが完了するまでにかかった相対時間が表示されます。これは、実行に時間が長くかかったテストステップを調べるのに役立ちます。テスト実行時間の最適化の詳細については、こちらをクリックしてください。

ステップのタイムラインのステップにカーソルを合わせる

スクリーンショット

スクリーンショットは、mablが特定のステップを実行する前のUIの状態を示しています。

プランで実行されるテストは、スクリーンショットを以前の実行のスクリーンショットと比較します。詳細については、ブラウザーテストでの視覚的変化の検出を参照してください。

現在のスナップショットとベースラインとの比較

ログ

ログには各ステップのアクティビティに関する詳細な情報が記録されているため、失敗したテストのトラブルシューティングに役立ちます。

• mablアクティビティ
• ネットワーク
• DOM
• パフォーマンス
• 変数
• コンソールログ
• アクセシビリティ

mablアクティビティ

[mablアクティビティ] タブには、mablとアプリケーションのやり取りがログ記録されます。ステップが特定のエレメントをターゲットにしている場合、mablアクティビティログにはエレメント履歴が記録されます。

ログのmablアクティビティの確認

ネットワーク

[ネットワーク] タブには、現在のステップの実行時に行われたネットワーク呼び出しが表示されます。このデータは、テスト実行時に発生したネットワークエラーをデバッグしようとする際に役立ちます。

DOM

DOMは、Document Object Modelの略であり、HTMLのプログラミングインターフェイスです。[DOM] タブの内容は、Webページをノードツリーとして表現しており、ステップの実行時にページ上に存在していたエレメントを特定するのに役立ちます。

パフォーマンス

[パフォーマンス] タブは、ユーザーがパフォーマンスやアプリケーションUIの読み込み速度をどのように認識するかを測定します。詳細については、スピードインデックスについてのガイドを参照してください。

変数

ステップで変数が使用されていた場合、[変数] タブには、そのステップで使用されていた変数とその値が表示されます。

コンソールログ

Chrome 実行の場合、コンソール ログ タブには次のログ ステートメントからのメッセージが表示されます:

• console.log()
• console.warn()
• console.info()
• console.error()

アクセシビリティ

アクセシビリティチェックの詳細な出力が、[アクセシビリティ] タブに表示されます。

ダウンロード可能なアーティファクト

各ステップの [アクション] メニューには、次のような、ダウンロード可能なステップレベルの実行アーティファクトが含まれます。

• スクリーンショット
• ステップトレース - ChromeとEdgeのみ
• DOMスナップショット
• HTTPアーカイブ (HAR) ファイル
• コンソールログ - Chromeのみ
• アクセシビリティチェックの結果

[アクション] メニューを開く

ステップトレース

ステップトレースは、mablがステップのタイムラインを記録する際に、ステップのタイムラインを取得するJSONファイルです。デバッグ時にステップトレースを使用すると、特定のステップで何が起きたかを確認することができます。

あるステップのステップトレースをダウンロードすると、次のアクションを実行してステップトレースを確認することができます。

1. Chrome DevToolsを開きます: 右クリック > [検証]
2. Chrome DevToolsの [Performance] タブをクリックします。
3. ダウンロードしたステップトレースJSONファイルをドラッグアンドドロップします。
4. タイムラインにマウスカーソルを合わせて、ステップのタイムラインを確認します。

Chrome DevToolsのステップトレースの確認

HTTPアーカイブ (HAR)

HTTPアーカイブ (HAR) ファイルは、現在のステップでテスト対象アプリケーションが行ったHTTPリクエストの順序付きリストで構成されています。各エントリには、リクエスト、レスポンス、IPアドレス、タイムスタンプ、およびリクエストのさまざまなコンポーネントのタイミング情報のセットが含まれています。