Cypress ではじめる E2E テスト #テスト

E2E テストとは

E2Eテストとは、「End To Endテスト」の略であり、ユーザが利用するのと同じようにブラウザを操作し期待通りの処理となっているかシステム全体をテストするもの。

単体テストに比べると、実際にサーバーを立ち上げたりネットワーク通信の影響をダイレクトに受けたりするため、実行に非常に時間がかかることがあるため
テスト自動化ツールを使ってテストをすることが多い。

特徴

自動化したテストでコードの振る舞いをシステム全体を通して確認できるようになる
壊れやすく、メンテナンスが大変
導入・運用コストが高い
実行速度が遅い

結合テストとの違い

結合テストは、アプリケーションの一部のレイヤーやコンポーネントを結合させた状態でテストし、それらのインターフェースに起因する問題を確認する。

それに対して、E2Eテストでは原則として全てのレイヤーやコンポーネントを結合させた状態でテストを行う。
また、DBや、外部サービスも含めて、出来る限り本番環境に近い環境で実施する。

しかし、厳密に「これがE2Eだ」という定義が存在するわけではない。

メリット

自動化したテストでコードの振る舞いをシステム全体を通して確認できるようになる
- 機能改善やリファクタリングに対するハードルが下がる

デメリット

壊れやすく、メンテナンスが大変
- 細かいUIのテストを実装し、ちょっとした文言の変更等で落ちたりする
導入・運用コストが高い
- E2Eテストには様々な手法があり、どれを使うのか選定するのが大変
- テスト用の環境を用意する必要があり、実行コストがかかる
  - ローカルでやる場合は別
- 上記で挙げた壊れやすさ故、メンテナンスコストがかかる

Cypress について

リポジトリ

公式ドキュメント

単体テストからE2Eテストまで広く使える
テスト構築、実行、バグ検知まで全て行える
コマンドごとに画面のスナップショットを見返せる
テスト一連の様子をビデオとして保存できる
各種CIとの連携が可能である

いい点

コードベースが古く、ユニットテストなどの自動テストを導入するのが困難なプロジェクトにも使える
導入が簡単な点
拡張が容易な点（テスト中にNode.jsで任意の処理を実行できる）

よくない点

別タブを開く確認ができないなど selenium でできることができない
現時点で Safari と IE に対応していない

install Cypress

mkdir cypress-sample
cd cypress-sample

npm init -y
npm install cypress --save-dev

npx cypress open

package.json にコマンドを追加することで、 npm コマンドを実行するのと同じように、コマンドを利用できる。

"scripts": {
    "cypress:run": "cypress run",
    "cypress:open": "cypress open" 
}

cypress コマンドオプション

"scripts": {
    "test": "cypress run",
    "test:dev": "npm test --env=dev",
    "test:stg": "npm test --env=stg",
    "test:dev:chrome": "npm run test:dev –browser chrome",
    "test:stg:chrome": " npm run test:stg –browser chrome",
    "test:todo-app": "cypress run --spec 'cypress/integration/1-getting-started/todo.spec.js'",
    "test:suite:advanced": "cypress run --spec 'cypress/integration/2-advanced-examples/**/'"
}

Cypressのコマンド例
https://example.cypress.io/