Responsive breakpoint testing in Cypress

Introduction

Responsive breakpoint testing checks if a website looks and works well on different screen sizes. It helps make sure users have a good experience on phones, tablets, and desktops.

When you want to test if a menu changes correctly on small screens.

When you need to verify that images resize properly on tablets.

When checking if text and buttons stay readable on mobile devices.

When making sure layout elements stack or align as expected at different widths.

When testing a new design that should adapt to various screen sizes.

Syntax

Cypress

cy.viewport(width, height)
// or
cy.viewport(presetName)

// Then write tests to check page elements after setting viewport

cy.viewport() sets the browser size for the test.

You can use common device names like 'iphone-6', 'ipad-2', or specify width and height in pixels.

Examples

This sets a small mobile screen size for testing.

Cypress

cy.viewport(320, 480)
// sets viewport to 320px wide and 480px tall

Use a preset device size for convenience.

Cypress

cy.viewport('ipad-2')
// sets viewport to iPad 2 dimensions

Test how the site looks on a laptop screen.

Cypress

cy.viewport('macbook-15')
// sets viewport to 1440x900 for a laptop screen

Sample Program

This test checks if the mobile menu button appears on a small screen and the full desktop menu appears on a larger screen.

Cypress

describe('Responsive Breakpoint Testing', () => {
  it('shows mobile menu on small screens', () => {
    cy.viewport('iphone-6')
    cy.visit('https://example.cypress.io')
    cy.get('.mobile-menu-button').should('be.visible')
  })

  it('shows full menu on desktop screens', () => {
    cy.viewport(1280, 720)
    cy.visit('https://example.cypress.io')
    cy.get('.desktop-menu').should('be.visible')
  })
})

Important Notes

Always set the viewport before visiting the page to ensure the page loads with the correct size.

Use assertions that check visibility or layout changes specific to each breakpoint.

Test multiple breakpoints to cover common device sizes.

Summary

Responsive breakpoint testing uses cy.viewport() to simulate different screen sizes.

It helps verify that UI elements adapt correctly on phones, tablets, and desktops.

Write separate tests for each important screen size to catch layout issues early.