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:
- First, install the
dotenv and cypress-dotenv
package using the following command
npm install --save-dev dotenv cypress-dotenv
ORyarn 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 withinroot
directory. - Create
app.js
andindex.js
file withinconfig
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,
};
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 otherURL
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