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で実行

以下のコマンドで、cypress/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