Cypress.env: テスト環境を動的に制御する

Cypress.env の主な利点は次のとおりです。

テストデータの秘匿化: テストデータ (API キー、パスワードなど) をコードに埋め込む代わりに、Cypress.env を使用して安全に格納できます。
テスト環境の切り替え: 開発、ステージング、本番など、異なる環境間でテストを簡単に実行できます。
テストの構成: テストの実行方法を構成する変数 (ベース URL、タイムアウトなど) を定義できます。

Cypress.env の使用方法

Cypress.env を使用する方法は 2 つあります。

cypress.config.js ファイルで環境変数を設定する

const { env } = require('cypress');

module.exports = {
  env: {
    API_URL: 'https://dev.myapp.com',
    USERNAME: 'user123',
    PASSWORD: 'password123'
  }
};

コマンドラインで環境変数を設定する

npx cypress run --env API_URL=https://dev.myapp.com,USERNAME=user123,PASSWORD=password123

Cypress.env をテスト内で使用する

テスト内で Cypress.env を使用するには、Cypress.env() 関数を使用します。この関数は、設定されたすべての環境変数を返すオブジェクトを返します。

it('should login with valid credentials', () => {
  const username = Cypress.env('USERNAME');
  const password = Cypress.env('PASSWORD');

  cy.visit('https://myapp.com/login');
  cy.get('#username').type(username);
  cy.get('#password').type(password);
  cy.get('button[type="submit"]').click();

  cy.url().should('include', '/dashboard');
});

Cypress.env は、テスト実行時にのみ設定されます。テストが完了すると、変数はクリアされます。
Cypress.env は、テストコードだけでなく、設定ファイルやカスタムコマンドで使用できます。
Cypress.env は、Node.js の環境変数とは異なります。

例

以下の例は、Cypress.env を使用して、異なる環境間で API テストを実行する方法を示しています。

cypress.config.js

const { env } = require('cypress');

module.exports = {
  env: {
    DEV: {
      API_URL: 'https://dev.myapp.com'
    },
    STAGING: {
      API_URL: 'https://staging.myapp.com'
    },
    PROD: {
      API_URL: 'https://myapp.com'
    }
  }
};

test/api.spec.js

it('should get user profile', () => {
  const apiUrl = Cypress.env('API_URL');

  cy.request({
    url: `${apiUrl}/users/1`,
    method: 'GET'
  }).then((response) => {
    expect(response.status).to.equal(200);
    expect(response.body).to.have.property('id', 1);
  });
});

この例では、cypress.config.js ファイルで 3 つの環境 (DEV、STAGING、PROD) を定義しています。テストを実行するには、次のコマンドのいずれかを使用する必要があります。

開発環境で実行: npx cypress run --env DEV
ステージング環境で実行: npx cypress run --env STAGING

テストデータの秘匿化

この例では、Cypress.env を使用して、テストデータ (API キー、パスワードなど) をコードに埋め込む代わりに安全に格納する方法を示します。

cypress.env.json

{
  "API_KEY": "YOUR_API_KEY",
  "PASSWORD": "YOUR_PASSWORD"
}

it('should login with valid credentials', () => {
  const apiKey = Cypress.env('API_KEY');
  const password = Cypress.env('PASSWORD');

  cy.visit('https://myapp.com/login');
  cy.get('#api-key').type(apiKey);
  cy.get('#password').type(password);
  cy.get('button[type="submit"]').click();

  cy.url().should('include', '/dashboard');
});

この例では、cypress.env.json ファイルに API キーとパスワードを格納しています。テストコードでは、Cypress.env を使用してこれらの値を安全に取得し、ログインフォームに入力します。

テスト環境の切り替え

const { env } = require('cypress');

module.exports = {
  env: {
    DEV: {
      API_URL: 'https://dev.myapp.com'
    },
    STAGING: {
      API_URL: 'https://staging.myapp.com'
    },
    PROD: {
      API_URL: 'https://myapp.com'
    }
  }
};

it('should get user profile', () => {
  const apiUrl = Cypress.env('API_URL');

  cy.request({
    url: `${apiUrl}/users/1`,
    method: 'GET'
  }).then((response) => {
    expect(response.status).to.equal(200);
    expect(response.body).to.have.property('id', 1);
  });
});

この例は、テストデータの秘匿化 の例と似ていますが、cypress.config.js ファイルを使用して、異なる環境用の API URL を定義しています。テストを実行するには、次のコマンドのいずれかを使用する必要があります。

テストの構成

この例では、Cypress.env を使用して、テストの実行方法を構成する変数 (ベース URL、タイムアウトなど) を定義する方法を示します。

{
  "BASE_URL": "https://myapp.com",
  "TIMEOUT": 10000
}

it('should visit the home page', () => {
  const baseUrl = Cypress.env('BASE_URL');
  const timeout = Cypress.env('TIMEOUT');

  cy.visit(`${baseUrl}`, { timeout: timeout });

  cy.title().should('equal', 'My App');
});

この例では、cypress.env.json ファイルにベース URL とタイムアウトを定義しています。テストコードでは、Cypress.env を使用してこれらの値を安全に取得し、cy.visit と cy.title コマンドに渡します。

これらの例はほんの一例です。Cypress.env は、さまざまな目的に使用できます。

Cypress.env の代わりに、Node.js の標準的な環境変数を使用することができます。これらの変数は、コマンドラインで設定したり、.env ファイルで定義したりできます。

npx cypress run --env API_URL=https://dev.myapp.com,USERNAME=user123,PASSWORD=password123

カスタム設定ファイル

独自の JSON または JavaScript ファイルを作成して、テスト環境設定を格納することができます。このファイルは、テストコードからインポートして、設定値にアクセスすることができます。

config.json

{
  "API_URL": "https://dev.myapp.com",
  "USERNAME": "user123",
  "PASSWORD": "password123"
}

const config = require('./config.json');

it('should login with valid credentials', () => {
  const baseUrl = config.API_URL;
  const username = config.USERNAME;
  const password = config.PASSWORD;

  // ...
});

テストデータパラメータ

Cypress.env またはカスタム設定ファイルを使用する代わりに、テストデータパラメータを使用して、テストケースに個別の設定値を渡すことができます。

describe('Login', () => {
  it('should login with valid credentials', ({ baseUrl, username, password }) => {
    cy.visit(baseUrl);
    cy.get('#username').type(username);
    cy.get('#password').type(password);
    cy.get('button[type="submit"]').click();

    // ...
  }, {
    baseUrl: 'https://dev.myapp.com',
    username: 'user123',
    password: 'password123'
  });
});

テストフィクスチャ

fixtures/data.json

[
  {
    "baseUrl": "https://dev.myapp.com",
    "username": "user123",
    "password": "password123"
  },
  {
    "baseUrl": "https://staging.myapp.com",
    "username": "user456",
    "password": "password456"
  }
]

it('should login with valid credentials', () => {
  cy.fixture('data').then((data) => {
    const baseUrl = data.baseUrl;
    const username = data.username;
    const password = data.password;

    // ...
  });
});

最適な代替方法の選択

Cypress.env は、多くの場合、テスト環境を管理するためのシンプルなで効果的な方法です。しかし、より複雑な設定が必要な場合、または以下のいずれかに該当する場合は、代替手段を検討する必要があります。

テスト環境に機密情報が含まれている
複数のチームが同じテストコードベースを使用している
テストデータが頻繁に変更される
テストの実行方法を高度にカスタマイズする必要がある