Full-page screenshots in Cypress - Test Execution Trace

Test Overview

This test opens a webpage and takes a full-page screenshot to verify the entire page is captured correctly.

Test Code - Cypress

Cypress

describe('Full-page Screenshot Test', () => {
  it('should capture a full-page screenshot', () => {
    cy.visit('https://example.cypress.io')
    cy.screenshot({ capture: 'fullPage' })
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens	Browser window opens ready for testing	-	PASS
3	Navigates to 'https://example.cypress.io'	Page loads fully with visible content	Page URL is correct and page is loaded	PASS
4	Takes a full-page screenshot using cy.screenshot({ capture: 'fullPage' })	Screenshot captures entire scrollable page content	Screenshot file is created and saved	PASS
5	Test ends	Screenshot saved, browser ready to close	-	PASS

Failure Scenario

Failing Condition: The page URL is incorrect or page fails to load fully before screenshot

Execution Trace Quiz - 3 Questions

What does the 'capture: fullPage' option do in cy.screenshot()?

A Captures only the visible viewport area

B Captures the entire scrollable page in the screenshot

C Captures only the header section of the page

D Captures a screenshot after scrolling down once

Key Result

Always ensure the page is fully loaded before taking a full-page screenshot to capture all content correctly.