この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも！大阪オフィスの西村祐二です。
Nxを使ってアプリケーションを作るとデフォルトでAngularのE2Eテストフレームワークが「Cypress」に置き換わって生成されます。
そこで、Cypressがとても使い勝手がよかったので、他のAngularプロジェクトでも使いたいなと思っていました。
調べてみると下記ライブラリを使うと簡単にCypressを使うことができましたので、その方法をご紹介したいと思います。
https://github.com/briebug/cypress-schematic
試してみる
環境
Angular CLI: 8.3.12
Node: 10.15.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.12
@angular-devkit/core 8.3.12
@angular-devkit/schematics 8.3.12
@schematics/angular 8.3.12
@schematics/update 0.803.12
rxjs 6.4.0設定方法
はじめにプロジェクトを作ります。今回は「demo-cypress」という名前にしています。設定は適時変更してください。
$ ng new demo-cypress --routing --style=cssさっそく、Cypressを導入していきます。作業としては下記コマンドで終わりです。簡単ですね。
$ npm install -g @briebug/cypress-schematic
$ ng add @briebug/cypress-schematicコマンド実行すると、下記のような、既存のテストフレームワークであるProtractorをどうするか聞かれるので、ご自身の環境に合わせて回答ください。今回はYesとして、既存のファイルは削除するようにしました。
? Would you like to remove Protractor from the project? Yes完了すると「e2e」のフォルダが削除され、「cypress」のフォルダが作られます。また、設定ファイルなどもcypressに変更されます。
動作確認
Cypressの環境はできたので、実際に動かしてみましょう。
導入するとpackage.jsonにCypress用のスクリプトコマンドが追加されているので、それを使ってCypressを実行します。実行すると、ウインドウが立ち上がり、サンプルファイルを追加するか聞かれるので、追加しておきましょう。
$ yarn cypress-open
追加されたサンプルをウインドウからクリックするとE2Eテストが実行されます。
クリックして実行してみましょう。
下記のような画面がでて問題なくうごきました。やりましたね。
サンプルファイルはJSファイルだったのですが、TSファイルも動くように環境が設定されています。うれしいですね。次は自分でTSファイルのファイルを作ってみます。
▼下記のようなファイルを作ってみました。テストの内容はCypressのクイックスタートを参考にしています。
cypress/integration/sample.spec.ts
describe('My First Test', () => {
it('Visits the Kitchen Sink', () => {
cy.visit('https://example.cypress.io');
cy.contains('type');
});
});▼ファイルを作成したら、ウインドウからsample.spec.tsが表示されているかと思います。クリックして実行してみましょう。
▼下記のような画面がでて、問題なくテストをパスしました。やりましたね。
さいごに
E2Eテストフレームワークの「Cypress」をAngularで使えるようにしてみました。
ほんとに簡単に「Cypress」が使えるようになりました。
Angularはデフォルトでも「Protractor」というE2Eテストフレームワークが用意されていますが、ユーザの好みによって違うツールへの変更も簡単にできるのがうれしいところですね。
誰かの参考になれば幸いです。