Datadog Synthetic Monitoringのブラウザテストを使ってWeb監視

2021-02-07Datadog,Others

DatadogのSynthetic MonitoringのSynthetic Tests(ブラウザテスト)を利用して、Webサイトへのアクセス監視ができます。

Synthetic の監視(Datadog公式)
ブラウザテスト(Datadog公式)

ブラウザのレコーディング機能が実装されているため、コーディングを一切行うことなく、非常に簡単に設定できます。
テストを実行するとエラーの有無だけでなく、各画面のレスポンスタイムなども確認でき、手軽にサイトの状況を把握できます。

今回は、Synthetic Monitoringにあるブラウザテストを使用して、Webサイトへのアクセスからログイン、ログアウトまでの一連の流れを監視する設定の手順を確認します。

DatadogのSynthetic Tests(ブラウザテスト)の設定手順

Synthetic Tests(ブラウザテスト)の作成は非常に簡単です。
どのサイトに、どのブラウザで、どこからアクセスするか、また実行するシナリオなどの設定をGUIで行うだけです。

Synthetic Tests(ブラウザテスト)でテストの基本設定

UX Monitoringのメニューから設定を行います。
最初に、Synthetic Tests(ブラウザテスト)の基本設定を作成します。
今回は、feedlyへのログイン、ログアウトを例に手順を確認しています。

• • 今回設定した値(指定値以外はデフォルトを指定)
    • Starting URL：Web監視を開始するURL
      • https://feedly.com
    • Name：テスト名
      • Feedly
    • Browsers & Devices：テストを行うブラウザとアクセス元のリージョン
      • Chrome(Laptop Large)
      • Tokyo(AWS)

※検証目的での利用です。テストシナリオ作成手順確認のためのみに利用しています。継続的に利用することは不正アクセスと認識されることもありますので注意が必要です。

テストの基本設定手順
UX MonitoringのメニューでSynthetic Testsを選択します。 New Testを選択します。
Create a new synthetic testが表示されます。 New Browser Testを選択します。
設定画面が表示されるので、必要な値を入力します。 今回はfeedlyをサンプルとして設定を行います。
入力が完了したら、Save & Edit Recordingを選択します。

Google ChromeにDatadog test recorederの拡張機能をインストール

テストシナリオを作成するためには、ChromeにDatadogの拡張機能をインストールする必要があります。
Datadog test recorederをインストールします。
すでにインストールされている場合、この手順は必要ありません。

Google ChromeにDatadog test recorederの拡張機能をインストール
Add the Extensionを選択します。
拡張機能にDatadog test recorderが表示されます。 Chromeに追加を選択します。

ブラウザテストのシナリオをレコーディングする

ブラウザテストのレコーディングを開始します。
ブラウザ上でログインからログアウトまで操作することで、テストシナリオが自動的に作成されます。

ブラウザテストのレコーディング
Start Recordingを選択します。 続けてOpen in Popupを選択します。
ブラウザ上にStarting URLで設定したページが表示されます。 今回の場合は、feedlyのTopページが表示されます。 Loginボタンをクリック
Continue with Feedlyを選択します。 User IDとパスワードを入力して、ログインします。
ログアウトします。
Stop Recordingを選択します。 steps recordedの項目を確認すると、操作が記録されていることが分かります。 Save & Launch Testをクリックして、テストシナリオを保存します。

ブラウザテストを実行する　

ブラウザテストを実行します。
ブラウザテストは任意の間隔で実行できます。
Notify your teamを設定することで、テストが失敗した際にアラート通知を送ることも可能です。

ブラウザテストを実行
ブラウザテスト画面右上にあるRun Test Nowを選択します。 ブラウザテストが実行されます。
テストが完了すると、Sample Resultにテスト結果が表示されます。 画面遷移が正常に行われたかどうかや、レスポンスタイムなどが表示されます。
Test Resultsでテスト結果を確認できます。 過去テスト結果履歴も確認できます。

—広告—

最後に

今回は、DatadogのSynthetic Monitoring(ブラウザテスト)の設定手順について確認しました。

ブラウザのレコーディング機能が実装されているため、コーディングを一切行うことなく、非常に簡単に設定ができました。
テストを実行すると、エラーだけでなく各画面でのレスポンスタイムなども確認できるため、サイトの状況を容易に把握することができます。

引き続き、いろいろな機能を試してみたいと思います。

Datadogのライブプロセス(Live Process)の設定手順については、こちらで紹介しています。