Why navigation testing validates routing in Cypress - Automation Benefits in Action

Verify navigation routes correctly update URL and page content

Preconditions (1)

Step 1: Click on the 'About' link in the navigation menu

Step 2: Observe the URL changes to '/about'

Step 3: Verify the About page content is displayed

Step 4: Click on the 'Contact' link in the navigation menu

Step 5: Observe the URL changes to '/contact'

Step 6: Verify the Contact page content is displayed

✅ Expected Result: The URL updates correctly for each navigation link and the corresponding page content is shown

Automation Requirements - Cypress

Assertions Needed:

URL includes expected path after navigation

Page content matches expected for each route

Best Practices:

Use cy.visit() to start at home page

Use cy.get() with semantic selectors for navigation links

Use cy.url() to assert URL changes

Use cy.contains() or cy.get() to verify page content

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Navigation Routing Test', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should navigate to About page and verify URL and content', () => {
    cy.get('nav').contains('About').click();
    cy.url().should('include', '/about');
    cy.get('main').should('contain.text', 'About Us');
  });

  it('should navigate to Contact page and verify URL and content', () => {
    cy.get('nav').contains('Contact').click();
    cy.url().should('include', '/contact');
    cy.get('main').should('contain.text', 'Contact Information');
  });
});

This test suite uses Cypress to automate navigation testing.

beforeEach ensures each test starts on the home page.

Each test clicks a navigation link by finding it inside the <nav> element using cy.get('nav').contains('LinkText'). This simulates a user clicking the link.

Then cy.url().should('include', '/expected-path') verifies the URL changed correctly, confirming routing works.

Finally, cy.get('main').should('contain.text', 'Expected Content') checks the page content updated to the correct page, ensuring the navigation loaded the right content.

We avoid hardcoded waits because Cypress automatically waits for elements and URL changes, making tests reliable and fast.

Common Mistakes - 3 Pitfalls

Using hardcoded waits like cy.wait(500) before checking URL or content

{'mistake': 'Selecting navigation links by brittle selectors like nth-child or absolute XPath', 'why_bad': 'These selectors break easily if the page structure changes, making tests fragile.', 'correct_approach': "Use semantic selectors like cy.get('nav').contains('LinkText') that are more stable and readable."}

Not verifying both URL and page content after navigation

Bonus Challenge

Now add data-driven testing with 3 different navigation links and their expected URLs and page contents

Show Hint