はじめに
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 を使ってるプロジェクトにも導入してみようと思います