Screenshot capture (cy.screenshot) in Cypress

Introduction

Taking screenshots helps you see what your app looks like during tests. It makes finding problems easier.

You want to save a picture of the page after a test step to check layout.

You need proof that a bug happened during a test run.

You want to compare how the page looks before and after an action.

You want to share the app state with your team without sending code.

You want to keep a visual record of your test results.

Syntax

Cypress

cy.screenshot([fileName], [options])

fileName is optional and sets the screenshot file name.

options can control things like screenshot quality or whether to capture the full page.

Examples

Takes a screenshot with a default name based on the test and timestamp.

Cypress

cy.screenshot()

Saves the screenshot with the name 'homepage.png'.

Cypress

cy.screenshot('homepage')

Captures only the visible part of the page and names the file 'login-page.png'.

Cypress

cy.screenshot('login-page', { capture: 'viewport' })

Captures the entire page, even parts you need to scroll to see.

Cypress

cy.screenshot('full-page', { capture: 'fullPage' })

Sample Program

This test opens the example Cypress page and takes a screenshot named 'homepage.png'.

Cypress

describe('My App Visual Test', () => {
  it('shows homepage correctly', () => {
    cy.visit('https://example.cypress.io')
    cy.screenshot('homepage')
  })
})

Important Notes

Screenshots are saved in the default folder cypress/screenshots.

You can view screenshots after tests to understand what happened visually.

Use meaningful file names to keep screenshots organized.

Summary

Use cy.screenshot() to capture pictures of your app during tests.

Screenshots help find and share visual bugs easily.

You can customize the file name and capture options for better control.