WebアプリケーションでのE2Eテストの取り組みについて

コイニーでWebアプリケーションを担当している、フロントエンジニアの渡邊です。

コイニーのサービスでは、カードリーダー + iOS/Androidアプリで、クレジットカード決済を行います。

Webアプリでは、

・お申し込みフォーム

・加盟店様向けの管理画面(決済履歴の確認、各種設定など)

など、決済以外の機能を提供しています。

技術的には、AngularJSを使っています。導入時のバージョンは1.2系、現在は1.5.5を使っています。

また、Angular用のend-to-end (E2E) テストフレームワークprotractorを用いて、動作確認の一部を自動化しています。E2Eテストを用いると、シナリオにそってブラウザの画面を操作し、その結果の画面の要素などが想定通りになっているか、までを自動でテストする事ができます。

この記事では、

・E2Eテストをサービス内でどのように活用しているか

・E2Eテストの運用フロー

などを紹介しようと思います。

E2Eテストの使いどころ

コイニーのWebアプリの中で、E2Eテストが効果を発揮する点はどのようなところかというと...

入力項目が多いフォーム

クレジットカードの審査に必要な項目という性質上、どうしても申し込みフォームの項目が多くなってしまいます。また、選んだ業種や業態によって、その後のUIが変わったりする部分もあり、それらを毎回すべて手動でたくさんのパターンのテストをするのは大変です。

E2Eテスト実行の様子(お申し込みフォーム)

膨大な条件分岐&該当するデータの用意が大変な部分

加盟店様向けの管理画面では、審査状況や業種などによって、状況に応じたインストラクションを表示するようにしています。そのため、条件分岐が多く、それぞれの状況を再現するテストデータを用意する事も困難です。モックデータを用いたテストを用意しておくことで、手動でも状況の再現が難しいような状況のテストが楽にできます。

また、表示の場合分けが多いところは、テスト実行中に画面のスクリーンショットも自動で撮るようにしているので、結果の画像を見れば表示崩れなども見つけやすくなりますし、そのまま画面仕様としてビジネスサイドのチームなどにも共有しやすいです。

(下の画像は実際にE2Eテストの中で撮影したものをつなげたものです。)

インストラクションのパターン(ほんの一部)

サーバサイドのエラーなどをテストしたい時

APIからのエラーなど、再現が面倒な状況も、モックを用いたE2Eテストで確認ができるのが便利です。

クロスブラウザ確認の簡略化

普段はMacのChromeで開発しているので、windowsのIEなどの動作確認を、毎回するのは面倒です。新しい機能を足した時などは手動で動作確認をしますが、その後の修正などは、リモートのwebdriverを使ってテストを回すことで、動作確認を担保しています。

実際に導入してよかった点

E2Eテストによって、

・ちょっとした変更が思わぬところに影響してしまっていたとき

・使用しているライブラリのバージョンアップなど、アプリケーションの広範囲に影響が出そうな変更があるとき

などに、バグを見つけることが出来ました。

中でも、普段更新がなく、壊れていても気付きにくいようなページなどは、テストが通っていれば安心です。

テストのフロー

ここからは、技術面のことを大まかに紹介したいと思います。

E2Eテストの運用に使っているものは、

Protractor — 前述のE2Eテストフレームワーク

Travis CI — GitHubへのpushを検知してテストを実行

Sauce Labs — OS/ブラウザをクラウド上で提供(Travis上で実行するE2Eテストのためのブラウザ環境として使用)

TravisCIとSauce Labs の連携についてはこちら↓

普段の開発・テストのフローはこんな感じです。

① githubのリポジトリにpushする前に、ローカルでChromeのwebdriverで手動でテストを回す(時間短縮のため該当箇所のみのテストに絞ることも)

② GitHubのPull Requestとpushをトリガーに、Travis上でSauce Labs経由のIEテスト

はじめは①のみでしたが、その後②の導入により、IEのテストもカバーできるようになりました。また、もし①を忘れたり、①で回していない部分に思わぬ影響が出ていたとしても、②で気づく事ができます。

まとめ

今回は、コイニーのWebアプリケーションでのE2Eテストの活用について、概要を紹介しました。

実際のテストコードの例や、導入時にはまった点などは、また別の記事で紹介しようと思います。