Why Screenshot capture (cy.screenshot) in Cypress? - Purpose & Use Cases

The Big Idea

What if your tests could snap perfect pictures of your app automatically, catching bugs you might miss?

The Scenario

Imagine you are testing a website manually and want to keep a record of how it looks at different steps. You take screenshots by pressing keys or using separate tools, switching between apps, and saving files one by one.

The Problem

This manual way is slow and distracting. You might forget to take a screenshot at the right moment or save it in the wrong folder. It's easy to lose track, and comparing screenshots later becomes a big headache.

The Solution

Using cy.screenshot() in Cypress lets you capture screenshots automatically during your tests. It saves images exactly when you want, with organized names and folders, without leaving your test flow.

Before vs After

✗ Before

Press Print Screen key -> Open Paint -> Paste -> Save file -> Repeat for each step

✓ After

cy.visit('/page')
cy.get('button').click()
cy.screenshot('after-click')

What It Enables

It enables fast, reliable visual records of your app's state during tests, making bugs easier to spot and share.

Real Life Example

When testing a shopping cart, you can automatically capture screenshots after adding items, so you have proof of the cart's content and layout at each step.

Key Takeaways

Manual screenshots are slow and error-prone.

cy.screenshot() automates capturing images during tests.

This helps track UI changes and find bugs faster.