Розробка Visual Regression тестів для сайту (Percy)

Розроблення Visual Regression тестів для сайтів (Percy)

Percy (Browserstack) — хмарна платформа для visual regression testing. На відміну від Chromatic, Percy не прив'язана до Storybook та інтегрується прямо з Playwright, Cypress, Selenium. Підходить для тестування цілих сторінок, а не тільки компонентів.

Встановлення з Playwright

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

Базова інтеграція

// 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');

    // Відкрити галерею
    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

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');
    });
});

Запуск тестів

# Встановити Percy token
export PERCY_TOKEN=your_token

# Запуск з Playwright
percy exec -- playwright test tests/visual/

# Запуск з 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

Конфігурація знімків

// .percy.yml
version: 2
snapshot:
  widths: [375, 768, 1280, 1920]
  min-height: 1024
  enable-javascript: true
  percyCSS: |
    /* Заморозити динамічні елементи */
    .timestamp, .live-clock { visibility: hidden; }
    video { display: none !important; }
    * { animation: none !important; transition: none !important; }

Строк реалізації

Настройка Percy + написання візуальних тестів для 20–30 сторінок: 3–5 днів.