Visual regression tests development for website (Percy)

Visual Regression Testing for Websites (Percy)

Percy (Browserstack) is a cloud platform for visual regression testing. Unlike Chromatic, Percy is not tied to Storybook and integrates directly with Playwright, Cypress, Selenium. Suitable for testing entire pages, not just components.

Installation with Playwright

npm install -D @percy/cli @percy/playwright

Basic Integration

// tests/visual/homepage.spec.ts
import { test } from '@playwright/test';
import percySnapshot from '@percy/playwright';

test('homepage visual snapshot', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    await percySnapshot(page, 'Homepage');
});

test('product page snapshots', async ({ page }) => {
    await page.goto('/products/macbook-pro');
    await percySnapshot(page, 'Product Page - Default');

    // Open gallery
    await page.click('[data-cy="gallery-btn"]');
    await percySnapshot(page, 'Product Page - Gallery Open');
});

test('responsive snapshots', async ({ page }) => {
    await page.goto('/');

    // Desktop
    await page.setViewportSize({ width: 1280, height: 900 });
    await percySnapshot(page, 'Homepage Desktop');

    // Mobile
    await page.setViewportSize({ width: 375, height: 812 });
    await percySnapshot(page, 'Homepage Mobile');
});

Cypress Integration

npm install -D @percy/cli @percy/cypress

// cypress/support/e2e.ts
import '@percy/cypress';

// cypress/e2e/visual.cy.ts
describe('Visual tests', () => {
    it('checkout page', () => {
        cy.visit('/checkout');
        cy.percySnapshot('Checkout Page');

        cy.get('[data-cy="add-coupon"]').click();
        cy.percySnapshot('Checkout Page - Coupon Input Open');
    });
});

Running Tests

# Set Percy token
export PERCY_TOKEN=your_token

# Run with Playwright
percy exec -- playwright test tests/visual/

# Run with Cypress
percy exec -- cypress run --spec "cypress/e2e/visual.cy.ts"

GitHub Actions

name: Visual Tests
on: [push, pull_request]

jobs:
  percy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install chromium

      - name: Percy Visual Tests
        run: percy exec -- playwright test tests/visual/
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

Percy vs Chromatic

Snapshot Configuration

// .percy.yml
version: 2
snapshot:
  widths: [375, 768, 1280, 1920]
  min-height: 1024
  enable-javascript: true
  percyCSS: |
    /* Freeze dynamic elements */
    .timestamp, .live-clock { visibility: hidden; }
    video { display: none !important; }
    * { animation: none !important; transition: none !important; }

Implementation Timeline

Percy setup + writing visual tests for 20–30 pages: 3–5 days.