blog.foresta.meこんにちは、 @kz_morita です。
Cypress を使って現在開発しているプロジェクトに，E2E Test を導入してみたらなかなか良かったので，Cypressの特徴などについてまとめていきます．
Cypress とは
https://www.cypress.io/Cypress は JavaScript の E2E テストのフレームワークです．
環境の構築がとても簡単で，テストもシンプルにかけるのが特徴的です．
たとえばインストールはこれだけです．
$ npm install cypress
テストも以下のように比較的にシンプルに書くことが出来ます．
describe('Login Test', () => {
it('Login', () => {
// user データ を取得
cy.fixture('users').then((users) => {
// localhost:3000 にアクセス
cy.visit('http://localhost:3000')
// ヘッダー内のログインボタンをクリック
cy.get('header').contains('ログイン').click()
// メールアドレスのフォームに，テストデータの メールアドレスを入力
cy.get('#email').type(users.email)
// パスワードフォームに，テストデータのパスワードを入力
cy.get('#password').type(users.password)
// ログインボタンをクリック
cy.get('button[type="submit"]').click()
// ヘッダーからログインボタンが消えていることを確認する
cy.get('header').should('not.contain', 'ログイン')
})
}
Test Runner と Dashboard
Cypress には Test Runner と Dashboard があります．
Test Runner は無料で使えますが，Dashboard には料金プランがあります．少人数で小規模で使う分には無料で使えそうです．
Pricing | cypress.ioDashboard では，テストの実行履歴や 実行時の動画などもみることができます．
Cypress でできないこと
Cypress は便利ですが，その代わりCypressではできないこともいくつかあります．
- ブラウザの自動化ツールではない (Selenium とは異なる)
- マルチタブをサポートしていない
- 複数のブラウザを起動できない
- 単一オリジンのみでしか動かない
- IE, Safari などのブラウザでテストが出来ない
とくに後者２つは結構影響が大きいと個人的には思います．
単一オリジンでしか動かないので，Twitter ログインなどの，Twitter のサイトに訪れて認証を行うといったテストは行うことができません． ただし，サブドメインはテストすることが出来ます．
また，現在サポートしているブラウザは以下のとおりです．
- Chrome
- Firefox
- Edge
- Electron
- Brave
Cypress の トレードオフについては以下のページに詳しくまとめられています．
Trade-offs | cypress.ioGithub Actions と連携
各種 CI とも連携できます．
今回は，Github Actions と連携したのですが，公式で github actions も用意されているので，比較的簡単に構築することが出来ました．
name: E2E Test with Cypress (Node.js 13.x)
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
e2e:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [13.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: E2E Test
uses: cypress-io/github-action@v2
with:
build: npm run build:e2e
start: npm run start:e2e
wait-on: 'http://localhost:3000'
wait-on-timeout: 120
record: true
env:
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
build，start には テスト対象のアプリをビルド，起動する npm script を指定しています．
wait-on に URL を指定すると，そのURLにアクセスできるまでテストの起動が待機されます．
record に trueとして，CYPRESS_RECORD_KEY に Cypress の Dashboard で発行された Key を入れるとそのままダッシュボードに記録することが出来ます．
まとめ
今回 Cypress で E2E テストを構築してみたのですが，テスト環境の構築も割と簡単にできたしダッシュボードも見やすいのでこれはかなりおすすめだと思います．
一点 Cypress でできないこと で書きましたがトレードオフも存在するのでそこが問題ないのであれば，採用を検討してみるのも良さそうです．
E2Eテストはメンテナンスして維持していくことが大変だと思いますが，品質を保つために頑張っていきたいと思います．