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

2024-04-02

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'));

  // ...
});

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

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

**方法メリットデメリット**
テストファイル内で直接変数を定義シンプルで分かりやすいテストファイルが冗長になる可能性がある
cy.data() コマンドを使用テストファイルがスッキリするテストデータと環境変数を混同しやすい
環境変数ファイルを使用環境変数を一元管理できる設定ファイルの管理が煩雑になる可能性がある
カスタムコマンドを作成コードの再利用性が高い開発コストがかかる

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




Cypressで要素操作をレベルアップ!prevUntilコマンドの活用術

prevUntilコマンドは、現在の要素から指定された条件を満たす要素までのすべて前の兄弟要素を取得します。取得した要素は、テストや操作の対象として使用できます。構文引数<selector>:現在の要素を取得するためのセレクター<selector>:取得を終了する要素を指定するためのセレクター



Cypress テストをデバッグ・速度制御: pause コマンド活用術

pause()コマンドは、単独で使用することも、引数と組み合わせて使用することもできます。単独で使用する場合:テストの実行を一時停止します。画面中央に「Cypress Paused」というメッセージが表示されます。実行を再開するには、EnterキーまたはSpaceキーを押します。


Cypress テストコードを劇的に改善! "within" の使い方をマスターしよう

上記の例では、selector で指定された要素内でのみ click と type コマンドが実行されます。要素間の切り替えを簡略化: テスト対象の要素階層が深い場合、within を使用することで、各要素へのアクセスを簡潔に記述できます。


Cypressのtriggerコマンドを使いこなしてテストコードを効率的に記述しよう!

triggerコマンドの利点:テストコードを簡潔かつ分かりやすく記述できる複雑なユーザー操作を自動化できる特定のイベントに対する要素の反応を検証できるtriggerコマンドの使い方:triggerコマンドの詳細:イベントの種類は、Cypressドキュメント: URL Cypress triggerを参照


Cypress コマンド "reload" を使う

基本的な使い方:この例では、#some-element をクリックした後、ページをリロードし、#some-element が表示されていないことを確認しています。オプションの指定:cy. reload() コマンドは、オプションを指定して呼び出すことができます。



Cypressでスクリーンショットを撮る:Cypress.Screenshot API徹底解説

手動でスクリーンショットを撮る引数にファイル名を指定することで、保存するファイル名を指定できます。ファイル名は . png 形式で自動的に拡張されます。オプションで、selector を指定して特定の要素のみをキャプチャすることもできます。


Cypress テストコードを劇的に改善! "within" の使い方をマスターしよう

上記の例では、selector で指定された要素内でのみ click と type コマンドが実行されます。要素間の切り替えを簡略化: テスト対象の要素階層が深い場合、within を使用することで、各要素へのアクセスを簡潔に記述できます。


Cypressで要素操作をレベルアップ!prevUntilコマンドの活用術

prevUntilコマンドは、現在の要素から指定された条件を満たす要素までのすべて前の兄弟要素を取得します。取得した要素は、テストや操作の対象として使用できます。構文引数<selector>:現在の要素を取得するためのセレクター<selector>:取得を終了する要素を指定するためのセレクター


Cypress テストをデバッグ・速度制御: pause コマンド活用術

pause()コマンドは、単独で使用することも、引数と組み合わせて使用することもできます。単独で使用する場合:テストの実行を一時停止します。画面中央に「Cypress Paused」というメッセージが表示されます。実行を再開するには、EnterキーまたはSpaceキーを押します。


Cypressのtriggerコマンドを使いこなしてテストコードを効率的に記述しよう!

triggerコマンドの利点:テストコードを簡潔かつ分かりやすく記述できる複雑なユーザー操作を自動化できる特定のイベントに対する要素の反応を検証できるtriggerコマンドの使い方:triggerコマンドの詳細:イベントの種類は、Cypressドキュメント: URL Cypress triggerを参照