RevComm Tech Blog

コミュニケーションを再発明し 人が人を想う社会を創る

DataDog Synthetic Testing を使ってE2Eテスト・外形監視を充実させよう

CI/CD Datadog

はじめに

Phone Divという部署でBackendを担当している中島です。

RevCommではMiiTelをはじめ、複数のマイクロサービスの外形監視をチームごとに行う必要があります。

今回は DataDog Synthetic Testing を利用したE2Eテスト・外形監視の実装、その運用について、知っていることをまとめました。テストの作り方から、Autifyとの違いなどにも触れてみたいと思います。

想定読者

  • DataDogによるE2Eテスト・外形監視に興味のある方
  • フロントエンド・バックエンド開発者
  • システムの保守担当者
  • Quality Assurance（QA）チームの方

DataDog Synthetic Testingを使ってみる

表題のE2Eテストや外形監視の作成は、DataDogの中の「Synthetic Monitoring & Testing」というサービスで利用可能です。

API Test を作る

「API Test」または「Multistep API Test」で作成できます。

API Testの方は一つのAPIに対するリクエストをテストする機能で、Multistep API Testの方は複数のAPIを連続的にテストする機能です。

それぞれ、「HTTP」だけでなく「gRPC」「SSL」「DNS」「WebSocket」「TCP」「UDP」「ICMP」などのプロトコルにも対応しているため、非常に幅広い用途で利用できることが分かります。

Multistep API Testは、例えば、最初のステップでHTTPリクエストを使って認証を通し、BearerなりJWTなりを取得して次のステップ以降でそれを用いてリクエストするなど、複数のAPIを利用するテストシナリオを検証するケースに対応しています。Multistep API Test

「Locations」というタブからサーバの実行環境は世界中のクラウドのうち、どこから実行できるか選択できます。世界的にサービスを展開している場合に、海外からだと挙動が変わる機能があっても、しっかりテストできることが分かります。

ただ、複数選択した場合、それらのテストは並列で実行され、それぞれのテスト実行がコストに繋がりますので、様々な地理的拠点から見え方が同じであるなら、どれか一つお好きな実行環境を選ぶことになると思います。

Locations

「Assertions」というタブから豊富なAssertion機能を設定できます。status codeの検証はもちろん、response body中の要素をjson pathを指定して取得・確認したり、最近実装されたJavaScript Assertion機能ではChaiを用いたAssertionを埋め込むこともできたりするようです。

Assertions

Browser Test を作る

ブラウザのE2Eテストを作成する場合、「Browser Test」を選択します。E2Eテスト作成機能は「Edit Test」「Edit Recording」「View Results」の3つのタブから構成されます。

Edit Test

「Edit Test」ではE2Eテストの実行環境や実行頻度などを設定できます。

Edit Test

  • 「Starting URL」にテストシナリオ開始時に利用するURLを指定します。この「Starting URL」を設定できる点が非常に便利で、一度テストを作ってしまえば、環境（開発環境、ステージング環境）ごとにこのURLを差し替えるだけでその環境でも同様のテストも動くようになります。これによって環境ごとにテストを用意する手間が省け、効率的にテストを作ることができます。
  • 「Browser & Devices」でブラウザについてはChrome、Edge、Firefoxの3つから、デバイスについてはLaptop、Tablet、Mobileから実行環境を選べます。
  • 「Scheduling & Alert Conditions」では実行間隔を設定でき、最短 5分・最長 1週間で選択することになります。

Edit Recording

「Edit Recording」では実際にテストする画面を触りながらテストを組み立てていきます。CSVやPDFなどファイルをフォームに設定するテストなども作成できます。

ただ、ブラウザのマイクやカメラに許可を与えるようにテストは正常に動作しなかったので、この点が少し残念な点でした。（2024年12月現在）

ブラウザテストのAssertionsではHTML要素を指定した結構細かいAssertや、特定の文字列がページに含まれるか、ファイルがダウンロードされるか、なども利用できます。

New Assertion Step

例えば、以下のようなAssertができることは確認しています。

  • 指定したHTML要素が存在する
  • 指定したHTML要素の状態（〜が含まれる、〜から始まる、など細かく指定可能）が正しい
  • 画面上に「XXX」という文字列が含まれる
  • 指定したラジオボタン、チェックボックスがchecked / uncheckedになっている

View Results

「View Results」では作成したテストの結果を見ることができます。

View Results

  • 過去の実行結果やFailした場合はどこのAssertionがコケたのかを確認できる
  • 各ステップごとの実行時間（Duration）、CLS（Cumulative Layout Shift）やLCP（Largest Contentful Paint）も確認することができる

結果を見る

システムの状態を一目で確認できるようにチームに関係するE2Eテストをダッシュボードにして、運用することにしました。

E2Eテストのダッシュボード

  • Widgetを自分で作成することで好きな統計が載せられる
    • 私のチームではCLS、LCPを自作して追加しました。
  • ブラウザ・環境・タグごとのテスト成功 / 失敗回数を一目で確認できる
  • 実行時間、CLS、LCPに時系列で変化があるかどうか確認できる

通知をする

基本的にDataDogのMonitorと同じ機能でチャットサービスへと通知を飛ばすことができます。

Slack Channelへの通知

今回はE2Eテストが失敗したらチームのSlack Channelに通知に飛ばすようにしました。

料金について

料金はAPIテストとブラウザテストによって異なります。以下のページを参考にしながら見積もりできるはずです。

www.datadoghq.com

注意点として、Synthetic Testingは25ステップ以内のシナリオを1回と見做し、25ステップを超えると2回テスト実行したと見做されるようです。

これを踏まえた上で、25ステップ以内テストシナリオ数を n 、1日何回実行するかを t とし、1ヶ月30日とすると以下の計算式でコストを見積もると以下のようになります。

monthly_cost =（n * t / 1000）* c * 30日

n: テストシナリオ数
t: 1日何回実行するか
c: 1000回あたりの価格。オンデマンド使用料が目安

例えば、1日1回 5シナリオ実行した場合はひと月あたりカフェのコーヒーくらいの料金になるでしょう。

Datadog Synthetic Testingの強み・弱み

E2EテストといえばAutifyが思い当たる方が多いと思いますが、2024年12月現在の調査結果に基づいてDataDog Synthetic Testingとの違いを紹介してみようと思います。

DataDogでは以下のことができます。

  • APIテストができる
    • あくまで私が触ってみた感触にはなりますが、DataDog Synthetic TestingはHTMLの要素やAPIまで検証したい開発者向き、Autifyは外部品質を担保したい組織向きの機能が充実しているものと思っています。DataDogのAssert機能の豊富さもそれゆえなのかもしれません。
  • 毎回のテスト実行で LCP、CLS など Core Web Vital が算出できる
  • 実行環境を細かく指定できる
    • 本記事の「Locations」画面を参照

Autifyでは以下のことができます。

  • E2Eテスト時のブラウザにデバイス使用許可を与えることができる
    • ブラウザにデバイス使用許可（マイク、カメラなど）を与えられるかどうか大きな違いでした。MiiTelのIP電話はマイクの使用が不可欠なサービスなので、DataDogで架電のE2Eテストが作れなかったのが残念でした。ただ、Autifyでも音声を入れたり動画を映したりすることはできないのでその点は注意してください。
  • 作成したテストシナリオを編集する際に、途中の画面から編集できる
    • DataDogでブラウザテストのシナリオを修正したい場合、操作を一からやり直すことになります。一方Autifyでは、シナリオの途中から編集することができます。
  • テストシナリオを複数組み合わせで実行できる
    • DataDogでは作ったテストシナリオのCloneはできるんですが、作ったシナリオを柔軟に組み合わせて使うことができないようです。

この辺りはDataDog、Autifyの強み・弱みがあるので、やりたいことに応じてツールを使い分けるのが良いと思いました。

感想

私個人としてはE2Eテスト実行のついでにCore Web Vitalが算出できるのが優れていると感じました。Webサービスはユーザやデータが増加するにつれて動作が遅くなることがあり、気がついた頃には原因が根深くなってしまいがちです。

DataDog Synthetic Testingでは作成したE2Eテストのダッシュボードを通して時系列でCore Web Vitalが確認できるので、外形監視には持ってこいのサービスだと思いました。

導入を検討される場合、本記事が参考になれば幸いです。