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

西村祐二

2019.10.19

この記事は公開されてから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のクイックスタートを参考にしています。

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');
    cy.contains('type');
  });
});

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