Autifyで始めるE2Eテストの自動化
こんにちは、タロウです。
最近よく耳にすることが多いAutifyでE2E（End to End）テストを試してみましたのでご紹介します！
Autify（オーティファイ）とは
Autify（オーティファイ）は、誰でも簡単に自動テストを作成できるクラウド型のツールです。画面の操作を記録するだけでテストシナリオを作れるので、プログラミングの知識がなくてもテストケースを作成することができます。
Autifyはノーコードで使えるため、エンジニアでなくてもテスト自動化に取り組むことができます。
特に手間のかかるテストや繰り返し行うテスト、デグレチェックや無影響確認には非常に便利です。
また、必要に応じてJavaScriptを使ってカスタマイズすることもできるので、複雑なテストにも対応可能です。
実際に試してみた
トライアル期間が14日間あるので幅広く試すことができそうです。
今回はマーベリックスのコーポレートサイトに対してテストパターンを作成しました。
お問い合わせフォームに対してバリデーション試験を行った例をご紹介します！
テストパターンを作成する
公式ページよりユーザー登録を行います。
シナリオ作成を行う前にChromeの拡張機能が必要になります。
入っていない場合は入れるよう促されますが、こちらから拡張機能を入れます。
シナリオを作成する
シナリオの作成は先述で入れた拡張機能を使用して画面をレコーディングし、
実際に行った操作や入力値を記録して自動生成されます。
テストケースに沿ったシナリオ名を入れておくことで管理しやすくなりそうです！
実際の公開されている環境のURLを設定しレコーディングを開始します。
ローカル環境やクローズドな環境でテストする場合は「Autify Connect」という機能があり、こちらを使用することで専用トンネルを作成して実施することができるようです。
レコーディングが開始されるとシークレットモードでブラウザが立ち上がります。
ページが表示された後は、テスト内容に沿って画面を操作していきます。
今回は、下記流れでテストシナリオを作成しました。
- TOPからお問い合わせフォームへ遷移する
- お問い合わせフォームに情報を入力する
- お問い合わせフォームの”詳細欄”を空にする
- エラーメッセージが表示されることを確認する
- お問い合わせフォームの”詳細欄”を入力する
- お問い合わせフォームの確認画面へ遷移する
ここまでをレコーディングしている画面で操作します。
途中、確認項目や観点を追加することができ、対象の場所と期待結果（値や表示確認）を選択し追加していきます。
レコーディングが完了すると操作単位でテストパターンが完成します。
今回テストしたい6つのステップが、23の操作と確認でシナリオ化されました。
もし観点や手順の追加は後からでも差し込むことができるため、もし途中で変更があった際もメンテナンスしやすそうです。
テストを実行する
テストシナリオが完成したのでテストを実行したいと思います！
どのブラウザでどの環境で動かすか細かく指定することもできますが、今回はChrome / Linuxでテストを実行します。
作成したテストシナリオの画面から、「今すぐ実行」を選択します。
実行が開始された旨が画面上で表示されるので、これで実行は完了です。
実行中のテストシナリオは「テスト結果」画面から見ることもできます。
今回のシナリオだと2分弱でテストが完了しています。
しばらく待つと結果が更新されます。
期待した結果、手順通りに進まなかった場合は赤字で失敗の結果となります。
どこで失敗したかを、テストシナリオを選択すると詳細を見ることができます。
今回のテストシナリオでは、バリデーションエラーのメッセージが出ていることを期待していましたが、表示されていなかったため失敗となっていたようです。
フォーカスが外れるタイミングでエラーメッセージが表示される動きのため、テストシナリオにフォーカスを外す操作を追加しました。
正しい操作となっていない場合、テストシナリオを修正し再度実行を行います。
注意点
UIが変わった場合やメッセージや期待結果に修正が入った場合は、もれなくテストシナリオを修正する必要があります。
ただ、Autify管理画面からポチポチと操作するだけでテストシナリオを作成することができるので、修正・作り直しはとてもしやすいと感じました。
また、テストシナリオが簡単に作成・修正できる反面、テスト本来の目的を見失わないように注意が必要です。OKとするテストケースではなく、要件・仕様・異常値を確認するためのテストであることを忘れないようしましょう。（Autifyに関わらずですが・・）
さいごに
E2Eテストをとても簡単にテストシナリオを作成し、実行することができました！
人力で行っていたUIのテスト、イレギュラーケースにテストに対して自動化しテストできることがわかりました。
大規模システムや、保守が長いシステムなど、とある修正で意図せぬ影響が出てしまうことも素早く検知することができると感じました。
また、JavaScriptを書き特殊な操作や書き換えを行うこともできそうなので試すことのできる今のうちに触ってみたいと思います！
