cy.viewport() for screen sizes in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.viewport() do in Cypress?

cy.viewport() sets the size of the browser window to simulate different screen sizes during tests.

beginner

How do you set a viewport size to 1280 pixels wide and 720 pixels tall in Cypress?

Use cy.viewport(1280, 720) to set the browser window to 1280x720 pixels.

intermediate

Name three preset device sizes you can use with cy.viewport().

Examples include 'iphone-6', 'ipad-2', and 'macbook-15'.

beginner

Why is using cy.viewport() important in testing?

It helps test how a website looks and works on different screen sizes, like phones, tablets, and desktops.

intermediate

What happens if you call cy.viewport() multiple times in a test?

The viewport size changes each time, allowing you to test responsiveness by simulating different screen sizes in one test.

Which command sets the viewport to simulate an iPhone 6 screen?

A cy.viewport('iphone-6')

B cy.viewport(375, 667)

C cy.viewport('ipad-2')

D cy.viewport('macbook-15')

cy.viewport('iphone-6') sets the viewport to the iPhone 6 preset size.

What is the correct way to set a custom viewport size of 1024x768 pixels?

A cy.viewport(1024, 768)

B cy.viewport('1024x768')

C cy.viewport([1024, 768])

D cy.viewport('custom', 1024, 768)

Use cy.viewport(width, height) with numbers to set custom sizes.

Why might you use cy.viewport() in your tests?

A To speed up test execution

B To test website behavior on different screen sizes

C To change the URL of the page

D To clear cookies

cy.viewport() helps simulate different devices by changing screen size.

Which of these is NOT a valid preset device name for cy.viewport()?

A 'iphone-x'

B 'ipad-2'

C 'android-10'

D 'macbook-15'

'android-10' is not a valid preset device name in Cypress.

If you want to test responsiveness by changing viewport sizes multiple times in one test, what should you do?

A Use <code>cy.reload()</code> instead

B Only set viewport once at the start

C Change viewport in the browser manually

D Call <code>cy.viewport()</code> multiple times with different sizes

Calling cy.viewport() multiple times changes the viewport size during the test.

Explain how cy.viewport() helps in testing responsive web design.

Think about how websites look different on phones and computers.

Describe how to use cy.viewport() to test a website on both a mobile phone and a desktop screen in one test.

Remember you can change viewport size multiple times in a test.