フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

簡単、速い、テストの動画保存、Cypressは最高のe2eテストだ!!

スポンサーリンク

スポンサーリンク

www.cypress.io

インストールが簡単、速いe2eテスト、テストを動画で保存するなど、素晴らしいe2eテストツールのCypress!!

 

Cypressとはどんなツールなのか?

実際にインストールしてテスト書いて実行するとこまで紹介します。

 

Githubにもソースを登録するので簡単に試してみたい方はgit cloneしてe2eテストやってみてください!!

 

e2eテストやった事ない人は本当に感動するし、今後テストも書いていこうって思えますよ!!!

 

 

Cypressとは?

以下の特徴があります。

・インストールがとても簡単

・テストが速い(らしい)

・テスト過程を自動で動画保存

・CI連携

・テスト用IDEがある

・テストの補助(selector)がある 

 

ただし、現在Chromeしか対応してないのでクロスブラウザが必須の人は他のテストツールを探してください。

 

e2eテストは動作の保証ができればOKな人は、ぜひこのCypressをお試しください。

いいテストツールですよ!!

 

Cypressインストール

コマンド1つでインストールOK!!

gistd82e4148b16b802246f5c8ad532e9107

 

後、下記のコマンドでCypressの雛形を作成してくれます。

gist86b15f9fa22489ee81b63328a8d962cf

 

作成される雛形、Cypressフォルダが作成されます。

f:id:ksakae1216:20190610230201p:plain

 

ちなみにprotractorのe2eテストがそのプロジェクトにすでにある場合、下記の削除する質問で'Y'を入力すればprotoractorのe2eテストを削除してくれます。

f:id:ksakae1216:20190610230012p:plain

 

テストの書き方 

cypress/integrationフォルダ配下にテストファイルを作成して テストを書きます。

 

まず1つサンプルから、ログイン画面を表示できるか確認するテスト。

gistc25420def06dc01d3ef8d7f5149fd9f5

 

'cy.' + APIでテストを書くことができます。

このサンプルでは'cy.visit(ログイン画面URL)'でログイン画面を表示できる事をテストします。

 

APIは下記を参照してください(英語だけど。。。)

Table of Contents | Cypress Documentation

 

e2eテスト失敗

まずは失敗ケースを見てみましょう。

Cypressはe2eテスト実行すると、画面のスクリーンショットと動画を保存してくれるのでどこで、どのようにテストが落ちたか簡単に確認することができます。

 

'npm run start'しないでテストするので画面が起動できず失敗するテスト。

 

【スクリーンショット】

 cypress/screenshotsフォルダにスクリーンショットがテスト毎にあります。

f:id:ksakae1216:20190611213415p:plain

 

テスト失敗のスクリーンショット

f:id:ksakae1216:20190611220841p:plain

 

【動画保存】

cypress/videosの下にテスト毎の動画。

f:id:ksakae1216:20190611221134p:plain 

 

e2eテスト実行(cypress run)

次は正常のe2eテストです。

こちらは普通のe2eテストを想定してもらえればOKです。

 

実際のテストを実行した動画です。


Cypress e2e run

 

e2eテスト実行(cypress open)

次は対話モード 、こちらも動画で紹介。

テストランナーが起動するまで時間がかかるので起動後の動画です。


Cypress e2e open

 

この記事のソースと実行方法

github.com

 

下記コマンドの通り、cloneしてテスト実行できます。

gist52d280ff4f289d8629922095b9e11bb8