インストールが簡単、速いe2eテスト、テストを動画で保存するなど、素晴らしいe2eテストツールのCypress!!
Cypressとはどんなツールなのか?
実際にインストールしてテスト書いて実行するとこまで紹介します。
Githubにもソースを登録するので簡単に試してみたい方はgit cloneしてe2eテストやってみてください!!
e2eテストやった事ない人は本当に感動するし、今後テストも書いていこうって思えますよ!!!
Cypressとは?
以下の特徴があります。
・インストールがとても簡単
・テストが速い(らしい)
・テスト過程を自動で動画保存
・CI連携
・テスト用IDEがある
・テストの補助(selector)がある
ただし、現在Chromeしか対応してないのでクロスブラウザが必須の人は他のテストツールを探してください。
e2eテストは動作の保証ができればOKな人は、ぜひこのCypressをお試しください。
いいテストツールですよ!!
Cypressインストール
コマンド1つでインストールOK!!
gistd82e4148b16b802246f5c8ad532e9107
後、下記のコマンドでCypressの雛形を作成してくれます。
gist86b15f9fa22489ee81b63328a8d962cf
作成される雛形、Cypressフォルダが作成されます。
ちなみにprotractorのe2eテストがそのプロジェクトにすでにある場合、下記の削除する質問で’Y’を入力すればprotoractorのe2eテストを削除してくれます。
テストの書き方
cypress/integrationフォルダ配下にテストファイルを作成して テストを書きます。
まず1つサンプルから、ログイン画面を表示できるか確認するテスト。
gistc25420def06dc01d3ef8d7f5149fd9f5
‘cy.’ + APIでテストを書くことができます。
このサンプルでは’cy.visit(ログイン画面URL)’でログイン画面を表示できる事をテストします。
APIは下記を参照してください(英語だけど。。。)
Table of Contents | Cypress Documentation
e2eテスト失敗
まずは失敗ケースを見てみましょう。
Cypressはe2eテスト実行すると、画面のスクリーンショットと動画を保存してくれるのでどこで、どのようにテストが落ちたか簡単に確認することができます。
‘npm run start’しないでテストするので画面が起動できず失敗するテスト。
【スクリーンショット】
cypress/screenshotsフォルダにスクリーンショットがテスト毎にあります。
テスト失敗のスクリーンショット
【動画保存】
cypress/videosの下にテスト毎の動画。
e2eテスト実行(cypress run)
次は正常のe2eテストです。
こちらは普通のe2eテストを想定してもらえればOKです。
実際のテストを実行した動画です。
Cypress e2e run
e2eテスト実行(cypress open)
次は対話モード 、こちらも動画で紹介。
テストランナーが起動するまで時間がかかるので起動後の動画です。
Cypress e2e open
この記事のソースと実行方法
下記コマンドの通り、cloneしてテスト実行できます。
gist52d280ff4f289d8629922095b9e11bb8
コメント