Cypress Env Types

Let's say you store the user login information used during tests in your Cypress config object.

cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    env: {
      users: {
        standard: {
          username: 'standard_user',
          password: 'secret_sauce',
        },
        ...
      },
    },
  },
})

A spec can grab the user login information and log in

cypress/e2e/logs-in.cy.ts

import { LoginPage } from '@support/pages/login.page'

it('logs in', () => {
  const user = Cypress.env('users').standard
  LoginPage.login(user.username, user.password)
})

What is the type of the user value? We get it from the Cypress.env('users') object, which is ... "any". This propagates to the fields user.username and user.password

Note: I am using the any-xray VSCode plugin to highlight all any TS values at all times.

Let's fix the Cypress.env('users') type following this StackOverflow advice. We can add Cypress.env method definition to the ambient types file cypress/support/index.d.ts:

cypress/support/index.d.ts

/// <reference types="cypress" />
declare namespace Cypress {
  type LoginInfo = import('../e2e').LoginInfo

  interface Chainable {
   // custom "cy" commands
  }

  interface Cypress {
    /**
     * Returns an object with configured users. Values are set
     * using in the `cypress.config.js` or environment variables.
     * @see https://on.cypress.io/configuration
     */
    env(key: 'users'): {
      /**
       * The "normal" user login information
       */
      standard: LoginInfo
      lockedOut: LoginInfo
      problem: LoginInfo
      glitch: LoginInfo
    }
  }
}

Tip: I am using inline type LoginInfo = import('../e2e').LoginInfo to avoid using import or /// <reference path=... which would change the cypress/support/index.d.ts to a "normal" TS module. I want to preserve cypress/support/index.d.ts as an ambient definition file, see this StackOverflow discussion

Let's take a look at the spec file again.

No more any values in our Cypress spec.

🎓 This blog post is based on a lesson in my Testing The Swag Store online course.