Screenshot capture (cy.screenshot) in Cypress - Test Execution Trace

Test Overview

This test opens a webpage, clicks a button, and captures a screenshot to verify the page state visually.

Test Code - Cypress

Cypress

describe('Screenshot capture test', () => {
  it('should capture screenshot after button click', () => {
    cy.visit('https://example.cypress.io')
    cy.get('a[href="/commands/actions"]').click()
    cy.screenshot('after-click')
    cy.get('.action-email').should('be.visible')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io'	Example Cypress homepage loaded	Page loaded successfully	PASS
3	Finds link with href '/commands/actions' and clicks it	Navigated to Actions commands page	Link found and clicked	PASS
4	Captures screenshot named 'after-click'	Screenshot saved in Cypress screenshots folder	Screenshot file created	PASS
5	Finds input with class '.action-email' and checks visibility	Input field visible on page	Input field is visible	PASS

Failure Scenario

Failing Condition: The link with href '/commands/actions' is not found or not clickable

Execution Trace Quiz - 3 Questions

What does cy.screenshot('after-click') do in this test?

A It saves a screenshot of the current page state with the name 'after-click'.

B It clicks a button named 'after-click'.

C It verifies the page URL contains 'after-click'.

D It waits for an element with id 'after-click' to appear.

Key Result

Always verify elements exist and are interactable before taking screenshots to ensure meaningful visual validation.