Responsive breakpoint testing in Cypress - Build an Automation Script

Verify website layout changes at responsive breakpoints

Preconditions (2)

Step 1: Open the website at 'https://example.com' in a browser window sized 320x480 (mobile breakpoint)

Step 2: Verify that the mobile menu button is visible

Step 3: Resize the browser window to 768x1024 (tablet breakpoint)

Step 4: Verify that the navigation menu is visible horizontally

Step 5: Resize the browser window to 1280x800 (desktop breakpoint)

Step 6: Verify that the full navigation bar is visible with all menu items

Step 7: Verify that no horizontal scrollbar appears at any breakpoint

✅ Expected Result: The website layout adjusts correctly at each breakpoint: mobile menu button visible on small screen, horizontal menu visible on tablet, full navigation bar visible on desktop, and no horizontal scrollbar appears.

Automation Requirements - Cypress

Assertions Needed:

Check visibility of mobile menu button at mobile breakpoint

Check visibility of horizontal navigation menu at tablet breakpoint

Check visibility of full navigation bar at desktop breakpoint

Check that no horizontal scrollbar is present at any breakpoint

Best Practices:

Use cy.viewport() to set screen sizes for breakpoints

Use semantic selectors with data-cy attributes for stable element targeting

Use assertions like .should('be.visible') and .should('not.exist')

Avoid hardcoded waits; rely on Cypress automatic waits

Structure tests clearly with descriptive it() blocks

Automated Solution

Cypress

/// <reference types="cypress" />

describe('Responsive Breakpoint Testing', () => {
  beforeEach(() => {
    cy.visit('https://example.com');
  });

  it('shows mobile menu button at mobile breakpoint', () => {
    cy.viewport(320, 480);
    cy.get('[data-cy=mobile-menu-button]').should('be.visible');
    cy.get('body').should('not.have.css', 'overflow-x', 'scroll');
  });

  it('shows horizontal navigation menu at tablet breakpoint', () => {
    cy.viewport(768, 1024);
    cy.get('[data-cy=horizontal-nav]').should('be.visible');
    cy.get('[data-cy=mobile-menu-button]').should('not.be.visible');
    cy.get('body').should('not.have.css', 'overflow-x', 'scroll');
  });

  it('shows full navigation bar at desktop breakpoint', () => {
    cy.viewport(1280, 800);
    cy.get('[data-cy=full-nav-bar]').should('be.visible');
    cy.get('[data-cy=mobile-menu-button]').should('not.be.visible');
    cy.get('body').should('not.have.css', 'overflow-x', 'scroll');
  });
});

This Cypress test suite checks the website layout at three common responsive breakpoints: mobile, tablet, and desktop.

We use cy.viewport(width, height) to simulate different screen sizes.

Each it block tests one breakpoint:

• At mobile size (320x480), it verifies the mobile menu button is visible.
• At tablet size (768x1024), it verifies the horizontal navigation menu is visible and mobile menu button is hidden.
• At desktop size (1280x800), it verifies the full navigation bar is visible and mobile menu button is hidden.

We also check that the body does not have horizontal scroll by asserting overflow-x CSS property is not set to scroll.

Selectors use data-cy attributes for stability and clarity.

This structure keeps tests clear, focused, and reliable.

Common Mistakes - 4 Pitfalls

Using hardcoded pixel values in selectors instead of data attributes

Using cy.wait() with fixed time instead of relying on Cypress automatic waits

Not resetting viewport between tests causing state bleed

Checking visibility without verifying absence of horizontal scroll

Bonus Challenge

Now add data-driven testing with 3 different viewport sizes and expected visible elements

Show Hint