Cypressとは
Cypress はフロントエンドのE2E(End to End)テストツール
E2Eテストとは
- E2E(End to End)は、端から端までの意味。
- システム全体を通して正しく動くかを検証するためのテスト。
- 人間が仕様書通りに動くか確認するテストも含まれる。
人力でのテストの課題
- 工数がかかる。
- 網羅性に欠ける
=> Cypressで自動化！コスト削減＆品質向上！
E2E以外もテスト可能
Cypress v10リリース（2022-06-01）
Cypress v10では、cypressを立ち上げた時点で以下の2つから選択できる
- E2E
- コンポーネント
※ コンポーネントテストはのCypress v10からベータ版に昇格
cypressの特徴
特徴その１：mocha + chai ベースでテストを書くことができる
mocha.js
テスティングフレームワーク
- テストの実行プログラムの作成
- テスト結果の判定
- 集計など
chai.js
アサーションライブラリー
プログラムの前提として満たされるべき条件を記述し、実行時にそれが満せてない場合にエラーや例外を発生させる機能
例）
テスト：AページでBボタンをクリックしてCコンポーネントが表示されること
アサーション：Cコンポーネントが表示されるかの判定
特徴その２：jQueryライクにかける
Cypressは、jQueryの強力なセレクタエンジンを活用している。
cy.get("#main-content")
.find(".article")
.children('a[href^="/static"]')
.click();cypressインストール使うまで
$ yarn add -D cypresspackage.jsonにCypressを起動するためのスクリプトを追加
"scripts": {
//追加
"start": "cypress open"
}$ yarn startディレクトリ構成
cypress
– fixtures
テストで使用する静的データを管理するディレクトリ（json、image など）
– integration
テストを管理するディレクトリ
– suport
カスタムコマンド
※ v10と相違点あり