Responsive breakpoint testing in Cypress - Framework Patterns

Framework Mode - Responsive breakpoint testing

Folder Structure

cypress/
├── e2e/                  # Test specs organized by feature
│   ├── responsive/       # Responsive breakpoint tests
│   │   └── homepage.cy.js
│   └── login.cy.js
├── fixtures/             # Test data files (JSON, etc.)
│   └── users.json
├── support/              # Custom commands and reusable utilities
│   ├── commands.js
│   └── index.js
cypress.config.js         # Main Cypress configuration file
package.json             # Project dependencies and scripts

Test Framework Layers

• Test Specs (cypress/e2e/responsive/): Contains tests that check UI behavior at different screen sizes (breakpoints).
• Support Layer (cypress/support/): Holds reusable commands like setting viewport sizes or custom assertions for responsiveness.
• Fixtures (cypress/fixtures/): Stores test data such as user info or expected layout data.
• Configuration (cypress.config.js): Defines environment settings, base URLs, and viewport presets.

Configuration Patterns

• Viewport Sizes: Define common breakpoints in cypress.config.js or support commands for reuse (e.g., mobile, tablet, desktop widths).
• Environment Variables: Use env in config or CLI to switch base URLs or credentials for different environments.
• Custom Commands: Create commands like cy.setBreakpoint('mobile') to set viewport easily in tests.

// Example snippet from cypress.config.js
const { defineConfig } = require('cypress');

const viewports = {
  mobile: { width: 375, height: 667 },
  tablet: { width: 768, height: 1024 },
  desktop: { width: 1280, height: 800 }
};

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      viewports
    },
    setupNodeEvents(on, config) {
      // implement node event listeners here
    }
  }
});

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with tools like Mochawesome for detailed HTML reports showing pass/fail per breakpoint.
• Screenshots & Videos: Enable automatic screenshots and video recording on test failures to help debug responsive issues.
• CI/CD: Integrate Cypress tests in pipelines (GitHub Actions, Jenkins) to run breakpoint tests on every pull request or deployment.
• Parallelization: Run tests in parallel across different viewport sizes to speed up feedback.

Best Practices

1. Use Reusable Viewport Settings: Define breakpoints once and reuse them to keep tests consistent and easy to update.
2. Test Critical Pages at All Breakpoints: Focus on key user flows and pages to ensure UI works well on all devices.
3. Use Custom Commands for Readability: Abstract viewport changes into commands like cy.setBreakpoint('tablet') for clear test steps.
4. Keep Tests Independent: Each test should set its own viewport to avoid flaky results.
5. Leverage Visual Testing Tools: Consider adding visual snapshot comparisons to catch layout shifts across breakpoints.

Self Check

Where in this folder structure would you add a new custom command to set viewport sizes for responsive breakpoint testing?

Key Result

Organize Cypress tests with dedicated folders for responsive specs, reusable viewport commands, and environment-based configurations to ensure reliable breakpoint testing.