Cypressを使ってUIテストを作成してみた

概要

Node.jsで作成された、WebシステムのUIテストにCypressを適用したので、ノウハウを残したいと思います。

検証環境

• Node.js v9.9.0
• npm 5.6.0
• Sails.js 0.12.13
• Cypress 3.1.5

Cypressのインストール

インストール方法は非常に簡単です。以下のコマンドを実行するだけです。

cd /your/project/path
npm install cypress --save-dev

Cypressの起動

./node_modules/.binにバイナリがインストールされるので、以下のコマンドで起動します。

./node_modules/.bin/cypress open

上記のコマンドを実行すると、以下の画面が表示されサンプルテストが表示されます。*.spec.jsをクリックすると、Chromeブラウザが表示され、サンプルテストが実行されます。

オリジナルテストの作成

では、実際にオリジナルのテストを作成してみましょう。フォルダ構成です。

touch {your_project}/cypress/integration/sample_spec.js

https://www.google.com/にアクセスして、画面右上に、左からGmail、画像の順番でリンクが表示されることを確認してみます。

sample_spec.js

describe("Google検索で右上のリンクの確認", () => {
    it('右上に、左からGmail、画像の順番でリンクが表示されること', () => {
        cy.visit('https://www.google.com/')

        cy.get("a.gb_d")
          .should(($elm) => {
                expect($elm.eq(0)).to.contain("Gmail")
                expect($elm.eq(1)).to.contain("画像")
          })          
    })
})

Develop環境とStaging環境の切り替え

こちらのリンクを参考にして、Develop環境とStaging環境でcy.visit()のBaseUrlを切り替えれるようにしましょう。

root\CYPRESS
├─config
│      development.json
│      staging.json
│
├─fixtures
│      example.json
│
├─sample_spec.js
│
│
├─plugins
│      index.js
│
└─support
        commands.js
        index.js

まずは、developmentとstaging用のconfigファイルを作成します。

config/development.json

{
    "baseUrl": "http://hogehoge.com/develop/",
}

config/staging.json

{
    "baseUrl": "http://hogehoge.com/staging/",
}

次に、configの参照方法を、カスタマイズします。これにより、{configFileという環境変数}.jsonというように、環境変数で接続先を変更できるようになります。

plugins/index.js

// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
// promisified fs module
const fs = require('fs-extra')
const path = require('path')

function getConfigurationByFile(file) {
  const pathToConfigFile = path.resolve('.', 'cypress/config', `${file}.json`);

  return fs.readJson(pathToConfigFile);
}

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  // accept a configFile value or use development by default
  const file = config.env.configFile || 'development';

  return getConfigurationByFile(file);
}

テスト結果レポートの出力

こちらのリンクを参考にして、テスト結果を出力してましょう。

まずは、レポーターをインストールします。

npm install --save-dev mochawesome

configにレポーターを設定します。

config/development.json

{
    "reporter": "mochawesome"
}

後はテストを実行すると、以下のようなファイルが生成あれます。

mochawesome-report/mochawesome.html

参考

• 公式サイト：https://www.cypress.io/