Set up routes and users

Environments

Cypress boilerplate comes with 3 environments set up:

• staging (default)
• release
• production

Routes

The Base URL value we've entered in the last step is set to all three environments, and we can see that in the following file:

Set up

cypress/fixtures/saucedemo/routes.json

{
  "envs": {
    "staging": {
      "baseUrl": "https://www.saucedemo.com/v1/index.html"
    },
    "release": {
      "baseUrl": "https://www.saucedemo.com/v1/index.html"
    },
    "production": {
      "baseUrl": "https://www.saucedemo.com/v1/index.html"
    }
  }
}

Here we can change the baseUrl for release and production environment.

In the case of our demo project for saucedemo, baseUrls for other environments than staging don't exist, so we won't change anything for now.

Now, for the purpose of an example we're going to add our first path to the commonPaths part

"commonPaths": {
  "inventory": "/inventory.html"
},

So our end file looks like this:

cypress/fixtures/saucedemo/routes.json

{
  "commonPaths": {
    "inventory": "/inventory.html"
  },
  "envs": {
    "staging": {
      "baseUrl": "https://www.saucedemo.com/v1/index.html"
    },
    "release": {
      "baseUrl": "https://www.saucedemo.com/v1/index.html"
    },
    "production": {
      "baseUrl": "https://www.saucedemo.com/v1/index.html"
    }
  }
}

Usage -> getUrl

cypress/e2e/saucedemo/default.cy.ts

import { getUrl } from '@support/helpers'

describe('Inventory', () => {
  it('Visit inventory', () => {
    // Visits baseUrl
    cy.visit(getUrl()) // Output: https://www.saucedemo.com/v1/index.html

    // Visits "baseUrl + commonPaths.inventory" (set up in commonPaths above)
    cy.visit(getUrl('inventory')) // Output: https://www.saucedemo.com/v1/inventory.html
  })
})

Tip

The getUrl method will return the baseUrl from the current environment that is set up when running the project. We will see how to set different environments a bit later.

Usage -> routes

cypress/e2e/saucedemo/default.cy.ts

import { routes } from '@fixtures/saucedemo/routes.json'
import { env } from '@support/helpers'

describe('Inventory', () => {
  it('Visit inventory', () => {
    // Visits baseUrl
    cy.visit(routes.envs[env].baseUrl)) // Output: https://www.saucedemo.com/v1/index.html

    // Visits "baseUrl + commonPaths.inventory"
    cy.visit(routes.envs[env].baseUrl + routes.commonPaths.inventory) // Output: https://www.saucedemo.com/v1/inventory.html
  })
})

Users

Now let's set up some users to test our saucedemo site.

They provided us with 4 different users.

Username	Password
standard_user	secret_sauce
locked_out_user	secret_sauce
problem_user	secret_sauce
performance_glitch_user	secret_sauce

Set up

We are going to edit the users.json file and add our users to staging environment:

In our case, we deleted the email property since its not needed, and we also left other environments untouched.

cypress/fixtures/saucedemo/users.json

{
  "staging": {
    "standard": {
      "name": "standard_user",
      "password": "secret_sauce"
    },
    "locked_out": {
      "name": "locked_out_user",
      "password": "secret_sauce"
    },
    "problem": {
      "name": "problem_user",
      "password": "secret_sauce"
    },
    "performance_glitch": {
      "name": "performance_glitch_user",
      "password": "secret_sauce"
    }
  },
  "release": {
    "primary": {
      "name": "User name",
      "email": "test@cypress_template_test.com",
      "password": "user password"
    },
    "secondary": {
      "name": "User name",
      "email": "test@cypress_template_test.com",
      "password": "user password"
    }
  },
  "production": {
    "primary": {
      "name": "User name",
      "email": "test@cypress_template_test.com",
      "password": "user password"
    },
    "secondary": {
      "name": "User name",
      "email": "test@cypress_template_test.com",
      "password": "user password"
    }
  }
}

Usage

We can import and use our users like this:

cypress/e2e/saucedemo/default.cy.ts

import { users } from '@support/helpers'

describe('Inventory', () => {
  it('Visit inventory', () => {
    const { name, password } = users.standard

    cy.login(name, password)

    // Rest of code
  })
})

Tip

Importing users like this returns you users from the current environment that is run.

Local users

You can also have local file for users which is ignored by GIT.

Cypress boilerplate will use this file if it exists and named exactly like this.

It must be located at ./cypress/fixtures/saucedemo/users.local.json

Let's create it with only staging environment set:

./cypress/fixtures/saucedemo/users.local.json

{
  "staging": {
    "standard": {
      "name": "standard_user_local",
      "password": "secret_sauce"
    },
    "locked_out": {
      "name": "locked_out_user_local",
      "password": "secret_sauce"
    },
    "problem": {
      "name": "problem_user_local",
      "password": "secret_sauce"
    },
    "performance_glitch": {
      "name": "performance_glitch_user_local",
      "password": "secret_sauce"
    }
  }
}

If you would have run Cypress now with

$ npx cypress run -e product=saucedemo,env=staging

these users would be used instead of the standard users.json fixture.

TIP

You can set up your local users so when you run Cypress locally it won't interfere with the existing pipeline run.

The pipeline should use the normal users fixture.

tip

If you at some point want to use the normal users, just rename the local users

./cypress/fixtures/saucedemo/users.local.json -> ./cypress/fixtures/saucedemo/users.local-something.json

The renamed file will still be ignored because the pattern inside .gitignore is users.local*.json