Why responsive testing ensures cross-device quality in Cypress - Automation Benefits in Action

Verify website layout adapts correctly on different screen sizes

Preconditions (2)

Step 1: Open the website at 'https://example.com' in a browser

Step 2: Set the viewport size to 320x480 (mobile size)

Step 3: Verify the main navigation menu is visible and accessible

Step 4: Set the viewport size to 768x1024 (tablet size)

Step 5: Verify the main navigation menu is visible and accessible

Step 6: Set the viewport size to 1366x768 (desktop size)

Step 7: Verify the main navigation menu is visible and accessible

✅ Expected Result: The website layout adjusts correctly for each viewport size, and the main navigation menu is visible and usable on mobile, tablet, and desktop screen sizes.

Automation Requirements - cypress

Assertions Needed:

Check visibility of main navigation menu at each viewport size

Confirm no layout break or overlap occurs on different screen sizes

Best Practices:

Use cy.viewport() to simulate different device screen sizes

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

Avoid hardcoded waits; use Cypress built-in retry and assertions

Write clear, simple assertions for visibility and accessibility

Automated Solution

Cypress

describe('Responsive Testing for Cross-Device Quality', () => {
  beforeEach(() => {
    cy.visit('https://example.com')
  })

  it('should display main navigation menu correctly on mobile', () => {
    cy.viewport(320, 480)
    cy.get('[data-cy=main-nav]').should('be.visible')
  })

  it('should display main navigation menu correctly on tablet', () => {
    cy.viewport(768, 1024)
    cy.get('[data-cy=main-nav]').should('be.visible')
  })

  it('should display main navigation menu correctly on desktop', () => {
    cy.viewport(1366, 768)
    cy.get('[data-cy=main-nav]').should('be.visible')
  })
})

This test suite uses Cypress to check the website's main navigation menu visibility on three common device sizes: mobile, tablet, and desktop.

We use cy.viewport() to simulate different screen sizes. This helps us test how the layout adapts without needing real devices.

The selector [data-cy=main-nav] is a stable attribute selector, which is a best practice to avoid flaky tests caused by CSS or class changes.

Each test visits the website fresh to ensure no state carries over. The assertion should('be.visible') confirms the navigation menu is accessible and visible on each device size.

This approach ensures the website works well across devices, which is the goal of responsive testing.

Common Mistakes - 3 Pitfalls

{'mistake': "Using fixed pixel sizes in selectors like '.nav > ul > li' instead of stable data attributes", 'why_bad': 'Selectors based on CSS classes or element hierarchy can break easily if the UI changes, causing flaky tests.', 'correct_approach': "Use stable selectors like data-cy attributes (e.g., '[data-cy=main-nav]') that are dedicated for testing."}

Not using cy.viewport() and instead resizing the browser manually

{'mistake': 'Using cy.wait() with fixed time instead of relying on Cypress automatic waits', 'why_bad': 'Fixed waits slow down tests and can cause flakiness if the page loads faster or slower than expected.', 'correct_approach': "Use Cypress assertions like should('be.visible') which automatically wait for elements."}

Bonus Challenge

Now add data-driven testing with 3 different viewport sizes and verify the main navigation menu visibility for each in a single test.

Show Hint