cy.go() for browser history in Cypress - Framework Patterns

Framework Mode - cy.go() for browser history

Folder Structure

  cypress/
  ├── e2e/                  # Test files
  │   ├── navigation.cy.js  # Tests using cy.go() for browser history
  │   └── ...
  ├── fixtures/             # Test data files
  │   └── example.json
  ├── support/              # Custom commands and reusable utilities
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Global support file
  └── cypress.config.js     # Cypress configuration file
  

Test Framework Layers

• Test Layer (cypress/e2e): Contains test scripts that use cy.go() to navigate browser history (back, forward, or by steps).
• Support Layer (cypress/support): Holds reusable commands and utilities to simplify test code, e.g., custom commands for navigation.
• Fixtures Layer (cypress/fixtures): Stores static test data like JSON files for consistent test inputs.
• Configuration Layer (cypress.config.js): Defines environment settings, base URLs, browser preferences, and test retries.

Configuration Patterns

Use cypress.config.js to manage environments and browser settings:

  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        username: 'testuser',
        password: 'password123'
      },
      retries: 1
    }
  })
  

Access environment variables in tests with Cypress.env('username'). This keeps credentials and URLs flexible and secure.

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or plugins like mochawesome for detailed HTML reports.
• Integrate Cypress tests in CI/CD pipelines (GitHub Actions, Jenkins) to run tests on every code push.
• Configure test retries and screenshots/videos on failure for easier debugging.

Best Practices

• Use cy.go('back') and cy.go('forward') to simulate user browser navigation clearly.
• Prefer explicit navigation commands like cy.visit() when possible; use cy.go() for history-specific tests.
• Keep test steps simple and readable; avoid chaining too many cy.go() calls without assertions.
• Use custom commands in cypress/support/commands.js to reuse navigation logic.
• Always assert the page state after navigation to confirm correct history behavior.

Self Check

Where in this folder structure would you add a new test file that verifies the browser back and forward navigation using cy.go()?

Key Result

Organize Cypress tests in cypress/e2e, use support for reusable commands, configure environments in cypress.config.js, and leverage cy.go() for browser history navigation.