Разработка 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 + написание visual тестов для 20–30 страниц: 3–5 дней.