Bird
Raised Fist0
Cypresstesting~15 mins

cy.viewport() for screen sizes in Cypress - Build an Automation Script

Choose your learning style10 modes available
LearnWhyDeepTraceTryChallengeAutomateRecallFrame
Verify website layout changes on different screen sizes using cy.viewport()
Preconditions (2)
Step 1: Open the test website homepage
Step 2: Set viewport to 320x480 (mobile size) using cy.viewport()
Step 3: Verify that the mobile menu button is visible
Step 4: Set viewport to 768x1024 (tablet size)
Step 5: Verify that the navigation bar is visible
Step 6: Set viewport to 1280x800 (desktop size)
Step 7: Verify that the full navigation menu is visible
✅ Expected Result: The website layout changes according to the viewport size, showing mobile menu on small screens and full navigation on larger screens.
Automation Requirements - Cypress
Assertions Needed:
Check visibility of mobile menu button at 320x480
Check visibility of navigation bar at 768x1024
Check visibility of full navigation menu at 1280x800
Best Practices:
Use cy.viewport() to simulate different screen sizes
Use cy.get() with meaningful selectors
Use assertions like .should('be.visible')
Avoid hardcoded waits; rely on Cypress automatic waits
Write clear test descriptions
Automated Solution
Cypress
describe('Responsive layout test with cy.viewport()', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io')
  })

  it('shows mobile menu button on small screen', () => {
    cy.viewport(320, 480)
    cy.get('.mobile-menu-button').should('be.visible')
  })

  it('shows navigation bar on tablet screen', () => {
    cy.viewport(768, 1024)
    cy.get('.navigation-bar').should('be.visible')
  })

  it('shows full navigation menu on desktop screen', () => {
    cy.viewport(1280, 800)
    cy.get('.full-navigation-menu').should('be.visible')
  })
})

This test suite uses cy.viewport() to simulate different screen sizes: mobile, tablet, and desktop.

Each test visits the website fresh to avoid state carryover.

Selectors like .mobile-menu-button, .navigation-bar, and .full-navigation-menu represent elements expected to appear at each screen size.

Assertions use .should('be.visible') to confirm the correct layout is shown.

Cypress automatically waits for elements, so no manual waits are needed.

Common Mistakes - 3 Pitfalls
Using fixed waits like cy.wait(500) instead of relying on Cypress automatic waits
{'mistake': "Using incorrect or overly generic selectors like 'button' instead of specific classes or IDs", 'why_bad': 'Generic selectors can match multiple elements and cause flaky tests.', 'correct_approach': 'Use unique, meaningful selectors such as classes or data attributes.'}
Not resetting viewport between tests causing state leakage
Bonus Challenge

Now add data-driven testing to check the layout on these three screen sizes in a single test using an array of viewport sizes.

Show Hint

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard