【超簡単】AngularでE2Eテストフレームワーク「Cypress」を使えるようにしてみる

どうも！大阪オフィスの西村祐二です。

Nxを使ってアプリケーションを作るとデフォルトでAngularのE2Eテストフレームワークが「Cypress」に置き換わって生成されます。

そこで、Cypressがとても使い勝手がよかったので、他のAngularプロジェクトでも使いたいなと思っていました。

調べてみると下記ライブラリを使うと簡単にCypressを使うことができましたので、その方法をご紹介したいと思います。

https://github.com/briebug/cypress-schematic

試してみる

環境

設定方法

はじめにプロジェクトを作ります。今回は「demo-cypress」という名前にしています。設定は適時変更してください。

さっそく、Cypressを導入していきます。作業としては下記コマンドで終わりです。簡単ですね。

コマンド実行すると、下記のような、既存のテストフレームワークであるProtractorをどうするか聞かれるので、ご自身の環境に合わせて回答ください。今回はYesとして、既存のファイルは削除するようにしました。

完了すると「e2e」のフォルダが削除され、「cypress」のフォルダが作られます。また、設定ファイルなどもcypressに変更されます。

動作確認

Cypressの環境はできたので、実際に動かしてみましょう。

導入するとpackage.jsonにCypress用のスクリプトコマンドが追加されているので、それを使ってCypressを実行します。実行すると、ウインドウが立ち上がり、サンプルファイルを追加するか聞かれるので、追加しておきましょう。

追加されたサンプルをウインドウからクリックするとE2Eテストが実行されます。

クリックして実行してみましょう。

下記のような画面がでて問題なくうごきました。やりましたね。

サンプルファイルはJSファイルだったのですが、TSファイルも動くように環境が設定されています。うれしいですね。次は自分でTSファイルのファイルを作ってみます。

▼下記のようなファイルを作ってみました。テストの内容はCypressのクイックスタートを参考にしています。

▼ファイルを作成したら、ウインドウからsample.spec.tsが表示されているかと思います。クリックして実行してみましょう。

▼下記のような画面がでて、問題なくテストをパスしました。やりましたね。

さいごに

E2Eテストフレームワークの「Cypress」をAngularで使えるようにしてみました。

ほんとに簡単に「Cypress」が使えるようになりました。

Angularはデフォルトでも「Protractor」というE2Eテストフレームワークが用意されていますが、ユーザの好みによって違うツールへの変更も簡単にできるのがうれしいところですね。

誰かの参考になれば幸いです。