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.