概要
こんにちは、Offers を運営している株式会社 overflow のバックエンドエンジニアの shun です。今回は、Datadog Synthetics 上でブラウザテストを作成する際に利用できる Subtest についてご紹介します。
Datadog Syntheticsとは？
Datadog という SaaS の一機能で、主にブラウザテストを GUI で作成し、定期実行 or CI 経由の実行を可能にしてくれるものです。
ブラウザテストの作成を大量に行う際、当然メンテナンスコストもかかってきますが、今回ご紹介する Subtest を用いると、比較的メンテナンスがしやすい形になります。
Subtestとは？
簡潔にいうと、一度作成したブラウザテストを他のテスト上でも使い回せるようにComponent化できる 機能です。フロントエンドのように Props 設計なるものは考慮不要ですが、単一責任の原則は意識すべきです。
Subtestの使い方
非常に簡単で、以下のステップで適用可能です。
- 再利用可能なブラウザテストを決定する
- 再利用可能なブラウザテストを作成する
- 再利用可能なブラウザテストを用いて、メイン機能のブラウザテストを作成する
予想以上に抽象的な手順となってしまったので、1 つずつ説明いたします。
1. 再利用可能なブラウザテストを決定する
私個人、様々な機能のブラウザテストを作成してきましたが、主に以下のブラウザテストは少なくとも 再利用可能 と思っています。
- ログイン機能
- サインアップ機能
- ログアウト機能
例として、「質問投稿機能」 のブラウザテストを設計してみます。
- Step1. サインアップ（情報入力〜登録ボタンクリック）
- Step2. トップ画面から「新規投稿ボタン」をクリック
- Step3. 新規投稿画面へ遷移すること
- Step4. 新規投稿画面にて、タイトルを 50 文字を超えた値で入力
- Step5. バリデーションエラーメッセージが「hogehoge」とリアルタイムで表示されること
- Step6. 新規投稿画面にて、タイトルを 50 文字以下で入力
- Step7. バリデーションエラーがリアルタイムに消えること
- Step8. ...
- Step9.「投稿ボタン」クリック
- Step10. Top ページへ自動で遷移し、リストの一番上に自分の質問が表示されていること
本当にテストしたい機能のブラウザテスト は上記 Step のうち Step2 以降の認識です。ですが Step1 のサインアップ処理を通過しないと行いたいテストができない状態です。毎度サインアップのために情報を入力して登録ボタンを押すまでポチポチ動作を記憶させるのは面倒です。
そこで活躍するのが今回ご紹介する Subtest です。今回は、Step1 のサインアップ機能(情報入力〜登録ボタンクリック)を Subtest として作成することに決定します。
2. 再利用可能なブラウザテストを作成する
早速サインアップ機能の Subtest を作成していきます。作成手順としては特別なことはなく、通常のブラウザテストと同様に作成が可能です。
基本的なブラウザテストの作成方法については、弊社の taiga が以前 Datadog Synthetics Test 導入フロー | Offers Tech Blog という記事を公開していますのでそちらをご参照いただければと思います。
サインアップ機能のブラウザテスト（Subtest）を作成後、テスト一覧に以下のように追加されます。
3. 再利用可能なブラウザテストを用いて、メイン機能のブラウザテストを作成する
サインアップ機能の Subtest ができたので、先ほど例に挙げた 「質問投稿機能」 のブラウザテストを作成してみます。
左側のメニューや、ページ上部の「Start Recording」などを用いてブラウザテストを作成していきますが、今回は左側のメニューの内「Subtest」をクリックします。
その後、テキストのインプット欄が表示されるので先ほど作成したサインアップ用の Subtest につけた名前を検索し選択します。
選択が完了したら、「Add Subtest」をクリックすることで Subtest を Step1 として追加ができます。この次のステップ以降は、通常通りトップ画面からテストしたいブラウザテストを設計通りに実行・レコーディングさせるだけです。
完全ではないですが、成果物としては以下のような形になります。
実際にSubtest運用を開始して思う現状の所感
良い点
- Subtest であるサインアップ機能自体に修正が入った場合、1 つのサインアップ Subtest を修正することでサインアップ Subtest を使って作成されたブラウザテスト全てに修正が適用されるため、メンテナンスが非常に楽になるので良い
- 1 つのブラウザテストの Step 数が肥大化することを防げるので、仕様変更に伴うブラウザテストの修正が楽になったので良い
注意が必要な点
- Subtest 自体で 1Step としてカウントされるため、1Step あたりのタイムアウト時間の設定を考慮する必要があること
- cli 経由で実行する際、タイムアウトの設定を 120sec とかにしておくと一旦はタイムアウト起因のブラウザテスト落ちを防げます
- Subtest の中でも Subtest は利用できるが 2 階層までと決まっていること（公式Doc参照）
まとめ
今回は、Datadog Synthetics の Subtest なるものをご紹介いたしました。品質保証することに工数がかかることは致し方ないですが、なるべく無駄なメンテナンスコストは削減した方が円滑なスループットにつながりますので、Datadog Synthetics を利用している方は、ブラウザテストの量が増える前に Subtest の設計することをお勧めします。
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion