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

Image source : https://www.neovasolutions.com/2020/04/20/cypress-io-the-future-of-test-automation-tool-for-both-developers-and-qa/

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 "https://www.proudction-website.com"; //return desired url
        else if (envi == 'staging')
            return "https://www.staging-website.com";
        else if (envi == 'qa')
            return "https://www.qa-website.com";
    }
}

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