← Back to library
Cypressvisualintermediatev10+

Test mobile viewport

Switch to a mobile viewport with cy.viewport() to verify responsive layout.

1it('shows mobile navigation on a small screen', () => {
2  // Emulate an iPhone 14 — Cypress supports named presets and custom px sizes
3  cy.viewport('iphone-14');
4  cy.visit('/');
5
6  // Hamburger should be visible; desktop nav should not
7  cy.get('[data-testid="mobile-menu-button"]').should('be.visible');
8  cy.get('[data-testid="desktop-nav"]').should('not.be.visible');
9
10  // Verify the menu expands on click
11  cy.get('[data-testid="mobile-menu-button"]').click();
12  cy.get('[data-testid="mobile-nav"]').should('be.visible');
13});
#mobile#viewport#responsive#cy.viewport#iphone