Cypress 10 - Setup and architecture

Author: Kamil Łazarz

Problem context

Our goal was to create a test environment that easily allows us to switch between alpha, staging, and production.

Each environment has a similar pattern, but some input and output are different, so we need separate environment files.

Installation

Create cypress directory, then open it in your terminal and run:

yarn add cypress typescript --dev

Configure tsconfig.json

Create a tsconfig.json inside your cypress folder with the following configuration:

{
  "compilerOptions": {
    "baseUrl": "./",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Configure cypress.config.ts

Create a cypress.config.ts inside your cypress folder with the following configuration:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    experimentalSessionAndOrigin: false,
    setupNodeEvents(on, config) {
      return require("./cypress/plugins/index.js")(on, config);
    },
  },
});

Configure package.json

Add following scripts to your package.json inside your cypress folder.

  "scripts": {
    "cypress": "npx cypress run --env ENV=local",
    "cypress:alpha": "npx cypress run --env ENV=alpha",
    "cypress:staging": "npx cypress run --env ENV=staging",
    "cypress:production": "npx cypress run --env ENV=production",
    "cypress-open": "npx cypress open --env ENV=local",
    "cypress-open:alpha": "npx cypress open --env ENV=alpha",
    "cypress-open:staging": "npx cypress open --env ENV=staging",
    "cypress-open:production": "npx cypress open --env ENV=production"
  },

Configure cypress environment variables

Create cypress.env.json file inside your cypress folder with the following configuration:

{
  "baseUrl": "https://domain.com/",
  "viewports": {
    "desktop": {
      "name": "Desktop",
      "width": 1920,
      "height": 1080
    },
    "desktop-small": {
      "name": "Small desktop",
      "width": 1366,
      "height": 768
    },
    "tablet": {
      "name": "Tablet",
      "width": 768,
      "height": 1024
    },
    "mobile": {
      "name": "Mobile",
      "width": 414,
      "height": 896
    },
    "mobile-small": {
      "name": "Small mobile",
      "width": 360,
      "height": 640
    }
  },
  "responseTimeout": 10000
}

Add environment support

Create a utility.ts file inside cypress/support folder with the following configuration:

Cypress.env({
  ...Cypress.env(),
  ...require("../../config/" + Cypress.env("ENV") + ".json"),
});

then, add the following import to your cypress/support/e2e.ts file:

import "./utility";

Now it's time to add environment files. In the main Cypress folder, create the config folder, create an env file for specific environments, for example, config/alpha.json, and fill the configuration.

{
  "baseUrl": "https://domain.com/",
  "credentials": {
    "b2c": {
      "username": "",
      "password": ""
    },
    "b2b": {
      "username": "",
      "password": ""
    },
    "expired_subscription": {
      "username": "",
      "password": ""
    }
  }
}

Tested on

Cypress | v10.3.0

TypeScript | v4.7.2