Synthetics Browser Tests 機能を使ってみた #datadog

こんにちは オペ部 園部です。

前回のAPI Tests に続いて、今回は Browser Tests（ブラウザ テスト） をやってみたいと思います。

やってみた

今回テストシナリオとして以下をやってみます。

1. 対象サイトへアクセス >>> 2. ユーザIDとパスワードを入力 >>> 3. ログイン >>> 4. トップページに特定の文言があることをチェック

以前、Selenium を使って監視していた思い出を噛み締めながらやっていきます。

テストサイトの構築

こちらは Amazon Lightsail で、　WordPressを構築します。

（詳細な作業内容は割愛します）

起動したインスタンスのEIPへアクセス

管理者サイトへログイン画面からログイン

管理者画面表示

Synthetics Browser Test 作成

Synthetics >>> New Check >>> New Browser Testを選択

Set your test details を入力

|画面|入力|補足| |:--:|:--:|:--:| |Starting URL|URLを入力|URL形式チェックあり| |Name|テスト名称|| |Select your tags|タグがあればプルダウンから選択| | |Devices|Laptop large,Tablet,Mobile Smallから選択| | |Locations|Canada Central(AWS),Ohio(AWS),Oregon(AWS), Sydney(AWS),Tokyo(AWS),Frankfurt(AWS),London(AWS) から選択|チェック拠点を選択できます| |How often should we run the test?|15m,30m,1h,6h,12h,1d,1wから選択|テスト間隔 ※API Test にある1mと5mはありません。|

Notify your team（通知） を入力

テストに Pass しなかった場合のアクションを設定します。

• 宛先として、ユーザーやインテグレーション サービスが指定可能
• メッセージをMarkdownで記述可能

Save Details and Record Test を選択

Add The Extension を選択し拡張機能を追加

Chromeに追加 を選択

拡張機能の追加が完了したらDatadog 設定画面に戻ります。

今回、サイトの仕様上以下のメッセージが表示されます。

サポートされたサイトであれば以下のように表示されます。

GUIで、テストシナリオを記録していきます。

Start Recording >>> Open in Popup を選択

テストシナリオ実施していきます。

Stop Recording を選択

実施した操作が記録されています。これで、当初のシナリオの１−３までが設定されています。

各項目を展開し編集することも可能です。

最後に、4. トップページに特定の文言があることをチェック を追加します。

Add New: >>> Assertion >>> Assert that some text is present anywhere on the page を選択

ここで、トップ画面に表示されている Dashboard という文言があるかをチェックする設定を追加

Value に値（今回は、Dashboard）を入力 >>> Apply >>> Save Recording >>> Save ant Quit を選択

Resume Test を選択

これでテストが開始されます。

テスト画面

設定したテスト内容状況を確認する画面へと遷移します。

各要素を見ていきます。

Properties

Test種別, TAGS, STARTING URL, STEPS, LOCATIONS, DEVICES, Message が表示されます。

History

Uptime, Time-to-interactive by location & device, Test duration by location & device が表示されます。

（今回、３拠点×３デバイス でテストを実施していています。）

Sample Results

テストが成功したケースと、失敗したケースをそれぞれステップごとに確認することが出来ます。

どこで失敗しているのか、またステップごとの所要時間も確認することが出来ます。

Test Events

こちらは、API Test 同様にイベントと実行結果が表示されます。

• Events

• Test Results

追加可能なアクション（項目）

画面から記録する以外にも今回追加した 4. トップページに特定の文言があることをチェック のように設定することが可能です。 追加可能なアクション（項目）は、 Assertion, Navigation, Hover, Variable となります。

詳細は 公式ドキュメントをご確認ください。

課金

気になるお値段ですが、実行されるテスト回数によって課金されるようです。

詳細は、こちら に記載されていますので、ご確認ください。

まとめ

テストシナリオが簡易に作成できるのは大きなメリットではないでしょうか。

API Testに比べるとAlert conditions が設定出来ないようなので、要件によって別方法と使い分けるのが良いかと思います。

また今回は検証していませんが、AI 機能により対象サイト・アプリケーションのボタンなどの要素変更を追従してくれる機能もあるようです。

（未検証のため、認識に誤りがあればご指摘ください）

いずれにしても運用を行う方には良いサービスなのではないでしょうか！