Percy integration basics in Cypress

Introduction

Percy helps you catch visual changes in your app by taking screenshots during tests. It makes sure your app looks right after updates.

When you want to check if UI changes break the design.

When you update styles or layout and want to confirm nothing else changed.

When you add new features and want to see how they look visually.

When you want automated visual checks alongside your functional tests.

Syntax

Cypress

cy.percySnapshot('snapshot-name')

Use cy.percySnapshot() inside your Cypress test to take a visual snapshot.

The snapshot name helps you identify the screenshot in Percy dashboard.

Examples

Takes a snapshot of the homepage after loading it.

Cypress

cy.visit('https://example.com')
cy.percySnapshot('Homepage')

Takes a snapshot after clicking a button to check UI changes.

Cypress

cy.get('button').click()
cy.percySnapshot('After button click')

Sample Program

This test visits the homepage and takes a Percy snapshot named 'Homepage'. Percy will compare this snapshot with previous ones to find visual differences.

Cypress

describe('Visual test with Percy', () => {
  it('checks homepage appearance', () => {
    cy.visit('https://example.com')
    cy.percySnapshot('Homepage')
  })
})

Important Notes

Make sure Percy is installed and configured in your Cypress project before using cy.percySnapshot().

Snapshots are uploaded to Percy service, so you need internet connection during test runs.

Use meaningful snapshot names to easily track visual changes in Percy dashboard.

Summary

Percy integration lets you catch visual bugs by taking screenshots during Cypress tests.

Use cy.percySnapshot('name') to capture snapshots at any test step.

Review visual changes in Percy dashboard to keep your app looking great.