Why cy.viewport() for screen sizes in Cypress? - Purpose & Use Cases

The Big Idea

What if you could test your website on every device size with just one line of code?

The Scenario

Imagine testing a website manually on your computer, then resizing the browser window every time to check how it looks on a phone, tablet, or desktop screen.

You have to do this for many pages and features, over and over again.

The Problem

Manually resizing the browser is slow and tiring.

You might forget to test some screen sizes or make mistakes resizing.

This leads to missed bugs and unhappy users on different devices.

The Solution

Using cy.viewport() in Cypress lets you quickly set the screen size in your tests.

This means your tests automatically check how your site works on phones, tablets, and desktops without manual resizing.

Before vs After

✗ Before

Visit page
Resize browser manually
Check layout
Repeat for each size

✓ After

cy.viewport('iphone-6')
cy.visit('/page')
cy.checkLayout()

What It Enables

You can easily test your website on many screen sizes automatically, catching layout bugs early and saving time.

Real Life Example

A developer tests a shopping site to make sure the 'Add to Cart' button is visible and clickable on phones and tablets, not just desktops.

Key Takeaways

Manual resizing is slow and error-prone.

cy.viewport() sets screen size in tests automatically.

This helps catch layout issues on different devices quickly.