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