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

Practice

1. What is the main purpose of using cy.viewport() in Cypress tests?

easy

A. To capture screenshots of the current page

B. To speed up test execution by skipping UI rendering

C. To mock API responses during tests

D. To simulate different screen sizes for responsive testing

Solution

1. Step 1: Understand cy.viewport() role

   cy.viewport() changes the browser size to simulate devices.

2. Step 2: Identify its use in responsive testing

   This helps check if UI adapts correctly on phones, tablets, and desktops.

3. Final Answer:

   To simulate different screen sizes for responsive testing -> Option D

4. Quick Check:

   cy.viewport() = simulate screen sizes [OK]

Hint: Remember: viewport changes screen size for layout checks [OK]

Common Mistakes:

• Confusing viewport with API mocking
• Thinking it speeds up tests by skipping UI
• Assuming it captures screenshots

2. Which of the following is the correct syntax for the iPhone 6 viewport preset in Cypress?

easy

A. cy.viewport('iphone-6')

B. cy.viewport(375, 667)

C. cy.viewport('iPhone6')

D. cy.setViewport('iphone-6')

Solution

1. Step 1: Recall Cypress viewport presets

   Cypress supports device names like 'iphone-6' in cy.viewport().

2. Step 2: Check syntax correctness

   cy.viewport('iphone-6') uses correct method and exact device name string.

3. Final Answer:

   cy.viewport('iphone-6') -> Option A

4. Quick Check:

   Correct device name string in cy.viewport() [OK]

Hint: Use exact device names in quotes with cy.viewport() [OK]

Common Mistakes:

• Using wrong method name like cy.setViewport()
• Incorrect device name casing or spelling
• Passing numbers without quotes for presets

3. What will be the result of this Cypress test snippet?

cy.viewport('ipad-2')
cy.get('.menu').should('be.visible')

medium

A. Test ignores viewport and checks .menu visibility on default size

B. Test passes if .menu is visible on iPad 2 screen size

C. Test throws syntax error due to missing semicolon

D. Test fails because 'ipad-2' is not a valid viewport preset

Solution

1. Step 1: Understand viewport preset 'ipad-2'

   'ipad-2' is a valid Cypress preset simulating iPad 2 screen size.

2. Step 2: Analyze assertion behavior

   The test checks if element with class .menu is visible at that size.

3. Final Answer:

   Test passes if .menu is visible on iPad 2 screen size -> Option B

4. Quick Check:

   Valid preset + visibility check = pass if visible [OK]

Hint: Valid preset means viewport changes; assertion checks visibility [OK]

Common Mistakes:

• Thinking 'ipad-2' is invalid preset
• Assuming missing semicolons cause errors in Cypress
• Believing viewport is ignored without explicit reload

4. Identify the error in this Cypress test for responsive breakpoint:

cy.viewport(1024, 768)
cy.get('#nav').should('be.visible')
cy.viewport('mobile')
cy.get('#nav').should('not.be.visible')

medium

A. Incorrect selector '#nav' should be '.nav'

B. Missing wait between viewport changes causes flaky test

C. Invalid viewport preset 'mobile' causes test failure

D. Assertions are reversed; nav should be visible on mobile

Solution

1. Step 1: Check viewport presets used

   1024x768 is valid, but 'mobile' is not a recognized preset in Cypress.

2. Step 2: Understand impact of invalid preset

   Using 'mobile' causes Cypress to throw an error and fail the test.

3. Final Answer:

   Invalid viewport preset 'mobile' causes test failure -> Option C

4. Quick Check:

   Use only valid viewport presets [OK]

Hint: Use only Cypress documented viewport presets [OK]

Common Mistakes:

• Assuming 'mobile' is a valid preset
• Thinking missing waits cause failure here
• Confusing selector correctness with viewport issues

5. You want to test a web page's header visibility on desktop (1440x900) and mobile (375x667). Which is the best Cypress test approach?

hard

A. Write two separate tests using cy.viewport(1440, 900) and cy.viewport(375, 667) with visibility assertions

B. Write one test with cy.viewport(1440, 900) only, assuming mobile works the same

C. Use cy.viewport('iphone-x') only, ignoring desktop size

D. Test only on default viewport size without changing viewport

Solution

1. Step 1: Understand responsive testing goal

   We want to verify header visibility on both desktop and mobile screen sizes.

2. Step 2: Choose best Cypress approach

   Writing separate tests with explicit viewport sizes ensures coverage of both layouts.

3. Final Answer:

   Write two separate tests using cy.viewport(1440, 900) and cy.viewport(375, 667) with visibility assertions -> Option A

4. Quick Check:

   Separate viewport tests cover all breakpoints [OK]

Hint: Test each breakpoint separately for reliable responsive checks [OK]

Common Mistakes:

• Assuming one viewport size covers all devices
• Ignoring desktop or mobile viewport testing
• Relying on default viewport without changes