cy.viewport() for screen sizes in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the viewport to a mobile screen size.

Cypress

cy.[1]('iphone-6')

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

Aviewport

Bvisit

Cclick

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.visit() instead of cy.viewport().

Trying to set viewport size with cy.get().

The cy.viewport() command sets the screen size for testing different devices.

2fill in blank

medium

Complete the code to set the viewport to a custom width and height.

Cypress

cy.viewport({ width: [1], height: 800 })

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

Awidth

B'1024px'

C1024

Dheight

Attempts:

3 left

💡 Hint

Common Mistakes

Putting width value in quotes, which causes errors.

Using property names instead of values.

The width value must be a number without quotes to set the viewport size correctly.

3fill in blank

hard

Fix the error in the code to set the viewport to tablet size.

Cypress

cy.viewport({ width: 768, [1]: 1024 })

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

Awidth

Bheight

Csize

Dscreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using width twice instead of height.

Using invalid property names like size or screen.

The correct property for height is height, not width or others.

4fill in blank

hard

Fill both blanks to set the viewport to a landscape iPad size.

Cypress

cy.viewport({ width: [1], height: [2] })

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

A1024

B768

C800

D600

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping width and height values.

Using incorrect pixel values.

Landscape iPad size is width 1024 and height 768 pixels.

5fill in blank

hard

Fill all three blanks to set the viewport to a custom size and test a page.

Cypress

cy.viewport({ width: [1], height: [2] })
cy.[3]('https://example.com')

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

A1280

B720

Cvisit

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using click instead of visit to open the page.

Putting width or height in quotes.

Swapping width and height values.

Set viewport width to 1280, height to 720, then visit the page with cy.visit().