Why navigation testing validates routing in Cypress - Framework Benefits

Framework Mode - Why navigation testing validates routing

Folder Structure of a Cypress Navigation Test Framework

  cypress/
  ├── e2e/
  │   ├── navigation/
  │   │   ├── home_navigation.cy.js      # Tests for home page navigation
  │   │   ├── dashboard_navigation.cy.js # Tests for dashboard routing
  │   ├── login.cy.js                    # Login related tests
  ├── fixtures/
  │   └── users.json                    # Test data for users
  ├── support/
  │   ├── commands.js                   # Custom Cypress commands
  │   ├── e2e.js                       # Global setup for tests
  ├── pages/
  │   ├── HomePage.js                   # Page Object for Home
  │   ├── DashboardPage.js              # Page Object for Dashboard
  ├── cypress.config.js                 # Cypress configuration file
  └── tsconfig.json                     # TypeScript config if used
  

Test Framework Layers

• Test Layer (cypress/e2e/navigation/): Contains test files that simulate user navigation and verify routing behavior.
• Page Object Layer (cypress/pages/): Encapsulates page elements and navigation methods to keep tests clean and reusable.
• Support Layer (cypress/support/): Holds custom commands and global test setup like login helpers or route intercepts.
• Fixtures Layer (cypress/fixtures/): Stores static test data such as user credentials or expected URLs.
• Configuration Layer (cypress.config.js): Defines environment variables, base URLs, browser settings, and test timeouts.

Configuration Patterns

To handle different environments and browsers, use cypress.config.js with environment variables:

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000',
    env: {
      username: process.env.USERNAME || 'testuser',
      password: process.env.PASSWORD || 'password123'
    },
    setupNodeEvents(on, config) {
      // Add plugins or event listeners here
    },
    specPattern: 'cypress/e2e/**/*.cy.js',
    defaultCommandTimeout: 8000
  }
})
  

Use cy.visit() with relative URLs to test navigation and routing consistently across environments.

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or integrate with mochawesome reporter for detailed HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run navigation tests on every push or pull request.
• Fail the build if navigation tests fail to ensure routing issues are caught early.
• Use screenshots and video recordings from Cypress for debugging failed navigation tests.

Best Practices for Navigation Testing Framework

• Use Page Objects: Abstract navigation actions and page elements to keep tests readable and maintainable.
• Validate URLs and Page Content: After navigation, assert the URL and visible page elements to confirm routing success.
• Use Explicit Waits: Wait for page elements or route changes to avoid flaky tests.
• Test Both Direct and Indirect Navigation: Check navigation via UI clicks and direct URL visits.
• Isolate Tests: Each navigation test should start from a known state to avoid dependencies.

Self-Check Question

Where in this folder structure would you add a new page object for the Profile page navigation?

Key Result

A Cypress navigation testing framework validates routing by organizing tests, page objects, and configuration to simulate user navigation and verify URLs and page content.

Practice

1. Why is navigation testing important in Cypress when validating routing?

easy

A. It checks if clicking links leads to the correct URL and page content.

B. It tests if the server is running without errors.

C. It verifies the database connection during navigation.

D. It measures the page load speed after navigation.

Solution

1. Step 1: Understand navigation testing purpose

   Navigation testing ensures that when a user clicks a link or button, the app routes to the correct page.

2. Step 2: Connect navigation to URL validation

   By checking the URL after navigation, Cypress confirms the routing works as expected.

3. Final Answer:

   It checks if clicking links leads to the correct URL and page content. -> Option A

4. Quick Check:

   Navigation testing = URL and page correctness [OK]

Hint: Navigation tests confirm URL changes match clicks [OK]

Common Mistakes:

• Confusing navigation testing with server or database tests
• Ignoring URL validation after clicking links
• Assuming page load speed is part of routing validation

2. Which Cypress command is used to check the current URL after navigation?

easy

A. cy.url()

B. cy.get()

C. cy.visit()

D. cy.click()

Solution

1. Step 1: Identify command for URL retrieval

   In Cypress, cy.url() returns the current URL of the page.

2. Step 2: Differentiate from other commands

   cy.get() selects elements, cy.visit() loads a page, and cy.click() clicks elements.

3. Final Answer:

   cy.url() -> Option A

4. Quick Check:

   Check URL with cy.url() [OK]

Hint: Use cy.url() to get current page URL [OK]

Common Mistakes:

• Using cy.get() to check URL instead of element selection
• Confusing cy.visit() as URL checker
• Trying to click with cy.url()

3. Given this Cypress test snippet:

cy.visit('/home')
cy.get('a#profile-link').click()
cy.url().should('include', '/profile')

What does this test verify?

medium

A. That the profile link exists but does not navigate

B. That the profile page loads without clicking

C. That clicking the profile link changes URL to include '/profile'

D. That the home page URL includes '/profile'

Solution

1. Step 1: Analyze test steps

   The test visits '/home', clicks the link with id 'profile-link', then checks the URL includes '/profile'.

2. Step 2: Understand assertion meaning

   The assertion confirms the URL changed after clicking, meaning navigation to profile page succeeded.

3. Final Answer:

   That clicking the profile link changes URL to include '/profile' -> Option C

4. Quick Check:

   Click changes URL to /profile [OK]

Hint: Click then check URL change to confirm navigation [OK]

Common Mistakes:

• Thinking URL changes without clicking
• Assuming link existence means navigation
• Confusing initial visit URL with post-click URL

4. Identify the error in this Cypress navigation test:

cy.visit('/dashboard')
cy.get('button#settings').click
cy.url().should('include', '/settings')

medium

A. Wrong URL assertion method

B. Missing parentheses after click command

C. Incorrect selector for button

D. cy.visit() should be cy.navigate()

Solution

1. Step 1: Check command syntax

   The click command is missing parentheses; it should be click() to execute.

2. Step 2: Verify other parts

   The selector and URL assertion are correct; cy.visit() is valid in Cypress.

3. Final Answer:

   Missing parentheses after click command -> Option B

4. Quick Check:

   Use click() not click [OK]

Hint: Always add () after commands like click() [OK]

Common Mistakes:

• Forgetting parentheses on commands
• Changing valid selectors unnecessarily
• Replacing cy.visit() with non-existent commands

5. You want to test navigation from the homepage to a user profile page and verify the URL and page content. Which Cypress test code correctly validates routing and content?

hard

A. cy.visit('/')
cy.get('a.profile-link').click
cy.url().should('include', '/profile')
cy.contains('User Profile').should('be.visible')

B. cy.visit('/profile')
cy.get('a.home-link').click()
cy.url().should('include', '/')
cy.contains('Home').should('be.visible')

C. cy.visit('/')
cy.get('a.profile-link').click()
cy.url().should('eq', '/profile')
cy.contains('User Profile').should('not.exist')

D. cy.visit('/')
cy.get('a.profile-link').click()
cy.url().should('include', '/profile')
cy.contains('User Profile').should('be.visible')

Solution

1. Step 1: Check navigation and URL validation

   cy.visit('/') cy.get('a.profile-link').click() cy.url().should('include', '/profile') cy.contains('User Profile').should('be.visible') visits homepage, clicks profile link, then asserts URL includes '/profile' correctly.

2. Step 2: Verify page content assertion

   It also checks that 'User Profile' text is visible, confirming correct page content after navigation.

3. Final Answer:

   cy.visit('/') cy.get('a.profile-link').click() cy.url().should('include', '/profile') cy.contains('User Profile').should('be.visible') -> Option D

4. Quick Check:

   Visit, click, check URL and content [OK]

Hint: Check URL and visible content after click for full validation [OK]

Common Mistakes:

• Using click without parentheses
• Checking wrong URL or missing content check
• Asserting non-existent elements or wrong URLs