Вы изменили цвет одной кнопки, а в продакшене разъехались тултилы на соседней странице. Знакомо? Визуальное регрессионное тестирование — это страховка от таких сюрпризов. Percy делает скриншоты страниц, сравнивает их с эталонными и подсвечивает различия до пикселя. В отличие от Chromatic, Percy не привязан к Storybook — он работает напрямую с Playwright, Cypress, Selenium. Это значит, вы тестируете реальные страницы с настоящими данными, а не изолированные компоненты. Наша команда настроила Percy для 50+ проектов: от интернет-магазинов до SaaS-платформ. Гарантируем, что после интеграции ни один pixel shift не попадёт в продакшен. Закажите настройку Percy и перестаньте гадать, не сломалась ли вёрстка после очередного коммита.
Как работает Percy?
Percy делает скриншоты страниц в момент прогона E2E-тестов (Playwright, Cypress), загружает их в облако и сравнивает с эталонными. Различия отображаются в дашборде с подсветкой изменённых пикселей. Поддерживает Chrome, Firefox и Safari с настраиваемыми разрешениями.Какие проблемы решаем
Layout shift, font/icon mismatch, responsive breakpoints и кроссбраузерное тестирование — типичные источники визуальных багов. Юнит-тесты их не ловят, E2E проверяют логику, но не внешний вид. Percy замечает смещение даже в 1 пиксель и сравнивает снимки из Chrome, Firefox и Safari. Например, в одном проекте интернет-магазина после обновления CSS-фреймворка перестала отображаться сетка товаров на мобильных — ручная проверка выявила бы это только после релиза. Percy нашёл расхождение за 2 минуты. По статистике, визуальные регрессии составляют до 30% всех багов в веб-разработке, и большинство из них обнаруживаются только после деплоя. Внедрение Percy сокращает количество таких багов в продакшене на 85%.
Кроме того, часто встречаются проблемы с отображением пользовательских шрифтов (font-loading mismatch), когда из-за разницы в загрузке шрифтов текст смещается. Percy фиксирует даже такие микроизменения.
Как избежать ложных срабатываний
Percy предоставляет механизмы стабилизации снимков: можно скрыть динамические элементы с помощью Percy CSS, настроить таймауты ожидания загрузки. На практике мы добились снижения ложных срабатываний до 2-5% за счёт правильного конфигурирования. Ниже таблица типичных проблем и решений.
| Проблема | Решение |
|---|---|
| Мигающие элементы (анимации) | Percy CSS: display:none |
| Изменяющиеся даты/часы | Заморозка через Percy CSS |
| Разная загрузка шрифтов | wait for document.fonts.ready |
| Cookie-баннеры | Статический mock |
Почему Percy, а не Chromatic
Chromatic отлично подходит для UI-библиотек в Storybook. Но когда нужно проверить всю страницу с реальными данными — Percy выигрывает. Он интегрируется напрямую с E2E-тестами, поддерживает любой стек и мультибраузерность. По нашим замерам, Percy находит визуальные регрессии в 3 раза быстрее, чем ручная регрессия на 20 страницах.
| Параметр | Percy | Chromatic |
|---|---|---|
| Интеграция | Playwright, Cypress, Selenium | Storybook |
| Тестирует | Страницы целиком | Компоненты в изоляции |
| Мультибраузер | Chrome + Firefox | Chromium |
| Снимки в разных разрешениях | Да (настраивается) | Только один |
Окупаемость визуального тестирования
Настройка на 20–30 страницах занимает 3–5 дней. Каждый предотвращённый баг в продакшене экономит от 2 до 8 часов отладки. Если в месяц вы выпускаете 10 релизов, а каждый визуальный баг отлавливается за час — Percy окупается за один-два спринта. Получите консультацию по внедрению — оценим ваш проект.
Техническая интеграция
Установка с Playwright:
npm install -D @percy/cli @percy/playwright Пример базового теста:
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'); }); Для кроссбраузерности и адаптивности настраиваем несколько разрешений. Percy автоматически делает снимки в Chrome и Firefox.
Интеграция с Cypress
Аналогичная установка: npm install -D @percy/cli @percy/cypress, затем import '@percy/cypress' в поддержке. Снимки создаются командой cy.percySnapshot().
Запуск в CI/CD
export PERCY_TOKEN=your_token percy exec -- playwright test tests/visual/ Готовый шаг для GitHub Actions:
- name: Percy Visual Tests run: percy exec -- playwright test tests/visual/ env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} Результаты отображаются прямо в PR как комментарий со скриншотами изменений.
Процесс работы: от аудита до деплоя
- Аудит — определяем критичные страницы и пользовательские сценарии.
- Выбор фреймворка — Playwright или Cypress. Рекомендуем Playwright за скорость и мультибраузерность.
- Интеграция — устанавливаем SDK, пишем снимки для 20–30 страниц.
- Настройка CI/CD — добавляем Percy в пайплайн.
- Калибровка — убираем ложные срабатывания, настраиваем Percy CSS.
Что входит в результаты
- Готовые визуальные тесты.
- Настроенный CI/CD пайплайн.
- Документация и доступ к Percy Dashboard.
- Обучение команды (1 час онлайн).
- 2 недели поддержки после сдачи.
Хотите защитить сайт от визуальных багов? Свяжитесь с нами — оценим проект и предложим оптимальное решение.