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.

Practice

1. What is the main benefit of setting a baseUrl in Cypress configuration?

easy

A. It disables all network requests except to the base URL.

B. It automatically logs in the user before each test.

C. It allows using relative URLs in cy.visit() to simplify test code.

D. It changes the browser's default homepage.

Solution

1. Step 1: Understand baseUrl purpose

   The baseUrl is used to set the main website address once in Cypress config.

2. Step 2: How baseUrl affects cy.visit()

   When baseUrl is set, you can use relative paths in cy.visit() instead of full URLs.

3. Final Answer:

   It allows using relative URLs in cy.visit() to simplify test code. -> Option C

4. Quick Check:

   baseUrl simplifies URLs in tests = C [OK]

Hint: Remember baseUrl lets you skip typing full URLs in tests [OK]

Common Mistakes:

• Thinking baseUrl logs in users automatically
• Believing baseUrl blocks other network requests
• Confusing baseUrl with browser settings

2. Which of the following is the correct way to set baseUrl in cypress.config.js?

easy

A. export const baseUrl: 'https://example.com';

B. export default { baseUrl = 'https://example.com' }

C. module.exports = { base_url: 'https://example.com' }

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

Solution

1. Step 1: Identify correct syntax for Cypress config

   Cypress config uses CommonJS export with module.exports = {}.

2. Step 2: Check property name and assignment

   The property must be baseUrl (camelCase) and assigned with colon, not equals.

3. Final Answer:

   module.exports = { baseUrl: 'https://example.com' } -> Option D

4. Quick Check:

   Correct config syntax uses module.exports and colon = A [OK]

Hint: Use module.exports with colon for config objects [OK]

Common Mistakes:

• Using equals (=) instead of colon (:) in object
• Writing base_url instead of baseUrl
• Using ES module syntax without transpiling

3. Given baseUrl is set to https://shop.com, what URL will Cypress visit with cy.visit('/cart')?

medium

A. https://shop.com/cart

B. https://shop.com

C. https://shop.com//cart

D. /cart

Solution

1. Step 1: Understand how baseUrl combines with relative paths

   If baseUrl is set, relative paths in cy.visit() append to it.

2. Step 2: Combine baseUrl and path

   Appending /cart to https://shop.com results in https://shop.com/cart.

3. Final Answer:

   https://shop.com/cart -> Option A

4. Quick Check:

   baseUrl + relative path = full URL [OK]

Hint: Relative path in visit appends to baseUrl [OK]

Common Mistakes:

• Expecting double slashes in URL
• Thinking cy.visit uses baseUrl only for root path
• Confusing relative path with absolute URL

4. You set baseUrl to https://app.test but cy.visit('login') fails with a 404 error. What is the likely cause?

medium

A. baseUrl must end with a slash to work correctly.

B. Missing leading slash in cy.visit() path causes wrong URL.

C. Cypress does not support relative URLs with baseUrl.

D. The baseUrl should be set inside the test file, not config.

Solution

1. Step 1: Check how relative paths combine with baseUrl

   Relative paths should start with a slash to append correctly to baseUrl.

2. Step 2: Analyze given path 'login'

   Without leading slash, 'login' appends incorrectly, causing a wrong URL and 404 error.

3. Final Answer:

   Missing leading slash in cy.visit() path causes wrong URL. -> Option B

4. Quick Check:

   Always start relative paths with '/' in cy.visit [OK]

Hint: Start relative paths with '/' in cy.visit to avoid errors [OK]

Common Mistakes:

• Assuming baseUrl needs trailing slash
• Thinking Cypress disallows relative URLs
• Setting baseUrl inside test files instead of config

5. You want to run tests on two environments: https://dev.site and https://prod.site. How can you configure Cypress to switch baseUrl easily?

hard

A. Use environment variables and set baseUrl dynamically in cypress.config.js.

B. Manually edit baseUrl in config before each test run.

C. Write full URLs in every cy.visit() call instead of using baseUrl.

D. Set baseUrl only once and ignore environment differences.

Solution

1. Step 1: Understand environment switching need

   Tests must run on different URLs without changing code manually.

2. Step 2: Use environment variables in config

   Set baseUrl in cypress.config.js using environment variables to switch easily.

3. Final Answer:

   Use environment variables and set baseUrl dynamically in cypress.config.js. -> Option A

4. Quick Check:

   Dynamic baseUrl via env vars = flexible testing [OK]

Hint: Use env vars to switch baseUrl without code changes [OK]

Common Mistakes:

• Editing config manually each time
• Avoiding baseUrl and writing full URLs everywhere
• Ignoring environment differences in tests