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.

Practice

1. What is the main purpose of integrating Percy with Cypress tests?

easy

A. To speed up test execution time

B. To catch visual bugs by taking screenshots during tests

C. To generate test data automatically

D. To write unit tests for backend APIs

Solution

1. Step 1: Understand Percy's role in testing

   Percy is used to capture screenshots during tests to detect visual changes.

2. Step 2: Compare options with Percy's purpose

   Only To catch visual bugs by taking screenshots during tests matches Percy's function of catching visual bugs via screenshots.

3. Final Answer:

   To catch visual bugs by taking screenshots during tests -> Option B

4. Quick Check:

   Percy purpose = Visual bug detection [OK]

Hint: Percy = visual snapshots during tests [OK]

Common Mistakes:

• Thinking Percy speeds up tests
• Confusing Percy with test data tools
• Assuming Percy writes backend tests

2. Which of the following is the correct syntax to take a Percy snapshot in a Cypress test?

easy

A. percy.cySnapshot('Homepage')

B. cy.snapshotPercy('Homepage')

C. cy.percySnapshot('Homepage')

D. cy.takePercySnapshot('Homepage')

Solution

1. Step 1: Recall Percy snapshot command syntax

   The correct command is cy.percySnapshot('name') to capture snapshots.

2. Step 2: Match options with correct syntax

   Only cy.percySnapshot('Homepage') matches the exact syntax cy.percySnapshot('Homepage').

3. Final Answer:

   cy.percySnapshot('Homepage') -> Option C

4. Quick Check:

   Correct Percy command = cy.percySnapshot() [OK]

Hint: Look for exact cy.percySnapshot() syntax [OK]

Common Mistakes:

• Swapping method and object order
• Adding extra words like 'take'
• Using wrong method names

3. Given this Cypress test snippet with Percy integration:

describe('Visual test', () => {
  it('checks homepage', () => {
    cy.visit('/')
    cy.percySnapshot('Homepage loaded')
    cy.get('#login').click()
    cy.percySnapshot('Login clicked')
  })
})

How many Percy snapshots will be captured during this test run?

medium

A. 1

B. 3

C. 0

D. 2

Solution

1. Step 1: Count cy.percySnapshot calls in the test

   There are two calls: one after visiting homepage, one after clicking login.

2. Step 2: Confirm each call triggers a snapshot

   Each cy.percySnapshot() call captures one snapshot, so total is 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Number of snapshots = 2 [OK]

Hint: Count cy.percySnapshot() calls in test [OK]

Common Mistakes:

• Counting only one snapshot
• Assuming snapshots auto-capture without calls
• Confusing clicks with snapshots

4. You wrote this Cypress test with Percy snapshot:

it('checks page', () => {
  cy.visit('/page')
  cy.percySnapshot()
})

But Percy dashboard shows no snapshots. What is the likely problem?

medium

A. Missing snapshot name argument in cy.percySnapshot()

B. cy.visit() must be called after cy.percySnapshot()

C. Percy snapshots only work on mobile viewport

D. You must call cy.percySnapshot() twice per test

Solution

1. Step 1: Check cy.percySnapshot usage

   The cy.percySnapshot() command requires a name string argument to identify the snapshot.

2. Step 2: Identify missing argument issue

   Since no name is given, Percy does not capture or upload the snapshot.

3. Final Answer:

   Missing snapshot name argument in cy.percySnapshot() -> Option A

4. Quick Check:

   Snapshot name required = true [OK]

Hint: Always provide a name string to cy.percySnapshot() [OK]

Common Mistakes:

• Thinking visit order matters
• Believing Percy only works on mobile
• Assuming multiple snapshots are mandatory

5. You want to test a form with Percy snapshots at three steps: before filling, after filling, and after submission. Which code snippet correctly integrates Percy snapshots in Cypress?

hard

A. cy.visit('/form')
cy.percySnapshot('Before filling')
cy.get('#input').type('data')
cy.percySnapshot('After filling')
cy.get('#submit').click()
cy.percySnapshot('After submission')

B. cy.visit('/form')
cy.percySnapshot()
cy.get('#input').type('data')
cy.percySnapshot()
cy.get('#submit').click()
cy.percySnapshot()

C. cy.visit('/form')
cy.get('#input').type('data')
cy.percySnapshot('After filling')
cy.get('#submit').click()

D. cy.visit('/form')
cy.get('#submit').click()
cy.percySnapshot('After submission')

Solution

1. Step 1: Identify required Percy snapshots

   Snapshots needed at three steps: before filling, after filling, after submission.

2. Step 2: Check which snippet has all three snapshots with names

   Only cy.visit('/form') cy.percySnapshot('Before filling') cy.get('#input').type('data') cy.percySnapshot('After filling') cy.get('#submit').click() cy.percySnapshot('After submission') has three named cy.percySnapshot() calls at correct steps.

3. Final Answer:

   Code snippet with three named Percy snapshots at correct steps -> Option A

4. Quick Check:

   Three named snapshots = cy.visit('/form') cy.percySnapshot('Before filling') cy.get('#input').type('data') cy.percySnapshot('After filling') cy.get('#submit').click() cy.percySnapshot('After submission') [OK]

Hint: Name each snapshot and place at correct test steps [OK]

Common Mistakes:

• Omitting snapshot names
• Missing snapshots at required steps
• Calling snapshots before visit