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.

Practice

1. What is the main purpose of using cy.viewport() in Cypress tests?

easy

A. To change the screen size and test responsive layouts

B. To select elements on the page

C. To wait for an element to appear

D. To take screenshots of the page

Solution

1. Step 1: Understand the function of cy.viewport()

   This command sets the browser's screen size to simulate different devices or resolutions.

2. Step 2: Identify the purpose in testing

   Changing screen size helps test how the website looks and behaves on various devices, ensuring responsive design works.

3. Final Answer:

   To change the screen size and test responsive layouts -> Option A

4. Quick Check:

   cy.viewport() changes screen size = D [OK]

Hint: Remember: viewport changes screen size for responsive tests [OK]

Common Mistakes:

• Confusing viewport with element selectors
• Thinking viewport waits for elements
• Assuming viewport takes screenshots

2. Which of the following is the correct syntax to set the viewport size to 1024 pixels wide and 768 pixels tall in Cypress?

easy

A. cy.viewport({width: 1024, height: 768});

B. cy.viewport(1024, 768);

C. cy.viewport('1024x768');

D. cy.setViewport(1024, 768);

Solution

1. Step 1: Recall the correct cy.viewport() syntax

   The command accepts width and height as two separate number arguments: cy.viewport(width, height).

2. Step 2: Check each option

   cy.viewport(1024, 768); uses two numbers correctly. cy.viewport('1024x768'); uses a string which is invalid. cy.viewport({width: 1024, height: 768}); uses an object which is not supported. cy.setViewport(1024, 768); uses a wrong command name.

3. Final Answer:

   cy.viewport(1024, 768); -> Option B

4. Quick Check:

   cy.viewport(width, height) = C [OK]

Hint: Use two numbers, not strings or objects, in cy.viewport() [OK]

Common Mistakes:

• Passing size as a string like '1024x768'
• Using an object instead of two numbers
• Typing wrong command name like cy.setViewport

3. What will be the viewport size after running this Cypress code?

cy.viewport('iphone-6');
cy.viewport(800, 600);

medium

A. 800 pixels wide and 600 pixels tall

B. iPhone 6 preset size

C. Default viewport size

D. Test will fail due to conflicting viewport commands

Solution

1. Step 1: Understand command order in Cypress

   Commands run in order. The last cy.viewport() call sets the final size.

2. Step 2: Analyze the code

   First sets viewport to iPhone 6 size, then immediately changes it to 800x600 pixels.

3. Final Answer:

   800 pixels wide and 600 pixels tall -> Option A

4. Quick Check:

   Last cy.viewport() sets size = B [OK]

Hint: Last cy.viewport() call overrides previous sizes [OK]

Common Mistakes:

• Thinking first viewport call persists
• Assuming test fails on multiple viewport calls
• Confusing preset names with pixel sizes

4. You wrote this code but the viewport size does not change as expected:

cy.viewport(1024);

What is the problem?

medium

A. Viewport size must be set before visiting the page

B. cy.viewport() does not accept numbers

C. Missing height argument in cy.viewport()

D. cy.viewport() only accepts device names

Solution

1. Step 1: Check the cy.viewport() parameters

   The command requires both width and height as numbers, e.g., cy.viewport(1024, 768).

2. Step 2: Identify the error

   Only width (1024) is provided, height is missing, so viewport size won't change correctly.

3. Final Answer:

   Missing height argument in cy.viewport() -> Option C

4. Quick Check:

   Both width and height needed = A [OK]

Hint: Always provide width and height numbers in cy.viewport() [OK]

Common Mistakes:

• Passing only one number instead of two
• Thinking cy.viewport accepts only device names
• Believing viewport must be set before visiting page

5. You want to test your website's mobile and desktop views in one test. Which code snippet correctly sets the viewport to iPhone X size, runs a test, then changes to desktop size 1280x720 and runs another test?

hard

A. cy.viewport('iphone-x');\ncy.viewport(1280, 720);\ncy.get('#menu').should('be.visible');

B. cy.viewport('iphone-x', 1280, 720);\ncy.get('#menu').should('be.visible');

C. cy.viewport(1280, 720);\ncy.viewport('iphone-x');\ncy.get('#menu').should('be.visible');

D. cy.viewport('iphone-x');\ncy.get('#menu').should('be.visible');\ncy.viewport(1280, 720);\ncy.get('#menu').should('be.visible');

Solution

1. Step 1: Understand sequential viewport changes

   You can call cy.viewport() multiple times to change screen size during a test.

2. Step 2: Check the code snippets

   cy.viewport('iphone-x');\ncy.get('#menu').should('be.visible');\ncy.viewport(1280, 720);\ncy.get('#menu').should('be.visible'); sets iPhone X viewport, runs a check, then sets desktop viewport and runs the check again. This tests both views properly. cy.viewport('iphone-x', 1280, 720);\ncy.get('#menu').should('be.visible'); uses invalid syntax with multiple arguments. cy.viewport(1280, 720);\ncy.viewport('iphone-x');\ncy.get('#menu').should('be.visible'); changes viewport twice before any check. cy.viewport('iphone-x');\ncy.viewport(1280, 720);\ncy.get('#menu').should('be.visible'); runs only one check after both viewport changes, missing the first test.

3. Final Answer:

   Set viewport, test, change viewport, test again -> Option D

4. Quick Check:

   Change viewport before each test step = A [OK]

Hint: Call cy.viewport() before each test step to change screen size [OK]

Common Mistakes:

• Passing multiple sizes in one cy.viewport() call
• Changing viewport without running tests between
• Running tests only after last viewport change