cy.viewport() for screen sizes in Cypress - Framework Patterns

Framework Mode - cy.viewport() for screen sizes

Folder Structure for Cypress Test Framework

    cypress/
    ├── e2e/                  # End-to-end test specs
    │   ├── login.cy.js       # Example test file
    │   └── responsive.cy.js  # Tests using cy.viewport()
    ├── fixtures/             # Test data files (JSON)
    │   └── users.json
    ├── support/              # Support files and commands
    │   ├── commands.js       # Custom commands
    │   └── e2e.js            # Global setup
    └── videos/               # Recorded test runs

    cypress.config.js          # Cypress configuration file
    package.json               # Project dependencies and scripts
    

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files where cy.viewport() is used to set screen sizes for responsive testing.
• Support Layer (cypress/support): Holds reusable commands and global setup, e.g., custom commands to set viewport sizes.
• Fixtures: Static test data like user info or test inputs.
• Configuration: Central place to define base URLs, environment variables, and default viewport sizes.
• Utilities: Helper functions or plugins to extend Cypress capabilities.

Configuration Patterns

Use cypress.config.js to define default viewport and environment settings.

    // cypress.config.js
    import { defineConfig } from 'cypress'

    export default defineConfig({
      e2e: {
        baseUrl: 'https://example.com',
        viewportWidth: 1280,
        viewportHeight: 720,
        env: {
          username: 'testuser',
          password: 'password123'
        },
        setupNodeEvents(on, config) {
          // implement node event listeners here
        }
      }
    })
    

In tests, override viewport sizes dynamically using cy.viewport(width, height) for different screen sizes.

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or plugins like mochawesome for detailed HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on multiple viewport sizes by passing environment variables or running tests with different configs.
• Record videos and screenshots on test failures to help debug responsive issues.

Best Practices for Using cy.viewport()

1. Test common device sizes: Include popular screen sizes like mobile (375x667), tablet (768x1024), and desktop (1280x720).
2. Use descriptive test names: Indicate the viewport size in the test title for clarity.
3. Set viewport early: Call cy.viewport() at the start of each test or in beforeEach to ensure consistent screen size.
4. Avoid hardcoding sizes: Use constants or config values to manage viewport sizes centrally.
5. Combine with accessibility checks: Responsive tests should also verify UI elements remain accessible at different sizes.

Self Check

Where in this Cypress framework structure would you add a new test file that verifies the website layout on a 1024x768 screen size using cy.viewport()?

Key Result

Use cy.viewport() in Cypress test specs to simulate different screen sizes for responsive testing.