Cypress 導入の方法まとめ

Cypress で E2E テストを構築したので作り方をまとめておく。

www.cypress.io

Cypressのいいところはドキュメントがしっかりしててサンプルも多く書き味も悪くない。puppeteerほど柔軟ではないもののやりたいことは大抵実現できる。E2Eとしては安定しているし、普通に無料で使える。E2Eフレームワークとしてはかなり優秀だなという印象。気になる点は、IEやfirefoxなどの検証ができないこと。

f:id:ka2jun8:20190720190658p:plain

導入

cypress install

npm install --save-dev cypress

cypress は npm で導入できる。 package.json の scripts に以下を追記する。

...
"scripts" : {
  ...
  "cy:open": "cypress open",
  "cy:run": "cypress run"
},

npm run cy:open で cypress の GUI が開く。 cypress フォルダが自動的に生成され、サンプルがいくつか入っているので、すでにテストを実行可能。試しに、Run all specs を押すと https://example.cypress.io/commands/actions に対してテストが実行される。これでおおよそこういうものなのか、というのがわかる。必要なければサンプルは消してしまって構わない。

参考:

Installing Cypress | Cypress Documentation

環境構築

cypress.json

cypress の環境設定は cypress.json で行える。例えば、アクセスする userAgent を設定したり、 same origin ではないサイトへ飛ばすテストがしたい場合などは、 chromeWebSecurity を false にしておく必要がある。

{
  "userAgent": "cypress-e2e",
  "chromeWebSecurity": false 
}

cypress.env.json

cypress の E2E テストで環境変数を扱いたい場合は、いくつか方法がある。

cypress.json に書くこともできるが、 sample を用意して展開したかったので、 cypress.env.json を使うやり方を選択した。

{
  "baseURL": "https://localhost:8000/",
  "mailerURL": "http://192.168.99.100:1080/"
}

ファイルをおいておけば以下のように取得できる。

const baseURL = Cypress.env('baseURL')

参考: Environment Variables | Cypress Documentation

eslint, prettier

test とはいえコードを綺麗に保ちたかったので、 cypress 用のテストファイルにも eslint, prettier を導入した。

以下のモジュールを追加。

"devDependencies": {
    ...
    "eslint": "^6.0.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-cypress": "^2.2.1",
    "eslint-plugin-prettier": "^3.1.0",
    "prettier": "^1.18.2",
},
"scripts": {
    ...
    "lint": "eslint --ext js cypress",

.eslintrc.js を追加。

module.exports = {
  plugins: [
    "cypress",
    "prettier"
  ],
  env: {
    "cypress/globals": true
  },
  extends: [
    "plugin:cypress/recommended",
    'plugin:prettier/recommended'
  ],
}

基本的にこれで eslint がきくようになる。

npm run lint

テストの作り方

テストはサンプルがたくさんあるので、それらを参考に作れば問題ないはず。

例えば以下のように書く。

const RandExp = require('randexp')
const baseURL = Cypress.env('baseURL')

context('会員登録/ログイン', () => {
  const randomEmail = new RandExp(/([a-z]{8,15})@clas\.style/).gen()
  it('初回会員登録', () => {
    // 一度ログアウト状態にする
    cy.visit(baseURL + 'logout')
    // 一度ログイン画面へ
    cy.visit(baseURL + 'login')
    cy.get('.email')
      .first()
      .type(randomEmail)
      .should('have.value', randomEmail)
    cy.get('[type="submit"]').click()
  })
...

動かし方

開発中は、 cypress open でGUIから操作し、リリース前のCIでのテストは cypress run を実行する。

CIで動かす

Circle CI の場合は、以下のような job を用意すればいけそう。 ※まだ試してない。

version: 2
jobs:
  build:
    docker:
    - image: cypress/base:8
      environment:
        BASE_URL: https://dev.tororo-konbu.com/
    steps:
    - checkout
    - run:
        name: Install dependencies
        command: npm install
    - run:
        name: Run test
        command: npm run cy:run

まとめ

Cypress で E2E テストを導入するまでの手順を書いた。Cypress 思ったより良かったので、今後も使っていくかもしれない。