見出し画像

Datadog Synthetic Browser Testの使い方を紹介

前回の記事を分割しました。

表題のとおり、Datadog Synthetic Browser Testの使い方を紹介したいと思います。この機能を活用したテストシナリオの作成までの流れ、及びテスト機能の概要を紹介していきます。
本テストツールに興味がある方はぜひご覧ください。

この記事から得られること

  • Datadog Synthetic Browser Testの使い方や機能のことを知れる

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

テストシナリオ作成までの流れ

テストシナリオ作成までの手順を紹介します。

1. Datadogにログイン > UX Monitoring > Synthetic Tests > New Test
2.「New Browser Test」を選ぶ
3.「Set your test details」を設定
テストの開始URL、テストシナリオ名、実行環境種別、タグ付けの設定など。
「Additional Tags」でタグを管理すればフィルター管理もできる。
「Browsers & Devices」はテストが必要な環境に絞る。
4.「Select locations」を設定
リソースが余っていればどこでも良い。
複数環境で実行するとその分料金がかかるため注意。
5.「Specify test frequency」を設定
毎日実行なら1days、週次で実行なら7daysを設定するなど。
6.「Define alert conditions」を設定
テスト失敗時のリトライ回数やアラート通知条件の設定。
「テスト失敗が何分間続いたらアラートを再通知するか」の設定。
7.「Configure the monitor for this test」を設定
アラート時に送信されるメールやSlackに送信する文章の設計。
タイトル、メンション、本文の設計ができる。
メールアドレスのメンションを設定するとメールに通知ができる。
Slackチャンネルのメンションを設定するとSlackに通知ができる。
複数のメンションを設定することも可能。
アラート未解決中の場合の定期リマインド送信の設定もできる。
8.「Set permissions」を設定
本テストシナリオへの権限を設定できる。
Role権限で指定が可能。

設定を終えたら「Save & Edit Recording →」を選択してスクリプトの作成画面に移る。初めての利用時はChrome拡張機機能(Datadog test recorder)をインストールする。

(初めて利用時の画面)

これでテストシナリオを作成できるようになる。後は画面内に用意された機能に従ってテストステップを組み立てるだけ。

「Start Recording」を使うことでキャプチャリプレイ機能が使えます。操作に合わせてテストステップの自動記録が可能なのでとても便利。開始・停止を使いながらうまく作成していくことができます。

キャプチャリプレイで記録後にテストステップをカスタマイズして組み立てることもできますし、自身で個別に作成することもできます。詳しくは公式ドキュメントがあるためそちらを参照。

(イメージ画像)

テスト機能

テスト機能について、本書でも簡単に紹介しておきます。
正しく使いこなせばここに記載のこと以外もできますので、実際に使ってみるのが良いと思います。

行える操作

  • Refresh this page(ページのリロード)

  • Go to email and click link(メールにアクセスしてリンクをクリック)

  • Follow this link(指定したURLに遷移)

  • Hover(マウスオーバー操作)

  • Press Key(キーボードの入力、EnterやEscapeなど)

  • Scroll(画面スクロール)

  • Wait(秒数指定で待機処理)

標準で利用できる変数

  • n 桁の数字列を生成

  • n 文字のアルファベット文字列を生成

  • n 文字の英数字文字列を生成

  • 日付の生成(テストが + または - n 単位で開始された UTC 日付に対応する値を使用して、Datadog の許容される形式のいずれかで日付を生成)

  • タイムスタンプの生成(テストが + または - n 単位で開始された UTC タイムスタンプに対応する値を使用して、Datadog の許容される単位のいずれかでタイムスタンプを生成)

サブテスト機能(他のテストシナリオを組み込む)

  • 他のテストシナリオを実行することができる。他のテストシナリオと組み合わせたテストシナリオを作成できる。また、複数セッションを利用したテストの実行も可能。実行できるパターンは以下のとおり。

    • メインブラウザ上で実行する。好きなステップの位置で他のテストシナリオを実行させることができるというもの。

    • メインブラウザとは別のサブテスト用のブラウザを立ち上げて実行する。以下の種類で実行が可能。

      • サブテストが終わったら次のステップに移る前に都度閉じる。このサブテストが終わったらメインブラウザの実行だけに戻るというもの。

      • サブテスト用に立ち上げたブラウザはサブテストの実行が終わったあともそのままにしておきメインブラウザの実行に戻る。サブテスト用のブラウザを3つまで立ち上げておき好きなステップで都度利用することができる。また、どのブラウザで実行するのかも指定ができる。メインブラウザと合わせて合計で4セッションのテスト操作が可能というもの。

統合テスト機能

  • HTTPリクエストの実行によるテストが行える。UIテストと組み合わせてシナリオを組むことも可能。つまり統合テストが行えるというもの。

  • Browser Testing(機能)とは別にAPI Testing(機能)を契約する必要がある。

    • API Testingの価格:10000回毎に5$

アサーション機能(テスト機能)

  • 要素のテスト

    • 要素のコンテンツをテストする

    • 要素の属性をテストする

    • 要素が存在することをテストする

  • コンテンツのテスト

    • アクティブなページに一部のテキストが存在しないことをテストする

    • アクティブなページにテキストが存在することをテストする

    • アクティブなページのURLのコンテンツをテストする

  • その他機能

    • メールが受信されたことをテストする(タイトルや本文のチェック)

    • カスタム JavaScript を使用してUIをテストする

    • ダウンロードしたファイルをテストする

  • テスト失敗時の動作設定

    • 「このステップが失敗したと宣言する前に、xx秒待ちます。」の秒数設定

    • このステップが失敗した場合は、テストを続行します

    • このステップが失敗した場合、テスト全体が失敗したと見なす

    • このステップのスクリーンショットをキャプチャしない

テスト結果の通知機能

  • メール通知

    • テストシナリオ作成時の「Configure the monitor for this test」で設定できる。

    • スクリプト実行後、結果に合わせて以下の様に通知される。

    • エラー発生時(FAILEDになったとき)

      • 赤のラインで通知。エラー内容とスクリプトへのリンクが送信される。

    • 修復時(FAILED→PASSEDになったとき)

      • 緑のラインで通知。スクリプトへのリンクが送信される。

エラー発生時(FAILEDになったとき)
修復時(FAILED→PASSEDになったとき)
  • Slack通知

    • メール通知設定と同じく、テストシナリオ作成時の「Configure the monitor for this test」で設定できる。

    • 事前に通知先のSlackチャンネルをIntegrationsから登録しておく必要がある。

    • これを行うことで「Configure the monitor for this test」設定のNotify your teamの連携先リストから選べるようになり設定できる。

      • Integrations>Slack>Add Channel>{連携したいチャンネル名}

    • スクリプト実行後、結果に合わせて以下の様に通知される。

    • エラー発生時(FAILEDになったとき)

      • 赤のラインで通知。エラー内容とスクリプトへのリンクが送信される。

    • 修復時(FAILED→PASSEDになったとき)

      • 緑のラインで通知。スクリプトへのリンクが送信される。

エラー発生時(FAILEDになったとき)
修復時(FAILED→PASSEDになったとき)

ネットワークエラーやコンソールエラーの検知

  • テストを実行することで、テストステップの実行に対するOK/NGの結果とは別で、ネットワークエラーやコンソールエラーを検知し、これを可視化してくれる。

  • エラー発生数や発生箇所の確認もできる。

以上、Datadog Synthetic Browser Testの紹介でした。
いかがでしたでしょうか。利用時の参考になれば幸いです。


この記事が気に入ったらサポートをしてみませんか?