Cypress Test Automation: Configure the Framework to Execute Scripts in Multiple Environments

Image source :

Multiple execution environments ensure that our application is rigorously tested before it is deployed and made available to end users.

We use environments to create “stages” of the application that we consider good for releasing.
Each environment has its own unique purpose. There are different standards of environments that are used in the industry where almost every process starts at the ‘development’ stage and ends with ‘production’.
For example, the most commonly used environments are Development, QA, Staging & Production.

Therefore, in order to assure that the application works fine in each environment, we have to consider the execution of our test automation suite also in some of these multiple environments.
When it comes to testing, we better execute our automation code at least in QA and Staging environments plus only applicable scenarios in a Production environment as well.

Let’s discuss how could we achieve this in “Cypress Test Automation Framework”.

Even though there are different ways to achieve this, I’m going to explain here is the method which I used in my test automation framework.

Step 1: Create a file as ‘utility.js’

  • Navigate to the cypress/support folder in your Project
    [Project Folder Root > cypress folder > support folder]
  • Create a Typescript file as utility.js inside the ‘Support’ folder
  • Below is an example of the utility.js file

Step 2: Add code to ‘utility.js’ file to return the URL based on the Cypress environment variables

Here we need to return the specific environment URL based on the value of the environment variable.
Cypress environment variable value will be passed from the command line / package.json file(will be explained in the later steps).

//utility.js

export class Utility {
getBaseUrl() {
let envi = Cypress.env('ENV'); //Get the value of environment variable i.e ENV
if (envi == 'production') //Check the value
return ""; //return desired url
else if (envi == 'staging')
return "";
else if (envi == 'qa')
return "";
}
}

If we analyze the above example,

  • getBaseUrl() Function : This will return a single URL based on the environment variable value we pass in the package.json file
  • ENV: ENV is an environment variable that will be passed from the package.json file
  • let envi = Cypress.env('ENV'): This will save the value of the Cypress environment variable to a local variable called envi
  • if-else conditions : This will check the value of the environment variable i.e value of ENV in the package.json file
  • if (envi == 'production'):If the ENV=production in package.json file, system will return the production environment URL. Likewise for staging & QA environments.

Step 3: Create a spec file and call the base URL

Now we are ready with our own utility function which will return the environment-specific URLs.
Next , let’s create a Cypress spec file to call the base URL by importing the utility.js file.

//test1.spec.js

//Import Utility from support folder
import { Utility } from "../../../support/utility"

//Call getBaseUrl() to get environment specific url value
const url = new Utility().getBaseUrl();

describe('Verify successful login to ABC Portal', function() {
it('User should enter correct credentials', () => {
cy.visit(url); //use url variable
});
});

Step 4: Configure package.json file with environment variables

According to the example spec file given, the path to that spec is ‘cypress/integration/Smoke_Suit’.

Therefore we can configure the ‘package.json’ file to execute the test specs under ‘Smoke_Suit’ in chrome browser & multiple environments as follows;

//package.json"qa:smoke:scripts": "cypress run --spec cypress/integration/Smoke_Suit/*.js --env ENV=qa --browser chrome","stage:smoke:scripts": "cypress run --spec cypress/integration/Smoke_Suit/*.js --env ENV=staging --browser chrome","prod:smoke:scripts": "cypress run --spec cypress/integration/Smoke_Suit/*.js --env ENV=production --browser chrome","qa:smoke:test": "npm run qa:smoke:scripts ","stage:smoke:test": "npm run stage:smoke:scripts ","prod:smoke:test": "npm run prod:smoke:scripts ",

Step 4: Execute the Test Suite in multiple environments as specified

Open a new terminal & execute the suites in the wanted environment as follows;

To Execute in QA Environment

npm run qa:smoke:test

To Execute in Staging Environment

npm run stage:smoke:test

To Execute in Production Environment

npm run prod:smoke:test

--

--

--

Senior Lead — Software Quality Engineering

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Debugging JavaScript: Chrome DevTools 101

JavaScript debugging — Chrome DevTools 101

Object-Oriented Programming in JavaScript

Format and Lint Code on File Save

📐 Web development as its commitments

Getting Started with GraphQL

Parcel Basic Setup for Vanilla JS and React

Implementing Memoization in Javascript

A better experience traveling using Local Context Library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dilusha Rasangi Kumarage

Dilusha Rasangi Kumarage

Senior Lead — Software Quality Engineering

More from Medium

Playwright: The Future of Test Automation

Hands-On! Postman/Newman CI/CD Integration

Successful Windows Desktop App Test Automation with Appium

Scriptless test automation: revealing the truth via 3 misconceptions | Software Testing Company…