Base URL configuration in Cypress - Build an Automation Script

Verify navigation using baseUrl configuration in Cypress

Preconditions (2)

Step 1: Open Cypress test runner

Step 2: Write a test that visits '/' using cy.visit('/')

Step 3: Check that the page URL is 'https://example.com/'

Step 4: Verify that the page contains a visible element with id 'main-content'

✅ Expected Result: The test navigates to 'https://example.com/' using the baseUrl and confirms the main content is visible

Automation Requirements - Cypress

Assertions Needed:

URL is 'https://example.com/' after visiting '/'

Element with id 'main-content' is visible

Best Practices:

Use cy.visit('/') to leverage baseUrl configuration

Use cy.url() to assert current URL

Use cy.get() with id selector for element

Use should('be.visible') for visibility assertion

Automated Solution

Cypress

describe('Base URL configuration test', () => {
  it('should navigate to baseUrl and verify main content', () => {
    cy.visit('/');
    cy.url().should('eq', 'https://example.com/');
    cy.get('#main-content').should('be.visible');
  });
});

This test uses cy.visit('/') which automatically prepends the baseUrl set in cypress.config.js. We then check the full URL with cy.url() to confirm navigation succeeded. Finally, we verify the main content is visible by selecting the element with id='main-content' and asserting it is visible. This approach ensures the baseUrl configuration is correctly used and the page loads as expected.

Common Mistakes - 3 Pitfalls

{'mistake': "Hardcoding full URL in cy.visit() instead of using '/'", 'why_bad': 'This bypasses the baseUrl configuration and makes tests less flexible and harder to maintain.', 'correct_approach': "Use cy.visit('/') to leverage the baseUrl setting for easier environment changes."}

{'mistake': "Using incorrect selector syntax like cy.get('main-content') without '#' for id", 'why_bad': 'This will fail to find the element because it is missing the id selector prefix.', 'correct_approach': "Use cy.get('#main-content') to correctly select element by id."}

Not asserting URL after navigation

Bonus Challenge

Now add tests to verify navigation to '/about' and '/contact' pages using baseUrl

Show Hint

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