E2Eテストフレームワーク Cypress の運用Tips

インストール

一般的なケースだとプロジェクト（リポジトリ）にパッケージをインストール

$ npm install --save-dev cypress

ただ上記だと実行バイナリがnpmの中に入ってしまうので $(npm bin)/cypress として呼ばなければならない。
頻繁に使う場合はグローバルインストールで cypress コマンドで呼べるようにしてしておくと便利。（ただしプロジェクトとのバージョン違いが出るので注意）

$ npm install -g cypress

実行方法をpackage.jsonに書いておく

他のメンバーにわかりやすいよう、package.jsonに書いておく。

package.json

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

実行方法

Cypressデスクトップ

$ cypress open

CLI（ヘッドレス）でテストを実行

$ cypress run

環境ファイルを切り替える

例えば環境ファイルが３つあるとして…。

cypress.dev.json

{
  "baseUrl": "https://develop.example.com/"
}

cypress.staging.json

{
  "baseUrl": "https://staging.example.com/"
}

cypress.prod.json

{
  "baseUrl": "https://prod.example.com/"
}

開くときに --env configFile=dev とすると環境ファイルを指定できる。

cypress open --env configFile=dev

特定のspecを実行する

$ cypress run --spec "cypress/integration/examples/actions.spec.js"

記述

Basic認証を通す

cy.visit()に引数で渡す

cy.visit('https://www.acme.com/', {
  auth: {
    username: 'wile',
    password: 'coyote'
  }
})

visit | Cypress Documentation

Basic認証に環境変数を使う場合

cypress.json

{
  "env": {
    "basic_user": "wile",
    "basic_password": "coyote"
  }
}

cy.visit('https://www.acme.com/', {
  auth: {
    username: Cypress.env('basic_auth'),
    password: Cypress.env('basic_password')
  }
})

n番目の子要素を取得

.eq()を使う。

    cy.get('.button').eq(0).click();

テストをするホスト名などの定数

ホスト名設定

シェル側から与える環境変数には CYPRESS_ の接頭語をつけて渡すと、接頭語を省いた変数が Cypress.env() に渡されます。

シェル変数	Cypressの定数
CYPRESS_HOSTNAME	Cypress.env('HOSTNAME')
CYPRESS_USER	Cypress.env('USER')

access.spec.js

   const host = Cypress.env('HOSTNAME');

$ export CYPRESS_HOST=http://localhost:8080/; npm run cypress open

その他

npm runで実行する際に引数を渡す

$ npm run cypress:run -- "--spec" "cypress/integration/example/002_create_test.spec.js"