Base URL configuration in Cypress

Introduction

Base URL configuration helps you set a main website address once. This way, you don't have to write the full address every time in your tests.

When testing a website that has many pages and you want to avoid repeating the full URL.

When you want to easily switch between different environments like development, testing, and production.

When you want your test code to be cleaner and easier to read.

When you want to reduce mistakes from typing full URLs multiple times.

When you want to run the same tests on different websites by just changing one setting.

Syntax

Cypress

In cypress.config.js or cypress.config.ts:

module.exports = {
  e2e: {
    baseUrl: 'https://example.com'
  }
};

The baseUrl is the main address for your website.

Use cy.visit('/') to go to the base URL in your tests.

Examples

Sets the base URL to 'https://myapp.com'.

Cypress

module.exports = {
  e2e: {
    baseUrl: 'https://myapp.com'
  }
};

Visits the base URL set in the config.

Cypress

cy.visit('/')

Visits 'https://myapp.com/login' if baseUrl is 'https://myapp.com'.

Cypress

cy.visit('/login')

Sample Program

This test uses the base URL set in the config. The first test visits the homepage. The second test visits a specific page using a relative path.

Cypress

// cypress.config.js
module.exports = {
  e2e: {
    baseUrl: 'https://example.cypress.io'
  }
};

// In a test file: example_spec.js

describe('Base URL Test', () => {
  it('Visits the base URL homepage', () => {
    cy.visit('/');
    cy.contains('Kitchen Sink').should('be.visible');
  });

  it('Visits a page using relative URL', () => {
    cy.visit('/commands/actions');
    cy.url().should('include', '/commands/actions');
  });
});

Important Notes

Always set baseUrl in your Cypress config to avoid repeating full URLs.

You can override baseUrl in specific tests by giving a full URL to cy.visit().

Using baseUrl makes switching environments easier by changing one place.

Summary

Base URL saves time by setting the main website address once.

Use relative paths in cy.visit() to navigate pages.

It helps keep tests clean and easy to update.