概要

Browser Tests は、Datadog がお客様の Web アプリケーション上で実行するシナリオです。これらは、世界中の複数のロケーションから、複数のブラウザやデバイスを使用して、設定可能な間隔で定期的に実行されます。これらのテストは、アプリケーションが稼働してリクエストに応答していること、およびシナリオで定義された条件が満たされていることを検証します。

テスト構成

以下のいずれかのオプションを使用してテストを作成できます。

テンプレートからテストを作成する

1. 事前入力されたテンプレートのいずれかにカーソルを合わせ、View Template をクリックします。これによりサイドパネルが開き、Test Details、Alert Conditions、Steps、およびオプションで Variables を含む、事前入力された構成情報が表示されます。
2. +Create Test をクリックして構成ページを開くと、事前入力された構成オプションを確認および編集できます。表示されるフィールドは、ゼロからテストを作成する場合に使用できるものと同一です。
3. 右上隅の Save & Quit をクリックして、Browser Test を送信します。
   
   

ゼロからテストを作成する

1. テンプレートをクリックして、新しい Browser Test をゼロから開始します。
2. Starting URL を入力します: ブラウザテストがシナリオを開始する URL です。
3. name を追加します: ブラウザテストの名前です。
4. environment and additional tagsを選択します: ブラウザテストに付随する env や関連タグを設定します。<KEY>:<VALUE>形式を使用して、特定の <KEY> に対する <VALUE> でフィルタリングします。

5. browsers and devicesを選択します: テストを実行するブラウザ (Chrome、Firefox、Edgeなど) およびデバイス (Laptop Large、Tablet、Mobile Smallなど) です。

   • 大型ノートパソコンデバイスの場合、寸法は 1440 ピクセル × 1100 ピクセルです。
   • タブレットデバイスの場合、寸法は 768 ピクセル × 1020 ピクセルです。
   • 小型モバイルデバイスの場合、寸法は 320 ピクセル × 550 ピクセルです。

6. managed and private locations を選択します: Datadog が管理する世界中のロケーションのリストから選択するか、プライベートロケーションを作成して、カスタムロケーションやプライベートネットワーク内からブラウザテストを実行します。

   注: Continuous Testing Tunnelを使用して、ローカル開発環境や CI/CD パイプラインでテストをトリガーし、内部環境をテストすることもできます。

7. test frequencyを設定します: 間隔は 1 分ごとから週 1 回まで選択できます。

8. Save & Edit Recording をクリックして、Browser Test を送信します。

ロケーション

Datadog’s out-of-the-box managed locations allow you to test public-facing websites and endpoints from regions where your customers are located.

AWS:

GCP:

Azure:

The Datadog for Government site (US1-FED) uses the following managed location:

スニペット

新しい Synthetic Monitoring ブラウザテストを設定する際、これらのオプションを手動で選択する代わりに、スニペットを使用してデバイスやリージョンを自動的に入力します。以下のスニペットが利用可能です。

• Screen sizes: 特定の画面サイズで、ブラウザ間でブラウザテストを自動的に実行します。

  • Large
  • Tablet
  • Mobile

• Multi-region check: 3 つの主要な地理的リージョン (AMER、APAC、EMEA) のそれぞれのロケーションに対して、Web サイトを自動的にテストします。
  
  

詳細オプション

Create local variables

To create a local variable, click + All steps > Variables. You can select one of the following available builtins to add to your variable string:

{{ numeric(n) }}

Generates a numeric string with n digits.

{{ alphabetic(n) }}

Generates an alphabetic string with n letters.

{{ alphanumeric(n) }}

Generates an alphanumeric string with n characters.

{{ date(n unit, format) }}

Generates a date in one of Datadog’s accepted formats with a value corresponding to the UTC date the test is initiated at + or - n units.

{{ timestamp(n, unit) }}

Generates a timestamp in one of Datadog’s accepted units with a value corresponding to the UTC timestamp the test is initiated at +/- n units.

{{ uuid }}

Generates a version 4 universally unique identifier (UUID).

{{ public-id }}

Injects the Public ID of your test.

{{ result-id }}

Injects the Result ID of your test run.

To obfuscate local variable values in test results, select Hide and obfuscate variable value. After you have defined the variable string, click Add Variable.

Apply filters to variable values

When you reference a variable, you can transform its resolved value by appending a filter with a pipe (|). Use the syntax {{ VARIABLE_NAME | filter }} anywhere a variable is accepted, such as the URL, request body, headers, and assertions. The following filters are available:

{{ VARIABLE_NAME | urlEncode }}

URL-encodes the variable’s value. For example, hello world becomes hello%20world.

{{ VARIABLE_NAME | urlDecode }}

URL-decodes the variable’s value. For example, hello%20world becomes hello world.

{{ VARIABLE_NAME | base64Encode }}

Base64-encodes the variable’s value. For example, hello becomes aGVsbG8=.

{{ VARIABLE_NAME | base64Decode }}

Base64-decodes the variable’s value. For example, aGVsbG8= becomes hello.

Filters apply to both local and global variables. You can apply one filter per reference, and filter names are case-sensitive.

グローバル変数を使用する

グローバル変数 (Settingsで定義)は、ブラウザテストの詳細の Starting URL および Advanced Options、ならびにテスト記録で使用できます。

利用可能な変数を一覧表示するには、

• ブラウザテストの詳細で、目的のフィールドに「{{」と入力します。

• ブラウザテストのレコーダーで、テストに変数をインポートしてから、目的のフィールドに「{{」と入力するか、アプリケーションに変数を挿入して使用します。

ブラウザテストの記録での変数の使用については、ブラウザテストのステップを参照します。

アラート条件を定義する

アラート条件をカスタマイズして、テストが通知アラートを送信する状況を定義できます。

アラートルール

アラートは、N ロケーションのうち、いずれか n か所で X 分間アサーションが失敗した場合に送信されます。このアラートルールでは、通知を送信する前に、テストがどのくらいの時間、また何か所のロケーションで失敗する必要があるかを指定できます。

アラートは、次の 2 つの条件が満たされた場合にのみ送信されます。

• 過去 X 分間に少なくとも 1 つのロケーションで失敗（少なくとも 1 つのアサーションが失敗）が発生した。
• 過去 X 分間のいずれかの時点で、少なくとも N か所のロケーションで失敗が発生した。

失敗した場合、ロケーションが失敗とマークされる前に X 回再試行します。これにより、ロケーションが失敗と見なされるまでに必要な連続したテスト失敗の回数を定義できます。デフォルトでは、失敗したテストを再試行する前に 300ms の待機時間があります。この間隔は API で設定できます。

高速再試行

テストが失敗した際、高速再試行を使用すると、失敗とマークする前に Y ミリ秒後に X 回テストを再試行できます。再試行間隔をカスタマイズすることで、誤検知を減らし、アラートの精度を向上させることができます。

ロケーションの稼働時間は再試行完了後の最終的なテスト結果に基づいて計算されるため、高速再試行の間隔は合計稼働時間グラフの表示に直接影響します。合計稼働時間は設定されたアラート条件に基づいて計算され、その合計稼働時間に基づいてアラートが送信されます。

Downtimes

To pause test execution during planned maintenance windows, select an existing Scheduled downtime in the Downtimes section. The test automatically pauses during the downtime’s scheduled time slots.

Note: You cannot create a new downtime from the test creation form. To create one, navigate to Settings > Downtimes.

テストモニターを設定する

アラートは、設定されたアラート条件に従って送信されます。このセクションを使用して、チームへのメッセージの内容と送信方法を定義します。

1. ブラウザテストの message を入力するか、事前入力されたモニターメッセージを使用します。このフィールドでは標準の Markdown 形式が使用でき、以下の条件変数がサポートされています。

   条件変数	説明
   {{#is_alert}}	Show when the monitor alerts.
   {{^is_alert}}	Show unless the monitor alerts.
   {{#is_recovery}}	Show when the monitor recovers from alert.
   {{^is_recovery}}	Show unless the monitor recovers from alert.
   {{#is_renotify}}	Show when the monitor renotifies.
   {{^is_renotify}}	Show unless the monitor renotifies.
   {{#is_priority}}	Show when the monitor matches priority (P1 to P5).
   {{^is_priority}}	モニターが優先度 (P1〜P5) に一致しない場合に表示します。

   Notification messages include the message defined in this section and information about the failing locations. Pre-filled monitor messages are included in the message body section:

   For example, to create a monitor that iterates over steps extracting variables for browser tests, add the following to the monitor message:

   {{!すべての成功したステップにわたる抽出変数を一覧表示します }}
   # 抽出された変数
   {{#each synthetics.attributes.result.steps}}
   {{#if extractedValue}}
   * **名前**: `{{extractedValue.name}}`
   **値:** {{#if extractedValue.secure}}*難読化済み (値は非表示)*{{else}}`{{{extractedValue.value}}}`{{/if}}
   {{/if}}
   {{/each}}
   

2. Choose team members and services to notify.

3. Specify a renotification frequency. To prevent renotification on failing tests, check the option Stop re-notifying on X occurrences.

4. Click Save & Start Recording to save your test configuration and record your browser steps.

For more information, see Synthetic Monitoring notifications.

Record your steps

Tests can be recorded from Google Chrome. To record your test, download the Datadog Record Test extension. Because Microsoft Edge is Chromium-based, you can also install the Chrome extension in Edge after you turn on Allow extensions from other stores. See Microsoft’s guide to adding extensions from other stores for instructions.

You can switch tabs in a browser test recording to perform an action on your application (such as clicking on a link that opens another tab) and add another test step. Your browser test must interact with the page first (through a click) before it can perform an assertion. By recording all of the test steps, the browser test can switch tabs automatically at test execution.

1. 必要に応じて、ページ右上の Open in a pop-up を選択して、テストの記録を別のポップアップウィンドウで開くことができます。これは、アプリケーションが iframe 内での表示をサポートしていない場合や、記録時のサイズ調整の問題を回避したい場合に便利です。Incognito mode でポップアップを開いて、既存のブラウザのログインセッションや Cookie などの影響を受けないクリーンなブラウザからテストの記録を開始することもできます。

2. オプションで、ブラウザテストからステップの記録を実行する際に、Datadog が RUM データを自動的に収集するように設定できます。詳細については、RUM とセッションリプレイの詳細を確認を参照します。

3. Start Recording をクリックして、ブラウザテストの記録を開始します。

4. 監視したいユーザージャーニーに沿ってアプリケーションをクリックしていくと、操作が自動的に記録され、左側のブラウザテストシナリオ内にステップとして作成されます。

5. 自動的に記録されたステップに加えて、左上隅にあるステップを使用してシナリオを充実させることもできます。

   Datadog では、ブラウザテストの最後にアサーションを追加して、ブラウザテストで実行されたジャーニーが期待どおりの状態になったことを確認することを推奨しています。

6. シナリオが完了したら、Save and Launch Test をクリックします。

ステップをリプレイする

ブラウザテストの 1 つ以上のステップをブラウザ上で直接再実行するには、Datadog Record Test extensionをダウンロードしてください。

ステップリプレイ機能は、個々のステップのデバッグ、ブラウザテストの編集時に適切なアプリケーション状態に到達すること、およびテストを保存する前にフロー全体を確認することに役立ちます。

注: ステップリプレイは、条件 (ブラウザバージョン、ネットワーク、ユーザーエージェント、ログイン状態) や制限が異なるため、Synthetic Monitoring のテスト実行とは動作が異なる場合があります。

ステップリプレイの使用方法

ステップをリプレイするには、以下の 3 つの方法があります。

1. 単一ステップのリプレイ: 単一のステップを再実行します。

ステップにカーソルを合わせ、再生ボタンをクリックして、このステップのみをリプレイします。

2. すべてのステップをリプレイ: レコーダーで定義された一連のステップ全体を実行します。

ステップリストの上部にある「すべてのステップをリプレイ」ボタン (⏩︎) をクリックして、すべてのステップをリプレイします。

3. 選択したステップをリプレイ: ステップリストで選択したステップの一部を実行します。

リプレイしたいステップを選択し、ステップリストの上部にある「選択したステップをリプレイ」ボタン (⏩︎) をクリックします。

ステップリプレイ機能のサポート

以下の表は、ステップリプレイでサポートされているブラウザテストのステップタイプをまとめたものです。

ステップリプレイでサポートされていないステップタイプ

デバッガーの権限

完全な Synthetic Monitoring のテスト実行に可能な限り近づけるため、JavaScript ベースのステップやキーストロークのシミュレーションなど、一部のステップをリプレイするにはデバッガーの権限が必要です。

拡張機能がデバッガーの権限を必要とするバージョンに初めて更新される際、権限のリクエストが表示され、承認されるまで拡張機能は無効になります。

3 つの点 メニューをクリックして権限を許可します。

権限

デフォルトでは、Datadog Admin および Datadog Standard ロールを持つユーザーのみが、Synthetic ブラウザテストの作成、編集、削除を行えます。Synthetic ブラウザテストの作成、編集、削除のアクセス権を取得するには、ユーザーをこれら 2 つのデフォルトロールのいずれかにアップグレードしてください。

カスタムロール機能を使用している場合は、synthetics_read および synthetics_write 権限を含むカスタムロールにユーザーを追加してください。

アクセスを制限する

きめ細かなアクセス制御を使用して、ロール、チーム、または個々のユーザーに基づいてテストへのアクセスを制限します。

1. フォームの権限セクションを開きます。
2. Edit Access をクリックします。

3. Restrict Access をクリックします。
4. チーム、ロール、またはユーザーを選択します。
5. Add をクリックします。
6. それぞれに関連付けるアクセスレベルを選択します。
7. Done をクリックします。

参考資料

お役に立つドキュメント、リンクや記事:

Browser Tests の開始方法ドキュメント Synthetic テストモニターについて学ぶドキュメント Synthetic Monitoring のバージョン履歴ガイド Datadog Learning Center: Synthetic Browser Testing の開始方法LEARNING CENTER エンドツーエンドテストを作成するためのベストプラクティスブログ Datadog Synthetic Monitoring によるユーザー体験全体を通じたトラブルシューティングの簡素化ブログ Datadog を使用してクライアントのブラウザテストを拡張する手助けをした方法ブログ Terraform を使用した Synthetic Browser Tests の作成と管理外部サイト