Cypress テストで環境変数を使いこなす！ Cypress.env の徹底解説

Cypress.env を使ってテスト環境を賢く操る

• 設定方法

Cypress.env は、以下の方法で設定できます。

1. cypress.json ファイル

{
  "env": {
    "baseUrl": "https://dev.example.com",
    "apiKey": "1234567890"
  }
}

1. JavaScript コード

Cypress.env('baseUrl', 'https://stage.example.com');
Cypress.env('apiKey', '9876543210');

1. コマンドライン

cypress run --env baseUrl=https://prod.example.com apiKey=0123456789

• 参照方法

Cypress テストの中で、Cypress.env で設定した変数は Cypress.env() を使って参照できます。

cy.visit(Cypress.env('baseUrl'));
cy.request({
  url: Cypress.env('apiUrl'),
  headers: {
    'Authorization': `Bearer ${Cypress.env('apiKey')}`
  }
});

Cypress.env の活用例

• 異なる環境でテストを実行

cypress.json ファイルに異なる環境の設定を記述することで、テストを実行する環境を切り替えることができます。

{
  "env": {
    "dev": {
      "baseUrl": "https://dev.example.com",
      "apiKey": "1234567890"
    },
    "stage": {
      "baseUrl": "https://stage.example.com",
      "apiKey": "9876543210"
    },
    "prod": {
      "baseUrl": "https://prod.example.com",
      "apiKey": "0123456789"
    }
  }
}

• テストデータや設定を動的に変更

JavaScript コードを使って、テストデータや設定を動的に変更することができます。

const baseUrl = Cypress.env('baseUrl');

if (Cypress.env('isProd')) {
  // 本番環境の場合、テストデータの量を減らす
} else {
  // 開発環境またはステージング環境の場合、すべてのテストデータを使用する
}

Cypress.env の注意点

• Cypress.env で設定した変数は、テストファイル内でのみ有効です。
• Cypress.env で設定した変数は、他の JavaScript ライブラリから直接参照することはできません。

Cypress.env を活用したサンプルコード集

// cypress.json

{
  "env": {
    "dev": {
      "baseUrl": "https://dev.example.com",
      "apiKey": "1234567890"
    },
    "stage": {
      "baseUrl": "https://stage.example.com",
      "apiKey": "9876543210"
    },
    "prod": {
      "baseUrl": "https://prod.example.com",
      "apiKey": "0123456789"
    }
  }
}

// test.spec.js

it('should visit the correct URL', () => {
  cy.visit(Cypress.env('baseUrl'));

  // ...
});

テストデータや設定を動的に変更

// test.spec.js

const baseUrl = Cypress.env('baseUrl');

if (Cypress.env('isProd')) {
  // 本番環境の場合、テストデータの量を減らす
  cy.fixture('small-data.json').then((data) => {
    // ...
  });
} else {
  // 開発環境またはステージング環境の場合、すべてのテストデータを使用する
  cy.fixture('large-data.json').then((data) => {
    // ...
  });
}

環境変数を使った条件分岐

// test.spec.js

const isDebugMode = Cypress.env('isDebugMode');

if (isDebugMode) {
  // デバッグモードの場合、詳細なログを出力する
  cy.log('**Debug mode enabled**');
  // ...
} else {
  // デバッグモードではない場合、通常の処理を行う
  // ...
}

API キーなどの機密情報を安全に扱う

// cypress.env.json

{
  "env": {
    "apiKey": "******" // 実際の API キーはここに記述しない
  }
}

// test.spec.js

const apiKey = Cypress.env('apiKey');

// テストの中で API キーを使用する
cy.request({
  url: 'https://api.example.com',
  headers: {
    'Authorization': `Bearer ${apiKey}`
  }
});

コマンドラインから環境変数を設定

cypress run --env baseUrl=https://custom.example.com apiKey=my-secret-key

これらのサンプルコードは、Cypress.env の使い方を理解するのに役立ちます。

ご自身のテストケースに合わせて、コードを自由にカスタマイズしてください！

Cypress.env の代替方法

テストファイル内で直接変数を定義

const baseUrl = 'https://dev.example.com';
const apiKey = '1234567890';

it('should visit the correct URL', () => {
  cy.visit(baseUrl);

  // ...
});

cy.data() コマンドを使用

cy.data('baseUrl', 'https://dev.example.com');
cy.data('apiKey', '1234567890');

it('should visit the correct URL', () => {
  cy.visit(cy.data('baseUrl'));

  // ...
});

環境変数ファイルを使用

# .env

BASE_URL=https://dev.example.com
API_KEY=1234567890

// test.spec.js

require('dotenv').config();

it('should visit the correct URL', () => {
  cy.visit(process.env.BASE_URL);

  // ...
});

カスタムコマンドを作成

// commands/env.js

Cypress.Commands.add('setEnv', (key, value) => {
  Cypress.env(key, value);
});

// test.spec.js

cy.setEnv('baseUrl', 'https://dev.example.com');
cy.setEnv('apiKey', '1234567890');

it('should visit the correct URL', () => {
  cy.visit(Cypress.env('baseUrl'));

  // ...
});

どの方法を選択するかは、プロジェクトの規模や要件によって異なります。

以下は、それぞれの方法のメリットとデメリットです。

最適な方法を選択して、効率的なテスト開発を実現しましょう！