はじめに
Jest + Puppeteer で E2E テストを書いてて、使いやすかったのだけど、CircleCI 上で（コード変えてないのに）ちょいちょい落ちるので Cypress を試してみることにした
Cypress にした理由は、Twitter とかで最近名前をよく聞いて、評判も良さそうイメージだったから
Cypress は Chrome のみに対応しているテスト専用のツール
Selenium や Puppeteer とかは、ブラウザを操作して色々やるツールなので、テスト専用ってわけではない
導入
ここ見ながらやってみる docs.cypress.io
yarn add -D cypress
# package.json "scripts": { "e2e": "cypress open" }
yarn e2e
いくつかサンプルテストを追加してくれたらしい
全部のテストを実行する時はこっち
特定のテストを実行する時はこっち
使いやすい！
Cypress のディレクトリ構造
├── fixtures
│ ├── example.json
│ ├── profile.json
│ └── users.json
├── integration
│ └── examples
│ ├── actions.spec.js
│ ├── aliasing.spec.js
│ ├── assertions.spec.js
│ ├── connectors.spec.js
│ ├── cookies.spec.js
│ ├── cypress_api.spec.js
│ ├── files.spec.js
│ ├── local_storage.spec.js
│ ├── location.spec.js
│ ├── misc.spec.js
│ ├── navigation.spec.js
│ ├── network_requests.spec.js
│ ├── querying.spec.js
│ ├── spies_stubs_clocks.spec.js
│ ├── traversal.spec.js
│ ├── utilities.spec.js
│ ├── viewport.spec.js
│ ├── waiting.spec.js
│ └── window.spec.js
├── plugins
│ └── index.js
├── screenshots
│ └── All Specs
│ └── my-image.png
└── support
├── commands.js
└── index.js
- fixtures
スタブ的な感じ - integration
ここにディレクトリ作って、テスト書いていくっぽい - plugins
Cypress 自体の拡張プラグインを設定できる - screenshots
スクリーンショットが置かれる - support
Cypress で定義している関数をオーバーライドしたり、新しく関数を定義できる
使う時は cy からメソッドチェーンで実行できる
これかなり便利そう
基本的には、新しくテスト書き始める時は、integration の中にファイルかディレクトリ作って、examples ディレクトリにあるサンプル見ながらテスト書けば良さそう
さいごに
こちらの Vue.js で書かれたリポジトリの E2E テストを Cypress に移行しました github.com
今回は簡単なテストしか作ってませんが、規模が大きくなっても使っていけそうな感じはあります
CircleCI などのCI上で動かしたい時は Cypress の Docker イメージがいくつか用意してあるので、それを使うと楽できます
https://github.com/cypress-io/cypress-docker-images
ローカルで開発中は watch モードがほしいので、cypress openを使い、それ以外の CI で動かす時などはcypress runで良さそうです
実際にテスト書いてみた感想として
- GUI とコマンドのどちらからクローズしても、GUI やプロセスがちゃんと kill される
（当たり前のことかもしれませんが、Puppeteer 使ってる時はプロセスが残ってることが多かったので） - キャッシュが効いてるので、（変更した箇所以外の）2 回目以降のテストが早い
- テストコードが少なく、1 つ 1 つのケースが分かりやすい
- スクリーンショットが多機能だと思った
暇な時に React を使ってるプロジェクトにも導入してみようと思います
