cy.viewport() for screen sizes in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the viewport size after this Cypress command?

Consider the following Cypress test code snippet:

cy.viewport(1024, 768);

What will be the viewport width and height set by this command?

Cypress

cy.viewport(1024, 768);

A Width: 1024px, Height: 768px

B Width: 768px, Height: 1024px

C Width: 1024px, Height: 1024px

D Width: 768px, Height: 768px

💡 Hint

The first argument is width, the second is height.

The cy.viewport() command sets the browser's viewport size. The first parameter is width, the second is height, so cy.viewport(1024, 768) sets width to 1024 pixels and height to 768 pixels.

❓ assertion

intermediate

Which assertion correctly verifies the viewport size?

You want to check if the viewport width is 375 pixels after setting it with cy.viewport(375, 667). Which assertion is correct?

Cypress

cy.viewport(375, 667);
// Which assertion below correctly checks the width?

A cy.document().its('width').should('equal', 375);

B cy.window().its('innerWidth').should('equal', 375);

C cy.get('body').should('have.css', 'width', '375px');

D cy.viewport().should('have.property', 'width', 375);

💡 Hint

The window object holds the viewport size properties.

The window object's innerWidth property reflects the viewport width. Using cy.window().its('innerWidth') accesses this value for assertion. Other options either check wrong properties or use invalid commands.

🧠 Conceptual

advanced

What happens if you use cy.viewport() with a preset device name?

In Cypress, what does this command do?

cy.viewport('iphone-6');

Choose the correct explanation.

A Sets the viewport to the screen size of an iPhone 6 but does not change device pixel ratio or user agent.

B Sets the viewport to the exact screen size of an iPhone 6 including device pixel ratio and user agent.

C Sets the viewport to a random mobile device size similar to iPhone 6.

D Throws an error because device names are not supported in cy.viewport().

💡 Hint

Device presets set viewport size but do not emulate device pixel ratio or user agent.

Using cy.viewport('iphone-6') sets the viewport size to iPhone 6 dimensions (375x667) but does not emulate device pixel ratio or user agent string. It only changes viewport size.

🔧 Debug

advanced

Why does this viewport test fail?

Given this test:

cy.viewport(800, 600);
cy.window().its('innerWidth').should('equal', 600);

Why does the assertion fail?

A Because the viewport height is 600, so innerWidth should be 600.

B Because cy.viewport() does not change innerWidth property.

C Because the assertion syntax is incorrect.

D Because innerWidth is the width, so it should be 800, not 600.

💡 Hint

Remember which value is width and which is height in cy.viewport().

cy.viewport(800, 600) sets width to 800 and height to 600. innerWidth reflects the width, so expecting 600 causes the test to fail.

❓ framework

expert

How to test responsive design for multiple screen sizes efficiently in Cypress?

You want to run the same test on multiple screen sizes: 320x480, 768x1024, and 1280x720. Which approach is best to write this in Cypress?

A Use a loop inside the test to call cy.viewport() with each size and run assertions inside the loop.

B Write separate tests for each screen size with hardcoded cy.viewport() calls.

C Use Cypress custom commands to set viewport and call the test logic once per size using a data-driven approach.

D Set cy.viewport() once globally and rely on browser resizing manually.

💡 Hint

Think about reusability and clean test code.

Using custom commands and data-driven tests allows running the same test logic for multiple viewport sizes cleanly and efficiently. Loops inside tests can cause flaky behavior, and separate tests cause duplication.