Cypressとは
概要
・テスト自動化ツールである。
・GUIから簡単にエレメントのパスを取得できる
・Webブラウザを使ってテストできる
・JavaScriptを使って書ける
・Seleniumを利用しない
・オープンソース
・無料(一部有料機能もあるが必要ない)
サポートしているブラウザ
・chrome
・FireFox
・Edge
・Electron
・Brave
Cypressの特徴
コマンドを実行する度にスクリーンショットを保存してくれる。
撮ったスクショはGUIで確認可能。
何を実行したときにどうだったのか見返しやすい。
デバッカビリティーが高い。
自動待機
実行する前にコマンドやアサーションを自動的に待機してくれる。
動作の安定感
SeleniumやWebDriverを使わないため高速で安定。信頼できる。
スクショとビデオ録画
クロスブラウザテスト
ローカルまたはリモートシステムやクラウドサービスで実行可能
Cypressでできること
・E2Eテスト
・統合テスト
・単体テスト
この記事ではE2Eテストについてのみ扱う。
Cypressのセットアップ
前提条件
Node.js 10 or 12 または以降のバージョンをインストール済みであること
手順
1.Cypress用のフォルダを作る
名前は分かりやければなんでも良い。
2.VSコードでプロジェクトを開く
1で作ったフォルダをVSコードのプロジェクトとして開く。
3.プロジェクトをnpmで管理する
cdでプロジェクトファイルに潜って、
npm init -y
⇨ package.jsonが作成されていることを確認
package.jsonは依存性の管理に非常に役立つ
4.Cypressをインストールする
npm install cypress
→これで自動的に最新版をインストールをしてくれる。
もし特定のバージョンをインストールしたいなら
npm install cypress@バージョン
とする。
5.Cypressのバージョン確認
npx cypress -v
リリースされているCypressのバージョンを確認したい場合にはこちら。
https://docs.cypress.io/guides/references/changelog
6.Cypressを開く
ターミナルで下記のコマンドを叩く
npx cypress open
こんなGUIが開く
GUIにはサンプルテストファイルがあるので、例えばtodo.spec.jsをopen in IDEする。
すると、自動的にブラウザを開いてE2Eテストの自動化サンプルを見せてくれる。
これが高速でなかなか気持ちいい。
これでセットアップ完了。
こんな感じのフォルダ構成になっているはず。
フォルダ構成
Integration
もっとも軸となるフォルダ。
ここに.jsファイルを作って自動化コードを書いていく。
Fixture
アップロードやダウンロードするファイルなどをここに用意しておく。
また、ここにオブジェクトを格納しておくとデータを利用しやすい。
plugins
プラグインを追加するためのフォルダ。
support
commans.js = カスタムコマンドを作るために使う
index.js = 全てのテストが実行される前に読み込まれる。グローバルコンフィギュレーションを配置するために使う。
Cypress.json
コンフィギュレーションのために使う
ベースURLやデフォルト待機時間を設定する。
テストコードの書き方
ステップ1
Integrationフォルダ配下に.jsフォルダを作る
ステップ2.Cypressライブラリを呼び出す
/// <reference types="cypress" />
it('タイトル', () => {
cy.visit('https://google.com')
cy.get('.gLFy',{timeout: 6000}).type('Automation Step By Step{enter}')
})
Mochaの書き方 it内でテストケースのタイトルをつける
cy.でcypressのオブジェクトを呼び出す
引数の中に{enter}を入れるとエンターキーを叩く。
グローバルレベルでタイムアウトを設定するにはcypress.json。
{
"watchForFileChanges":false,
"defaultCommandTimeout": 5000
}
サンプルコードの公式リファレンス
他にもサンプルコードはCypress.io(公式)にたくさんある。
こちらを参照。
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Cypress-Can-Be-Simple-Sometimes