Visual regression testing concept in Cypress - Framework Patterns

Framework Mode - Visual regression testing concept

Folder Structure

cypress-project/
├── cypress/
│   ├── e2e/
│   │   ├── visual/
│   │   │   └── homepage_visual_spec.cy.js
│   │   └── functional/
│   │       └── login_spec.cy.js
│   ├── fixtures/
│   │   └── testData.json
│   ├── support/
│   │   ├── commands.js
│   │   ├── e2e.js
│   │   └── visualCommands.js
├── cypress.config.js
├── package.json
└── reports/
    └── visual-regression/
        └── baseline/
        └── diffs/
        └── latest/

Test Framework Layers

• Test Specs (cypress/e2e/visual/): Contains visual regression test scripts that capture and compare screenshots.
• Support Layer (cypress/support/): Custom commands and utilities for visual testing, like screenshot capture and comparison helpers.
• Fixtures (cypress/fixtures/): Static test data used in tests, e.g., URLs or user info.
• Configuration (cypress.config.js): Defines environment settings, viewport sizes, and plugins for visual testing.
• Reports (reports/visual-regression/): Stores baseline images, latest screenshots, and difference images for review.

Configuration Patterns

• Environment Variables: Use cypress.config.js to set base URLs and environment-specific settings (e.g., staging, production).
• Viewport Sizes: Define multiple viewport sizes in config or tests to test responsiveness visually.
• Baseline Management: Store baseline screenshots in reports/visual-regression/baseline/. Update baselines only after manual approval.
• Credentials: Use environment variables or cypress.env.json (ignored by VCS) to securely store sensitive data.
• Plugins: Integrate visual testing plugins like cypress-image-snapshot in cypress.config.js for screenshot comparison.

Test Reporting and CI/CD Integration

• Visual Test Reports: Generate reports showing passed/failed visual tests with side-by-side image diffs.
• CI/CD Integration: Run visual tests automatically on pull requests or merges using CI tools (GitHub Actions, Jenkins).
• Baseline Approval Workflow: Fail tests if visual differences exceed threshold; require manual baseline update to accept changes.
• Artifacts Storage: Save screenshots and diff images as build artifacts for team review.

Best Practices

• Keep Baselines Stable: Only update baseline images after confirming UI changes are intentional.
• Use Explicit Viewports: Test multiple screen sizes to catch responsive design issues visually.
• Isolate Visual Tests: Separate visual regression tests from functional tests for clarity and maintenance.
• Use Thresholds: Set pixel difference thresholds to avoid false positives from minor rendering differences.
• Automate in CI: Integrate visual tests in CI pipelines to catch UI regressions early.

Self Check

Where in this folder structure would you add a new visual regression test for the user profile page?

• a) cypress/e2e/visual/
• b) cypress/support/
• c) reports/visual-regression/
• d) cypress/fixtures/

Correct answer: a) cypress/e2e/visual/

Key Result

Organize visual regression tests in dedicated folders with baseline image management and CI integration for reliable UI change detection.