トラストハブ（以下、弊社）では、ここ一年は開発生産性を向上させるための取り組みを増やしており、デプロイ頻度も増えているので、動作チェックのコストも上がってきているという課題がありました。
少し前までは、弊社サービスの開発ではフロントエンドの自動テストが用意されていませんでした。弊社が提供するClove, Cloveオリパは高頻度で購入のリクエストが飛んできており、もしサービスが停止すると大きな損失となるため、動作チェックは慎重に行う必要があります。
そこで、なるべく動作チェックのコストを下げることで、開発生産性向上と開発者の安心感を得るための取り組みとして、ブラウザE2Eテストを導入することにしました。
ブラウザE2Eテストを用意する上での課題
どんなE2Eテストも、やがてメンテナンスが行き届かなくなるという課題を抱えていると思います。
そうならないためにも、各自でのテスト環境の構築や修正に時間がかからないことが大事だと考え、コードでテストを実行するのではなく、ブラウザ上でGUIで操作してテストを実行するサービスを探しました。
また、テストケースを絞ることも大事です。網羅的にテストしようとするのは大変なので、新規登録や、サービスの肝となるアクションである課金導線などだけでも、動かなくなったときにすぐに気づけるようにしようと思いました。
私たちが実現したいテストケース
サービスのブラウザテストを行う際には、何はともあれサービスにログインする必要があります。
弊社が運営するCloveというサービスでは、メール認証を用いた新規登録を行なっているため、テスト中に送られたメール内のリンクもチェックする必要があります。
テスト用にメール認証をスキップするということも検討しましたが、自分の過去の経験として、依存しているpackageのアップデートで新規登録導線が動作しなくなったことがありました。安全のためにメールのリンクを含めた動作も保証したいと考えました。
ブラウザE2Eテスト用のサービスについて
ブラウザE2EテストはAutifyやmablのようなサービスが存在しており、メールを含めたブラウザテストもできそうでした。しかしこの二つのサービスは料金プランが公開されておらず、問い合わせをする必要があります。
上記の2つ以外で、メールを含めたブラウザテストができるサービスとして、Datadog Synthetics Testsがあります。Datadogは料金が公開されており、クレジットカードを登録することですぐに使い始めることができます。
すでに弊社ではDatadogの他の機能を使っていたのもあり、まずは小さくトライしたかったことから、Datadog Synthetics Testsを利用することに決めました。Datadog Synthetics Testsは、大量に使わない限り料金も安いと感じています。
Datadog Synthetics Testsの使い方
Google Chrome用の拡張プラグインを入れて、Datadog上の録画画面にアクセスします。すると、以下のような画面が表示されます。
「Record」ボタンを押してから、右側のブラウザを操作することで、テストで操作するstepを記録することができます。
新規登録をテストしてみる
新規登録のメールアドレスを作成するために、まず録画画面で「Add Variable」を押してメール変数を作成します。
モーダルのCreate variable fromから「Email Body」を選択して、変数名を入力してください
そうすると、Datadogがメールアドレスを自動で生成してくれます。ここで生成されたメールアドレスは、テスト実行ごとに毎回変わるために、複数のテストを同時に実行した時の競合を気にする必要はありません。
また、メールが到着したかを確認するAssertionとして「Test that an email was received」があります。このAssertionを設定することで、生成したメールアドレス宛にメールを受信するまでテストのstepが止まります。
他にも、「Go to email and click link」というNavigationを実行することで、メール内のリンクをブラウザで開いて、新規登録の続きを実行する、ということができます
弊社ではE2Eテストが失敗すると、Slackに通知が来るように設定しています。これにより、何かの変更で機能が動かなくなったときに、メンバーが気付くことができるようになっています。
最後に
この記事ではDatadog Synthetics Testsで、簡単にメールの受信を含めたブラウザE2Eテストができるところを紹介しました。低価格で気軽に使い始められるので、この記事を読んだ方はぜひ導入を検討してみてください。
この記事では説明しませんでしたが、テストの実行頻度は自由に設定可能です。私たちは今のところ一日一回実行に設定していますが、Github Actionsと組み合わせることで、PRごとに実行するということも可能です。
ブラウザ上のGUIで操作できるE2Eテストの良い点として、他のメンバーがテストを修正するときに、わざわざ自分のパソコンに開発環境をセットアップする必要がないところです。開発環境のセットアップが面倒だと、テストが落ちていた場合に他のメンバーが確認・修正することが難しくなってしまうので、この辺りのハードルを低くするに越したことはありません。Datadog Syntheticsの操作方法を他のメンバーに教えるのも非常に簡単です。
最近、Datadog Synthetics Testsでモバイルアプリのテスト機能もリリースされたようです。まだ触れてはいないのですが、弊社ではiOS, Androidのモバイルアプリも提供しているため、そのうちこちらのサービスも試してみようと思います。
Discussion