← 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