Seleniumで挑む、SPAのE2Eテスト自動化

　Webアプリケーションのフロントエンドを作る上で話題になりがちなSPA（Single Page Application）ですが、SPAのE2E（End-to-End）テストについて話題になることはあまりないと思います。筆者は、仕事でSPAのSeleniumテストを書いたことがあり、Seleniumで通常のWebアプリとあまり変わらずテストできる一方、気をつけるべき特徴もあると感じました。第6回の今回は、筆者の経験を元に、実際の業務でSPAのSeleniumテストを書く上での知見を紹介します。

illustration by iwasawa

SPAの特徴

　SPAとは、WebアプリケーションやWebサイトを単一のページのみで構成し、ユーザーが操作したときにブラウザの画面遷移なしで現在のページを動的に書き換えるものです。ユーザーは画面遷移によってUXが途切れることがないので、よりネイティブなアプリケーションに近い操作感を実現できます。

　SPAはリッチなユーザー体験を提供できる一方で、ブラウザが提供していたページ遷移モデルから外れることになるので、解決しなければいけない課題も発生します。

　問題の代表例としては、ブラウザの履歴管理があります。ブラウザの「進む」や「戻る」を実現するための履歴管理は、本来ブラウザによって自然に実現されていました。しかし、SPAでは、ユーザーがSPA内の前の画面を期待して「戻る」ボタンを押しても、SPAを開く以前のページまで戻ってしまうという問題があります。これを解決するためには、SPA内の画面遷移に応じてブラウザのURLのフラグメント識別子（URL最後の#以降の部分）を変更するか、HTML5で提供されるpushStateやreplaceStateを使うといった対応が必要です（本題から外れるので詳細は省きます）。

　SPA特有の課題は、JavaScriptライブラリやブラウザ、HTMLの仕様の発展によって対処しやすくなりつつあります。しかし、実装する側としてはまだまだ負担も大きく、採用するのが適切かの検討と課題への覚悟が必要と言えるでしょう。

SPAのE2Eテスト

　実装面ではいろいろと対処しないといけない特徴的な問題があるSPAですが、E2Eテスト自動化の観点から見ると実はそれほど固有の問題はありません。というのも、SPAの問題は内部実装的な点が多く、外からのユーザー視点で通常のWebアプリと大きな違いを感じさせるようなものではないからです。

　今回の記事では、SPAの特徴と、E2Eテストを自動化する上で気をつけるべきポイントとして、以下について書いていきます。

• 非同期リクエスト＆動的ページ書き換えが多い
  • 自動テストの不安定性が増すのでどのように対処するか
• ブラウザによるページ遷移がない
  • ページオブジェクトパターンをどのように適用するか
  • ページの読み込み完了をどのように判定するか

E2Eテストを自動化するためのツール

　はじめに、E2Eテストを自動化する上でどのようなツールが選択肢になるかを少し考えてみましょう。

　例えば、クライアントサイドがAngularで実装されている場合は、Protractorが選択肢になると思います。Protractorは、Angularで作成されたアプリケーション向けのE2Eテストフレームワークです。Selenium WebDriverのラッパーライブラリで、通常のWebDriver APIに加えてAngularに特化した機能を実装しています。

　一方で、SPAで使われるフロントエンドフレームワークも多様化してきており、すべてのライブラリに専用のE2Eテストフレームワークが存在するわけではありません。なので、普段慣れているE2Eテストフレームワークももちろん選択肢となります。例えば、これまでの連載に登場したSelenideやGebはSPAのE2Eテストでもこれまで通り活躍してくれます。

　どのフレームワークでもE2Eテスト自動化を実現できることに変わりはないので、各フレームワークのメリット・デメリット、メンバーの習熟度や学習コストなどを考慮した上で選択しましょう。

　今回のサンプルコードでは、特定のフレームワークは使わずに、通常のSelenium WebDriverのみ使います。以下の環境で動作確認を行っています。

• Java 8（Oracle JDK 8u152）
• JUnit 4.12
• selenium-java 3.8.1