cy.visit() for page navigation in Cypress - Build an Automation Script

Navigate to the homepage using cy.visit()

Preconditions (1)

Step 1: Open the browser

Step 2: Use cy.visit() to go to 'http://localhost:3000'

Step 3: Verify that the URL is exactly 'http://localhost:3000/'

Step 4: Verify that the page contains a visible header with text 'Welcome to Our Site'

✅ Expected Result: The browser navigates to the homepage URL and the page shows the header text 'Welcome to Our Site'

Automation Requirements - Cypress

Assertions Needed:

URL is 'http://localhost:3000/'

Header with text 'Welcome to Our Site' is visible

Best Practices:

Use cy.visit() for navigation

Use cy.url().should() for URL assertion

Use cy.contains() with .should('be.visible') for element visibility

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Homepage Navigation Test', () => {
  it('should navigate to homepage and verify header', () => {
    cy.visit('http://localhost:3000');
    cy.url().should('eq', 'http://localhost:3000/');
    cy.contains('h1', 'Welcome to Our Site').should('be.visible');
  });
});

This test uses cy.visit() to open the homepage URL. Then it checks the URL with cy.url().should('eq', ...) to confirm navigation succeeded. Finally, it looks for an h1 header containing the exact text 'Welcome to Our Site' and asserts it is visible on the page. Cypress automatically waits for elements to appear, so no manual waits are needed.

Common Mistakes - 3 Pitfalls

Using cy.visit() with a relative URL without baseUrl configured

Using cy.wait() after cy.visit() to wait for page load

{'mistake': "Checking URL with cy.url().should('include', 'localhost:3000') instead of exact match", 'why_bad': 'Partial match may pass even if navigation is incomplete or wrong page loaded.', 'correct_approach': "Use exact match with cy.url().should('eq', 'http://localhost:3000/') for precise verification."}

Bonus Challenge

Now add data-driven testing to navigate to three different URLs and verify their headers

Show Hint