Full-page screenshots in Cypress

Introduction

Full-page screenshots help you capture the entire webpage in one image. This is useful to check the page layout and design visually.

You want to see how the whole webpage looks after loading.

You need to compare page designs between versions.

You want to catch visual bugs that happen outside the visible screen area.

You want to save a record of the page for reports or reviews.

Syntax

Cypress

cy.screenshot({ capture: 'fullPage' })

The capture: 'fullPage' option tells Cypress to take a screenshot of the entire page, not just the visible part.

You can add a name like cy.screenshot('homepage', { capture: 'fullPage' }) to save the screenshot with a custom file name.

Examples

Takes a full-page screenshot with the default file name.

Cypress

cy.screenshot({ capture: 'fullPage' })

Takes a full-page screenshot and saves it as 'login-page.png'.

Cypress

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

Visits a website and takes a full-page screenshot named 'example-full.png'.

Cypress

cy.visit('https://example.com')
cy.screenshot('example-full', { capture: 'fullPage' })

Sample Program

This test visits the Cypress example page and takes a full-page screenshot named 'full-page-example.png'.

Cypress

describe('Full-page screenshot test', () => {
  it('captures the entire page', () => {
    cy.visit('https://example.cypress.io')
    cy.screenshot('full-page-example', { capture: 'fullPage' })
  })
})

Important Notes

Full-page screenshots may take longer to capture than visible area screenshots.

Make sure the page is fully loaded before taking the screenshot to avoid missing content.

Full-page screenshots work best on desktop viewports; mobile views may crop differently.

Summary

Use cy.screenshot({ capture: 'fullPage' }) to capture the entire webpage.

Full-page screenshots help catch layout and design issues beyond the visible screen.

Always wait for the page to load fully before taking screenshots for best results.