Percy integration basics in Cypress - Test Execution Trace

Test Overview

This test opens a webpage and takes a visual snapshot using Percy to verify the page looks correct. It checks that Percy captures the snapshot without errors.

Test Code - Cypress

Cypress

import '@percy/cypress';

describe('Percy integration basics', () => {
  it('should capture a visual snapshot of the homepage', () => {
    cy.visit('https://example.cypress.io');
    cy.percySnapshot('Homepage Snapshot');
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, Cypress environment ready	-	PASS
2	Browser opens	Browser window launched by Cypress	-	PASS
3	Navigates to 'https://example.cypress.io'	Page loads showing Cypress example homepage	Page URL is 'https://example.cypress.io/'	PASS
4	Calls cy.percySnapshot('Homepage Snapshot')	Percy captures a visual snapshot of the current page	Snapshot named 'Homepage Snapshot' is sent to Percy service	PASS
5	Test ends	Test completes with no errors	-	PASS

Failure Scenario

Failing Condition: Percy snapshot command fails due to missing Percy plugin or network issue

Execution Trace Quiz - 3 Questions

What does cy.percySnapshot('Homepage Snapshot') do in this test?

A Clicks a button named 'Homepage Snapshot'

B Navigates to a page called 'Homepage Snapshot'

C Takes a visual snapshot of the current page for Percy to compare

D Checks if the page title is 'Homepage Snapshot'

Key Result

Always verify that the Percy plugin is properly installed and configured before using cy.percySnapshot to avoid runtime errors.