えいのうにっき

a-knowの日記です

メール受信を含むE2Eテストの自動化をAutifyで実現する

カスタマーサクセスエンジニアとしてAutifyに入社して最初の1週間が経ちました。カスタマーサクセスという職種は特にプロダクト知識・ドメイン知識が重要なので、毎日少しでも多くのことを身につけねば、とキャッチアップに勤しんでおります。

そのキャッチアップも兼ねて、今回、拙作である個人開発Webサービス・Pixelaのとあるユースケースに対するE2Eテストの自動化をおこないましたので、その方法などをメモがてら残しておきます。

対象となるユースケース

Pixela は、基本的には無料でご利用いただける Web API サービスです。

blog.a-know.me

と同時に、Patreonを通じての支援も受け付けており、支援登録してくれた方(パトロン・Pixelaサポーター)にはレジストレーションコードを発行、そのレジストレーションコードが設定されたユーザーに対しては一部の機能を限定解除する、という仕様があります。

Patreon を使って Pixela を支援する/限定機能を使う · a-know/Pixela Wiki · GitHub

このあたりの流れを、「個人Webサービスシステム構成事典」にも掲載の図を用いて示すと、以下の図中の赤線・赤文字の部分が該当します。

f:id:a-know:20210321174035p:plain

パトロン登録時に Patreon から発火されるWebhookを Pixela が受け、ユーザーに対してメールを送信するようになっています。

実はここの部分のテストが、ユニットテストすらも腰が重くてずっと書けていない状態でした。そのため、以下のような方法・手順で人力で確認することを時々実施することで担保している、というありさまでした。

  • 自分の持っている別メールアドレスで Patreon にユーザー登録をし、そのユーザーで Pixela に対して支援登録をした結果、メールが受信できることを確認する。
  • メール送信まわりに影響がありそうな変更を Pixela に対して実施したタイミングで、上記のオペレーション(パトロン解除 -> パトロン再登録)を再度おこない、メールが問題なく受信できることを確認する。

とはいえ、「メール送信まわりに影響がありそうな変更」という判断も曖昧かつどこまで信用できるかも微妙で、また、自分は何もしていなくても(むしろ何もしていないからこそ)それまで動いていたものがある日突然壊れる、ということも、往々にして起こり得るものです。

そんな、「壊れやすい部分」「壊れた場合に極めて気が付きにくい部分」そして「対象システムにとって重要な部分」という三拍子そろったこのシナリオを、今回の自動E2Eテストの対象としました。

このシナリオを構成する具体的な操作手順

Autify の特長のうちのひとつとして、「ブラウザ操作をノーコードで記録できる」というものがあります。ブラウザ操作の記録には、Chrome Extention である「Autify Recorder」を用います。

chrome.google.com

文字だけで書いてもなかなかイメージしづらいと思いますので、ぜひ以下のページに掲載の動画も見てみてください。

シナリオの作成と実行方法 - Autify Help Center

ね、簡単でしょ?

そして、このツールでレコーディングする対象となる操作......今回のユースケースをテストできる最短経路の手順を書き出してみます。

  1. 動作確認用のPatreonアカウントで Patreon にログイン
  2. Pixela のパトロン登録を解除する
  3. Pixela のパトロン登録をおこなう
  4. メールが受信できていることを確認する

...こんなかんじでしょうか。ここで、いくつかのハードルがあることに気が付きます。それは以下の2点でした。

  • メールの受信をAutifyによる自動テスト内でおこなわなければならない
  • Patreon のセキュリティ対策により、それまでログイン歴のない端末からのログインの場合、本人確認のため確認メールが送信されることがある

メールの受信をAutifyによる自動テスト内でおこなわなければならない

Patreon の動作確認用のアカウントは、僕個人のGmailアドレスで登録されています。そこへのメール受信をAutifyによる自動テスト内で確認するとなると、テストシナリオのなかで僕のGmailアカウントにログインしなければいけないのか...?

もちろんそういったやり方もあるとは思いますが、その方法はGmailアカウントへのログイン情報をAutifyに登録することになりますので、それはちょっと違う気がしますね。今回はそれとは少し違うアプローチである、Autifyの「メールテスト」機能を使います。

メールテスト - Autify Help Center

上記の機能は、以下のスクリーンショットのように、

f:id:a-know:20210321174806p:plain

  • E2Eテストのための独自メールアドレスを発行することができる(固定アドレス・変動アドレスいずれも可能)
  • そのメールアドレスに届いたメールの確認は、Autifyの管理画面だけでなく、テストシナリオ内でもおこなうことができる

ということができるスグレモノになっています。今回はこの機能を使って、

  • 事前にAutify管理画面で固定メールアドレスを発行しておく
  • Patreon の動作確認用のアカウントの登録メールアドレスを、Autifyで発行した固定メールアドレスにあらかじめ変更しておく
    • メールアドレス変更の過程でメールアドレス確認のためのメールがPatreonから送信されるが、Autifyでのメール受信やメール本文の確認はAutify管理画面からできる。
    • こんな↓かんじ
    • f:id:a-know:20210321174927p:plain

といったことを、前準備としておこなっておきます。

Patreon のセキュリティ対策により、それまでログイン歴のない端末からのログインの場合、本人確認のため確認メールが送信されることがある

セキュリティのための確認メールの送信が毎回絶対におこなわれるなら、それほど大変な話ではありません。本人確認メールの受信・その本文にあるリンクのクリック、というものもシナリオに含めてしまえばいいんです。

今回難しいのは、「それが毎回おこなわれるとは限らない(わからない)」ということです。

この課題に対して、「本人確認のためのメール受信・その本文にあるリンククリックのシナリオは、実際にそのメールが受信されなかった場合でも、"テストの失敗" とはせずに "無視する" 」という設定を Autify 内でおこなうことで対処できました。

f:id:a-know:20210321175138p:plain

以上の2点について注意しながら作成したシナリオを全体感は、以下のようなものになります。総ステップ数20。

f:id:a-know:20210321175228p:plain

このシナリオを実際に実行してみた様子が以下のスクリーンショットです。

f:id:a-know:20210321175321p:plain

ちなみにこの各ステップをクリックしてみると、「ブラウザ操作をレコーディングしたときのスクリーンショット」と「テストが自動で行われたときのスクリーンショット」が横並びで表示されるんですけど、これヤバくないですか??(語彙力)

f:id:a-know:20210321175408p:plain
「ブラウザ操作をレコーディングしたときのスクリーンショット」と「テストが自動で行われたときのスクリーンショット」が横並びで表示される

作成したシナリオのテスト実行を定期的に実施する

以上の作業で、「パトロン登録したらメールが送信されているかどうか・受信できているかどうか」の確認が、いつでも好きなときに・クリックひとつで実行できるようになりました。こうなってくると、「これを定期的に自動で実行させたい」と思うのが人間ってもんです。大丈夫です、できます!!

それを実現するためには、「テストプラン」という設定を作ります。

「テストプラン」(旧「スケジュール」)とはなんですか? - Autify Help Center

今回の場合、以下のようなかんじになります。

f:id:a-know:20210321175519p:plain

毎日確認するのはアレかなってことで、1日おきくらいの頻度にしてみています。

f:id:a-know:20210321175529p:plain

テスト結果の通知には、Slackでの受信が対応しています。

f:id:a-know:20210321175545p:plain

これで少しは安心して、毎日を過ごせるようになりましたね!

いかがでしたか?

入社エントリ内で「監視とは継続的なテストである」という言葉を拝借させていただきましたが、監視におけるバイブル的書籍であるところの「入門 監視」において、以下のようなことが重要であると記述されています。

  • ユーザ視点での監視。(「入門 監視」2.2 デザインパターン2)
    • ユーザーとアプリケーションがやりとりをするところが、まず監視を追加すべきところ。
    • 何が問題なのかはわからなくても、何かが問題であることは教えてくれる。

今回自動化したシナリオはまさに、それに該当すると言っても良いと思います。1日おきに1回、という実行頻度のため、これを「監視」と呼べるかどうかは判断が分かれるところかもしれませんが、それでも、自分にとって大きな安心材料となったことには違いはありません。みなさんも、できるところからやっていきましょう!

入門 監視 ―モダンなモニタリングのためのデザインパターン

入門 監視 ―モダンなモニタリングのためのデザインパターン

  • 作者:Mike Julian
  • 発売日: 2019/01/17
  • メディア: 単行本(ソフトカバー)