Why responsive testing ensures cross-device quality in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the viewport size for responsive testing in Cypress.

Cypress

cy.viewport([1], 800);

Drag options to blanks, or click blank then click option'

A1280

B1024

C375

D1920

Attempts:

3 left

💡 Hint

Common Mistakes

Using desktop widths like 1920 for mobile testing.

Setting the viewport width to 375 simulates a common mobile device width, which is essential for responsive testing.

2fill in blank

medium

Complete the code to check if the navigation menu is visible on a small screen.

Cypress

cy.get('nav').should('[1]');

Drag options to blanks, or click blank then click option'

Abe.visible

Bhave.length

Cnot.exist

Dcontain.text

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'not.exist' which checks for absence.

The assertion be.visible checks if the navigation menu is shown on the screen, which is important for responsive layouts.

3fill in blank

hard

Fix the error in the code to test responsiveness by setting viewport to tablet size.

Cypress

cy.viewport([1], 900);

Drag options to blanks, or click blank then click option'

A768

B'tablet'

C1024

D800

Attempts:

3 left

💡 Hint

Common Mistakes

Using string names instead of numeric values.

The viewport width should be a number like 768 for tablets, not a string like 'tablet'.

4fill in blank

hard

Fill both blanks to assert that the footer is hidden on mobile and visible on desktop.

Cypress

cy.viewport(375, 667);
cy.get('footer').should('[1]');
cy.viewport(1280, 800);
cy.get('footer').should('[2]');

Drag options to blanks, or click blank then click option'

Anot.be.visible

Bbe.visible

Cexist

Dnot.exist

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'exist' which only checks presence, not visibility.

On mobile (375 width), the footer should not be visible (not.be.visible), but on desktop (1280 width), it should be visible (be.visible).

5fill in blank

hard

Fill all three blanks to create a test that checks header text changes on different screen sizes.

Cypress

cy.viewport([1], 600);
cy.get('header h1').should('contain.text', [2]);
cy.viewport([3], 900);

Drag options to blanks, or click blank then click option'

A375

B'Welcome Mobile User'

C1280

D'Welcome Desktop User'

Attempts:

3 left

💡 Hint

Common Mistakes

Using desktop width for mobile viewport.

The test sets viewport to 375 for mobile, checks the header text for mobile greeting, then sets viewport to 1280 for desktop.

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