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環境の切り替え
[こちらのリンク](https://docs.cypress.io/api/plugins/configuration-api.html#Promises)を参考にして、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);
}
```

## テスト結果レポートの出力
[こちらのリンク](https://docs.cypress.io/guides/tooling/reporters.html#Local-Reporters)を参考にして、テスト結果を出力してましょう。

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

```shell
npm install --save-dev mochawesome
```

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

```config/development.json
{
    "reporter": "mochawesome"
}
```

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

`mochawesome-report/mochawesome.html`

![testkekka.JPG](https://qiita-image-store.s3.amazonaws.com/0/62976/78c07251-ee98-71cd-5ae0-1ef52e932520.jpeg)



## 参考
* 公式サイト：https://www.cypress.io/