Base URL configuration in Cypress - Test Execution Trace

Test Overview

This test checks that the base URL is correctly configured in Cypress. It verifies that the test navigates to the base URL automatically without specifying the full URL in the test code.

Test Code - Cypress

Cypress

describe('Base URL Configuration Test', () => {
  it('should visit the base URL and check the page title', () => {
    cy.visit('/');
    cy.title().should('include', 'Example Domain');
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Cypress test runner is ready	—	PASS
2	Cypress opens browser	Browser window opens with Cypress controlled session	—	PASS
3	Cypress visits '/' which uses baseUrl from configuration	Browser navigates to 'https://example.com/' (baseUrl + '/')	URL is 'https://example.com/'	PASS
4	Cypress gets the page title	Page loaded with title 'Example Domain'	Title includes 'Example Domain'	PASS
5	Test ends	Test completed successfully	—	PASS

Failure Scenario

Failing Condition: Base URL is not set or incorrect in Cypress configuration

Execution Trace Quiz - 3 Questions

What does cy.visit('/') do when baseUrl is configured?

A Navigates to the baseUrl plus '/'

B Navigates to the root of the local file system

C Navigates to 'http://localhost/' by default

D Throws an error because URL is incomplete

Key Result

Always configure baseUrl in Cypress to simplify test code and avoid hardcoding full URLs. This makes tests easier to maintain and run in different environments.

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