Responsive breakpoint testing in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the viewport width after this Cypress command?

Consider the following Cypress test code snippet that sets the viewport size. What will be the width of the viewport after running this command?

Cypress

cy.viewport(768, 1024);

A 375 pixels

B 1024 pixels

C 800 pixels

D 768 pixels

💡 Hint

The first number in cy.viewport(width, height) is the width in pixels.

The cy.viewport command takes width as the first argument and height as the second. So cy.viewport(768, 1024) sets the viewport width to 768 pixels.

❓ assertion

intermediate

Which assertion correctly checks if the viewport width is 375px?

You want to write a Cypress assertion to verify the viewport width is exactly 375 pixels. Which option is correct?

A cy.window().its('innerWidth').should('eq', 375);

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

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

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

💡 Hint

The window object has the innerWidth property representing viewport width.

cy.window() gets the window object, and its('innerWidth') accesses the viewport width. The assertion checks if it equals 375.

🔧 Debug

advanced

Why does this test fail on mobile viewport?

This Cypress test fails when run with cy.viewport('iphone-6'). What is the most likely reason?

Cypress

cy.viewport('iphone-6');
cy.get('.menu').should('be.visible');

A The '.menu' element is hidden by default on small screens and requires a button click to show.

B The 'iphone-6' viewport preset is invalid and causes viewport size to be zero.

C The '.menu' selector is incorrect and does not match any element.

D Cypress cannot simulate mobile devices and always uses desktop viewport.

💡 Hint

Menus often collapse into a hamburger icon on small screens.

On small viewports like iPhone 6, menus are often hidden and toggled by a button. The test fails because it expects the menu visible without clicking the toggle.

❓ framework

advanced

Which Cypress command sets viewport to simulate a tablet in landscape mode?

You want to test your app on a tablet device in landscape orientation using Cypress. Which command correctly sets this viewport?

A cy.viewport(768, 1024);

B cy.viewport('ipad-2', 'portrait');

C cy.viewport('ipad-2', 'landscape');

D cy.viewport('tablet', 'landscape');

💡 Hint

Cypress supports device presets with optional orientation argument.

The 'ipad-2' preset with 'landscape' orientation sets the viewport to tablet landscape size.

🧠 Conceptual

expert

Why is testing multiple breakpoints important in responsive testing?

In responsive testing, why should you test your web app at multiple viewport widths instead of just one?

A Because testing one viewport width automatically covers all others due to CSS inheritance.

B Because different viewport widths trigger different CSS breakpoints that change layout and functionality.

C Because viewport width does not affect layout, only device type matters.

D Because Cypress requires multiple viewport sizes to run tests successfully.

💡 Hint

Think about how websites change layout on phones, tablets, and desktops.

Websites use CSS breakpoints to adjust layout and features based on viewport width. Testing multiple widths ensures all layouts work correctly.