CypressのE2Eテストに使用する環境変数を設定する

E2Eテストを行う際に、表示する画面や認証に使用する情報などテストごとにハードコーディングしていると、変更があった際修正が大変になるので、環境変数として管理することとしました。

環境変数の記載するファイル

E2Eテストに使用する環境変数はCypressをinstallしたプロジェクト配下にあるcypress.config.jsというファイルに記載していきます。

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    ここに書いていく
  },
});

環境変数を設定する

では実際に設定していこうと思います。
こちらは自社サイトのトップ画面へ遷移するテストコードとなります

cypress/e2e/spec.cy.jp

describe("test spec", () => {
  it("test1", () => {
    cy.visit("https://appswingby.com"); 
  });
});

こちらの「https://appswingby.com」を環境変数化するので、cypress.config.jsに追記をしていきます

cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: "https://appswingby.com",　//こちらを追記
  },
});

cypress.config.jsに追記した環境変数を使用する

設定した環境変数に置き換えていきます

cypress/e2e/spec.cy.jp

describe("test spec", () => {
  it("test1", () => {
    cy.visit(Cypress.config("baseUrl")); 
  });
});

テストコードではCypress.config(“××××”)と記載することで環境変数が使用できるようです。

テスト実行

最後に、期待する動作が行われているか確認してみましょう

cypress/e2e/spec.cy.jp

describe("test spec", () => {
  const baseUrl = Cypress.config("baseUrl");
  it("test1", () => {
    cy.visit(baseUrl);
    cy.url().should("include", "https://appswingby.com");
  });
//▲Topページへ遷移できるか確認するテスト

  it("test2", () => {
    const path = "/solution";
    const fullUrl = baseUrl + path;
    cy.visit(fullUrl);
    cy.url().should("include", "https://appswingby.com/solution");
  });
//▲ソリューションページ(複合したURL)へ遷移できるか確認するテスト
});

テストは成功したようです！認証周りの情報もこのようにまとめて環境変数を使用して記載していくと良さそうですね。