Test configuration per environment in Cypress - Build an Automation Script

Verify login functionality using environment-specific configuration

Preconditions (3)

Step 1: Set Cypress environment to 'development'

Step 2: Open the login page using the base URL from the 'development' environment configuration

Step 3: Enter username 'devUser' in the username field

Step 4: Enter password 'devPass123' in the password field

Step 5: Click the login button

Step 6: Verify that the URL contains '/dashboard' indicating successful login

Step 7: Set Cypress environment to 'production'

Step 8: Open the login page using the base URL from the 'production' environment configuration

Step 9: Enter username 'prodUser' in the username field

Step 10: Enter password 'prodPass123' in the password field

Step 11: Click the login button

Step 12: Verify that the URL contains '/dashboard' indicating successful login

✅ Expected Result: The login succeeds in both environments using the correct base URL and credentials, and the user is redirected to the dashboard page.

Automation Requirements - Cypress

Assertions Needed:

Verify URL contains '/dashboard' after login in each environment

Best Practices:

Use Cypress environment variables to manage base URLs and credentials

Use cy.visit() with environment-specific base URL

Use data-test attributes or stable selectors for locating elements

Avoid hardcoding URLs or credentials in test code

Use beforeEach hook to set up test preconditions

Keep tests isolated and repeatable

Automated Solution

Cypress

/// <reference types="cypress" />

describe('Login tests per environment', () => {
  const environments = [
    {
      name: 'development',
      baseUrl: Cypress.env('devBaseUrl'),
      username: Cypress.env('devUsername'),
      password: Cypress.env('devPassword')
    },
    {
      name: 'production',
      baseUrl: Cypress.env('prodBaseUrl'),
      username: Cypress.env('prodUsername'),
      password: Cypress.env('prodPassword')
    }
  ];

  environments.forEach(({ name, baseUrl, username, password }) => {
    context(`Login test on ${name} environment`, () => {
      beforeEach(() => {
        cy.visit(baseUrl + '/login');
      });

      it('should login successfully and redirect to dashboard', () => {
        cy.get('[data-test=username]').clear().type(username);
        cy.get('[data-test=password]').clear().type(password);
        cy.get('[data-test=login-button]').click();

        cy.url().should('include', '/dashboard');
      });
    });
  });
});

This test script uses Cypress to automate login tests for two environments: development and production.

We define an array environments holding the environment name, base URL, username, and password. These values come from Cypress environment variables, so no sensitive data is hardcoded.

For each environment, we create a test context. Before each test, we visit the login page using the environment's base URL.

The test enters the username and password into fields identified by data-test attributes, clicks the login button, and asserts that the URL includes /dashboard to confirm successful login.

This approach keeps tests clean, reusable, and environment-aware.

Common Mistakes - 4 Pitfalls

Hardcoding URLs and credentials directly in the test code

Using brittle selectors like CSS classes or element indexes

Not waiting for page load or elements before interacting

Mixing environment logic inside test steps instead of parameterizing

Bonus Challenge

Now add data-driven testing with 3 different sets of user credentials per environment to verify login success and failure cases.

Show Hint