Responsive breakpoint testing in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the viewport width to 768 pixels.

Cypress

cy.viewport([1], 800);

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

A1280

B768

C375

D1024

Attempts:

3 left

💡 Hint

Common Mistakes

Using a width value that is too large or too small for tablet testing.

Confusing width and height parameters.

Setting the viewport width to 768 pixels simulates a tablet screen size for responsive testing.

2fill in blank

medium

Complete the code to check if the navigation menu is visible after resizing the viewport.

Cypress

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

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

Acontain

Bexist

Cbe.visible

Dhave.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using exist which only checks presence in the DOM, not visibility.

Using contain which checks text content.

The assertion be.visible checks if the navigation menu is visible on the page.

3fill in blank

hard

Fix the error in the code to correctly set the viewport to a mobile size.

Cypress

cy.viewport([1], 667);

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

A'375px'

Bwidth

Cmobile

D375

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string with units like '375px' instead of a number.

Using unsupported keywords instead of numeric values.

The viewport width must be a number, so 375 is correct. Strings with units or keywords cause errors.

4fill in blank

hard

Fill both blanks to test if the footer is hidden on small screens.

Cypress

cy.viewport([1], [2]);
cy.get('footer').should('not.be.visible');

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

A320

B480

C768

D1024

Attempts:

3 left

💡 Hint

Common Mistakes

Using tablet or desktop sizes instead of small mobile dimensions.

Confusing width and height values.

Setting viewport to 320x480 simulates a small mobile screen where the footer is expected to be hidden.

5fill in blank

hard

Fill all three blanks to create a test that resizes viewport and checks header visibility and width.

Cypress

cy.viewport([1], [2]);
cy.get('header').should('be.visible');
cy.get('header').invoke('css', 'width').should('equal', '[3]px');

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

A1024

B768

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up width and height values.

Using incorrect width value in the CSS assertion.

The viewport is set to 768x1024 (tablet portrait). The header should be visible and have width 768 pixels.