My experience with Cypress (Part 1)

Simple .env configuration file for better scalability.

The application that I am currently working on is a multi-tenant application. Hence there are tons of subdomains registered in my application where each domain represents a client.

As a newbie, I was writing code to visit the login page of one of the clients as:

cy.visit(“https://abc.application.co”)

With this, the test suite was running smoothly in the initial days. Day by day, the tests kept adding and so was the logic to visit the login page for each separate test file. Hence it ended with the same line of previous code, ie, cy.visit(“https://abc.application.co”) in every test file.

One day, I had to run the E2E testing on another domain. I literally had to update the login page URL on each individual test file. It was the moment, which triggered me that I was not doing something correctly.

Then came the moment, when I sat down and refactored all the codes and made them loosely coupled and well dynamic. Previously, the URL of the login page was written in a hard-coded manner, ie, cy.visit(“https://abc.application.co”) was defined in every test file to visit the login page. But since, our application is based on multitenancy, defining the static endpoint was not a proper solution.

The code structure that I implemented is shown and explained below:

1. First, install the dotenv and cypress-dotenvpackage using the following command

npm install --save-dev dotenv cypress-dotenv
          
            OR
yarn add --dev dotenv cypress-dotenv

2. Configure the cypress/plugins/index.js file.

const dotenvPlugin = require('cypress-dotenv');
module.exports = (on, config) => {
  config = dotenvPlugin(config)
  return config
}

This thing is even well documented @ https://www.npmjs.com/package/cypress-dotenv

3. Add a .env file at the root directory with the following key-value pairs:

CYPRESS_APP_BASE_URL="https://abc.application.co"
CYPRESS_APP_EMAIL="email@email.com"
CYPRESS_APP_PASSWORD="password"

4. I then added some js files to centralize the config data.

• Create a config directory within root directory.
• Create app.js and index.js file within config directory.
• Add following content in app.js file.

export const appConfig = {
    base_url: Cypress.env("APP_BASE_URL"),
    email: Cypress.env("APP_EMAIL"),
    password: Cypress.env("APP_PASSWORD"),
};

• Add the following content in index.js file.

import { appConfig } from "./app";

export const config = {
    app: appConfig,
};

Taddaaa!!!!!! The setup is done.

The last and only thing to do is to replace the repeated line of code with

cy.visit(config.app.base_url);

Pros of configuring the project with the above-mentioned setup:

• The test becomes loosely coupled. In our example, the URL is now defined and controlled from the single entry point. In case we want to run a test for any other URL of the multi-tenant system, we can simply control it from .env file itself.
• Important data such as credentials to log into the system will be preserved and they don't get exposed to the remote repositories.

More details setup is included at