CypressでE2Eテストの基本情報

Cypressとは

オールインワンのE2EテストフレームワークとSaaS。

Cypress (公式サイト)

E2EテストをSelenium Webdriver からCypress.io に移行した話

Cypressで始めるReactのE2Eテスト-導入から実際にテストを書いてみよう！

打鍵テストをCIで回す：Cypress on GitHub Actions

インストール

環境： macOS Catalina

$ cd /your/project/path
$ yarn add cypress --dev
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

・・・中略・・・

✨  Done in 9.50s.

起動

以下のコマンドでGUIアプリケーションが起動する。

$ npx cypress open

起動すると以下のディレクトリとファイルが作成される。

cypress
   ├─fixtures
   │    └─examples　・・・テストに使用するデータ
   ├─integration
   │    └─examples　・・・サンプルのテストコード(jsファイル)
   ├─plugins
   └─support
cypress.json ・・・設定ファイル

テスト実行

サンプルのファイル名(例：actions.spec.js)をクリックすると、Cypressのサンプル用Webサイトを使ったE2Eテストのサンプルが実行される。

画面左側がテストの記録、右側がテスト対象のWebサイト。テストに沿って自動で文字が入力されたり、ボタンがクリックされていく。

CLIで実行

以下のコマンドで、ｃｙｐress/integrationディレクトリ以下の全部のテストが実行される。

$ npx cypress run

特定ファイルのみCLI実行

$ npx cypress run --spec cypress/integration/mytest.spec.js

Dashboard設定

https://dashboard.cypress.io/ でアカウントを作成する。
Organization作成、Project作成する。
そしてProjectのRecord Keyをゲット。

--keyでRecord Keyを渡すと、Cypressのクラウド(Dashboard)にデータが送信される。

$ npx cypress run --record --key ********-****-****-****-************

CYPRESS_RECORD_KEY

Dashboardで閲覧

CLIで実行したテストの結果がクラウドのDashboardで閲覧できる。
有償サービスだがFreeプランでも1つのOrganizationで3ユーザー、500回/月の実行（Dashboardへの記録）が可能。

テストの様子を動画で確認できる。これは便利！
静止画のスクリーンショットを撮る機能もある。

#CI

公式ドキュメント

GitHub Action / Cypress Screenshot & Video Upload to Slack