Cypressを触ってみる

Cypressとは？

Webサービスのテスト用に構築されたJavaScriptライブラリです。

JavaScriptライブラリなので、JavaScriptでテストスクリプトを記述して使用する
オープンソースなので、無料で使える
GoogleChromeのみ対応している
動作が軽い
単体テストからE2Eテストまで広く使える
コマンドごとに画面のスナップショットを見返せる
各種CIとの連携が可能である

環境構築

JavaScriptなので、node.jsを事前にインストールしておきます

Cypressのインストール

Cypressはプロジェクト毎にインストールする必要があるので、インストールしたいディレクトリに移動します。
npm installを実行します。

npm install cypress

Cypressの起動

Cypressの本体はnode_modulesのbinファイルにいるので、それをopenします。

./node_modules/.bin/cypress open

するとCypressの管理画面が起動します。

あらかじめいくつかテストスクリプトが用意されているので、
試しに"action.spec.js"を起動します。

別ウインドウでGoogle Chromeが起動し、テストスクリプトが実行されます。

ファイル構成

integrationテストのスクリプトはintegrationの中に入っているので、試しにテストスクリプトを書いた"HelloWorld.js"を"integration"内に配置します。

Seleniumとの違いは下記の記事が参考になりました。