はじめに
Angularプロジェクトのe2eテストツールとしてCypressを導入することになりました.そこでCypressについて紹介したいと思います.
Cypressの強みは他を圧倒する導入コスト, 学習コストの低さです.
また, 多くのe2eテストツールはSeleniumをベースとしていますが, Cypressは独自のアーキテクチャを用いることによりいくつかの既存の問題を解決しています.
従来のテストでは, 以下の手順を踏む必要がありました.
1. frameworkを選ぶ()
2. assertionライブラリを選ぶ
3. Seleniumをインストール
4. Seleniumのラッパーを選ぶ
5. (追加ライブラリのインストール)
cypressなら？
1. cypressをインストールする
Seleniumを用いた従来のe2eテストでは事前にフレームワーク, ライブラリの選定をする必要がありましたが, Cypressは全部乗せよくばりセットなのでこれ一つで完結します.
また, Cypressは汎用ツールとしてではなくテストツールに特化して開発されているため, Seleniumと比べ, より高速に動作します.
既存ツールと比較して秀でている点
Cypressには, Cypress Test Runnerというインタラクティブにテストを実行できるGUIツールがあり,
このツールを利用することで, エンジニアはテストコードを書くことに専念することができます.
Why Cypress?
次のように、便利機能が豊富なので再現性の低いバグを再現する作業にも役立つのではないでしょうか.
- Chrome Developer ToolsライクなUI
- デバッグを容易にする各種メソッド
- 要素を選択するためのクエリをクリックで検出
- コードのwatch, ブラウザのホットリロード
- リクエストごとにDOM要素のスナップショットを保存
他にも, 簡単にスタブを作成する, 要素が呼ばれたか監視するなどの便利なメソッドが目白押しです
Stubs, Spies, and Clocks
案ずるより産むが易し
ということで, どれだけ簡単に試せるのか体験していきましょう.
システム要件
> Mac OS 10.9+ (Mavericks+), only 64bit binaries are provided for macOS.
> Linux Ubuntu 12.04+, Fedora 21, Debian 8, 64-bit binaries
> Windows 7+, only 32bit binaries are provided for Windows.
また, node.js及びnpmも必須ですので予めご用意願います.
終わりです.
たった数コマンドでCypress実行環境のインストール, scaffoldの生成までよしなにしてくれます.
生成されたscaffoldは次のようなディレクトリ構成です.
cypress/integration 配下に配置したファイルにテストコードを記述します.
上記のディレクトリ構成では, cypress/integration/my_spec.js にあたります. (おそらくもっとたくさんのexampleファイルが生成されていますが適宜読み替えてください.)
cypress open コマンドによって立ち上がったGUI上からテストの実行ができます.
試しに, 適当なテストコードを実行してみましょう.
ファイル名をクリックすることでテストが実行されます.
cypressのデモサイトに対してテストが実行されるのが確認できるかと思います.
これだけでは面白くないので, ざっくりコード例を見ていきます.
Protractorなど, 別のテストツールを使ったことがある方には説明不要なほど可読性が高いと思います.そうでない方でも, だいたい何をしているか分かるのではないでしょうか.
上のコードはログイン機能のテストを行っています.具体的には, cy.get()でDOM要素の選択, click()やtype()で各種操作, should()でassertなどの処理をしています.
cypressによって作成されたexampleコードはJavaScriptですが, TypeScriptをサポートしているため特別な設定なしにcypress/integrationディレクトリに配置するだけで動作するのもGoodです.
CIのお供に
勿論, CUIも用意されています.
CUIで実行すると, headlessモードでテストが走ります.
実行後, cypress/videos 配下に動作画面のキャプチャをmp4で出力してくれるのも気が利くところです(実行オプションで無効にもできます)
CIなど, 画面のない環境で動かそうとすると, いくつかのソフトウェアを導入する必要があるのですが, Dockerイメージが公開されているのでそちらを使うのがオススメです.
cypress/base
使ってみて
ほしいな〜と思った機能は調べればだいたい実装されています.
プラグインの開発も活発なようですし, 自作してしまうのもよいかもしれません.
Plugins
なにより嬉しかったのは公式ドキュメントが豊富なことです.
案ずるのも産むのも, 楽であればあるほど良いです.
本稿ではe2eテストツールとして提供されている Cypress Test Runner のご紹介をしましたが,
銀の弾丸たりえたのか？
実は, Cypressはクロスブラウザ未対応です.現状ではChromium, Chrome, Chrome Canary, Electronにしか対応していません.
Roadmap
Roadmapを見ると対応予定はあるようですが, すぐには難しいでしょう.
クロスブラウザテストを必要とされる場面では, 従来どおりSeleniumを使うのがよさそうです.