ブラウザーテスト出力

ブラウザテストを実行すると、mabl はアプリケーションの状態を理解し、課題のトラブルシューティングを支援するための情報を収集します。この記事では、異なる実行環境でのブラウザテスト出力から学べること、効果的なテストとデバッグのための実践的な影響について説明します。

• ローカルおよびCI実行の出力
• Playwright レポーターの出力
• クラウド実行の出力

ローカルおよびCI実行出力

ブラウザテストがローカルまたはCI環境で実行されると、mablは各ステップの成功/失敗のフィードバックを収集します。これらの結果をUnified Reporterを使用してmablアプリに公開できます。

ローカルおよびCI実行は詳細なテスト診断を収集しないため、開発サイクルの初期段階での迅速な反復中に素早く検証を得るのにより適しています。

Playwright レポーター出力

@mablhq/playwright-reporter パッケージをセットアップすると、Playwright テストスイートの結果を mabl に公開できます。Playwright の実行には、ステップの説明、ログ、結果、およびテストの最終状態のスクリーンショットが含まれます。

Playwright テスト結果を mabl に公開することは、mabl でのレポートを統合し、アプリケーションのより包括的なビューを作成するための優れた方法です。手順については、mabl での Playwright テストの表示に関するドキュメントを参照してください。

クラウド実行出力

クラウド実行は、あなたのウェブアプリケーションの最も堅牢な検証を提供し、以下の詳細を含みます。

• ステップのタイムライン
• スクリーンショット
• mabl アクティビティログ
• ネットワーク
• DOM
• パフォーマンス
• 変数
• コンソールログ
• アクセシビリティ
• ダウンロード可能なアーティファクト

クラウド実行は多くのテスト診断情報を収集するため、詳細なトラブルシューティングやより堅牢な検証に最適なオプションです。クラウド実行からの詳細な出力は、本番環境へのリリースを準備する際に特に価値があります。

ステップのタイムライン

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

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

スクリーンショット

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

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

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

mablアクティビティ

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

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

ネットワーク

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

DOM

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

mablは、ページ要素をターゲットとするステップにおいて、関連する要素を見つけた後、クリックやアサーションなどのステップアクションを実行する前にDOMをキャプチャします。

パフォーマンス

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

変数

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

コンソールログ

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

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

アクセシビリティ

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

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

各ステップのACTIONSメニューには、追加のステップレベルの実行アーティファクトが含まれており、ダウンロードできます。

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

ACTIONSメニューを開く

ステップトレース

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

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

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

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

HTTPアーカイブ (HAR)

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