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

Practice

1. Why is responsive testing important in Cypress for cross-device quality?

easy

A. It automatically fixes layout bugs.

B. It speeds up the test execution time.

C. It only tests desktop browsers.

D. It checks if the website works well on different screen sizes.

Solution

1. Step 1: Understand responsive testing purpose

   Responsive testing ensures the website adapts and works well on various screen sizes like phones, tablets, and desktops.

2. Step 2: Relate Cypress capability

   Cypress uses cy.viewport() to simulate different screen sizes during tests, helping catch layout or usability issues on different devices.

3. Final Answer:

   It checks if the website works well on different screen sizes. -> Option D

4. Quick Check:

   Responsive testing = cross-device quality [OK]

Hint: Responsive testing checks all screen sizes work well [OK]

Common Mistakes:

• Thinking it only tests desktop browsers
• Believing it fixes bugs automatically
• Confusing speed with responsiveness

2. Which Cypress command correctly sets the viewport size to simulate an iPhone 6 screen?

easy

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

B. cy.setViewport('iphone6')

C. cy.screenSize(375, 667)

D. cy.device('iphone6')

Solution

1. Step 1: Identify correct Cypress viewport command

   The official Cypress command to set viewport size is cy.viewport(), which accepts device names like 'iphone-6'.

2. Step 2: Check option syntax

   cy.viewport('iphone-6') uses the correct command and device name format. Other options use incorrect commands or syntax.

3. Final Answer:

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

4. Quick Check:

   Correct Cypress viewport command = cy.viewport('iphone-6') [OK]

Hint: Use cy.viewport('device-name') to set screen size [OK]

Common Mistakes:

• Using non-existent commands like cy.setViewport
• Wrong device name format without dash
• Confusing viewport with device commands

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

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

medium

A. Test throws syntax error due to cy.viewport usage

B. Test always passes regardless of viewport

C. Test fails if .menu is hidden on iPad 2 size

D. Test ignores viewport and tests desktop size

Solution

1. Step 1: Understand viewport effect

   Setting cy.viewport('ipad-2') changes the screen size to iPad 2 dimensions for the test.

2. Step 2: Analyze assertion behavior

   The assertion checks if the element with class .menu is visible at that viewport size. If hidden, test fails; if visible, test passes.

3. Final Answer:

   Test fails if .menu is hidden on iPad 2 size -> Option C

4. Quick Check:

   Viewport affects visibility = test pass/fail [OK]

Hint: Viewport changes screen size; visibility affects test result [OK]

Common Mistakes:

• Assuming test always passes
• Thinking cy.viewport causes syntax error
• Ignoring viewport effect on element visibility

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

cy.viewport(1024, 768)
cy.get('#nav').should('be.visible')
cy.viewport('iphone-x')

medium

A. cy.viewport must be called before assertions to set size correctly

B. cy.get selector #nav is invalid syntax

C. cy.viewport cannot accept numeric width and height

D. cy.viewport('iphone-x') is not a valid device name

Solution

1. Step 1: Check viewport usage order

   The first cy.viewport(1024, 768) sets screen size, then assertion runs. But the second cy.viewport('iphone-x') is called after assertion, which won't affect that assertion.

2. Step 2: Understand test flow

   Viewport must be set before assertions to test elements at that size. Changing viewport after assertion has no effect on that test step.

3. Final Answer:

   cy.viewport must be called before assertions to set size correctly -> Option A

4. Quick Check:

   Set viewport before assertions [OK]

Hint: Always set viewport before assertions [OK]

Common Mistakes:

• Thinking viewport accepts only device names
• Believing selector #nav is invalid
• Assuming viewport after assertion affects previous checks

5. You want to ensure your website's navigation menu works on desktop, tablet, and mobile. Which Cypress test approach best ensures cross-device quality?

hard

A. Run tests only on desktop viewport since mobile users are few.

B. Run tests with cy.viewport('macbook-15'), then cy.viewport('ipad-2'), then cy.viewport('iphone-6'), checking menu visibility each time.

C. Run tests with cy.viewport('iphone-6') only, assuming it covers all smaller devices.

D. Run tests without setting viewport, relying on default browser size.

Solution

1. Step 1: Understand cross-device testing need

   Testing on multiple device sizes ensures the menu works well on desktop, tablet, and mobile screens.

2. Step 2: Evaluate test approaches

   Run tests with cy.viewport('macbook-15'), then cy.viewport('ipad-2'), then cy.viewport('iphone-6'), checking menu visibility each time. tests all relevant screen sizes explicitly. Other options test only one size or none, risking missed bugs on other devices.

3. Final Answer:

   Run tests with cy.viewport('macbook-15'), then cy.viewport('ipad-2'), then cy.viewport('iphone-6'), checking menu visibility each time. -> Option B

4. Quick Check:

   Test multiple viewports for cross-device quality [OK]

Hint: Test all device sizes for full coverage [OK]

Common Mistakes:

• Testing only desktop or only mobile
• Skipping viewport setting
• Assuming one mobile size covers all devices