Percy integration basics in Cypress - Build an Automation Script

Visual testing with Percy on homepage

Preconditions (3)

Step 1: Open the homepage URL 'https://example.com'

Step 2: Wait for the page to fully load

Step 3: Take a Percy snapshot named 'Homepage snapshot'

Step 4: Verify that the Percy snapshot is created and uploaded

✅ Expected Result: Percy snapshot named 'Homepage snapshot' is successfully created and uploaded for visual testing

Automation Requirements - Cypress

Assertions Needed:

Verify the page loads without errors

Verify Percy snapshot command is called with correct name

Best Practices:

Use cy.visit() to open the page

Use cy.percySnapshot() to take visual snapshot

Use explicit waits only if necessary

Keep test steps clear and simple

Automated Solution

Cypress

/// <reference types="cypress" />

import '@percy/cypress';

describe('Percy integration basics', () => {
  it('should take a Percy snapshot of the homepage', () => {
    cy.visit('https://example.com');
    // Wait for page to load fully
    cy.get('body').should('be.visible');
    // Take Percy snapshot
    cy.percySnapshot('Homepage snapshot');
  });
});

This test script uses Cypress with Percy integration.

First, it visits the homepage URL using cy.visit().

Then, it waits for the page body to be visible to ensure the page loaded.

Finally, it calls cy.percySnapshot('Homepage snapshot') to take a visual snapshot for Percy.

This snapshot will be uploaded to Percy for visual comparison.

We import @percy/cypress to enable the cy.percySnapshot() command.

Common Mistakes - 3 Pitfalls

{'mistake': "Not importing '@percy/cypress' before using cy.percySnapshot()", 'why_bad': "The Percy commands won't be available and test will fail with an error.", 'correct_approach': "Always import '@percy/cypress' in your test file or support file."}

Taking Percy snapshot before page fully loads

{'mistake': 'Using hardcoded waits like cy.wait(5000)', 'why_bad': 'Makes tests slow and flaky if page loads faster or slower than wait time.', 'correct_approach': "Use assertions like cy.get('selector').should('be.visible') to wait dynamically."}

Bonus Challenge

Now add data-driven testing with 3 different URLs to take Percy snapshots

Show Hint