Налаштування Visual Regression тестів з Percy для сайту
Ви змінили колір однієї кнопки, а в продакшені роз'їхалися тултипи на сусідній сторінці. Знайомо? Візуальне регресійне тестування — це страховка від таких сюрпризів. Percy робить скріншоти сторінок, порівнює їх з еталонними та підсвічує відмінності до пікселя. На відміну від Chromatic, Percy не прив'язаний до Storybook — він працює напряму з Playwright, Cypress, Selenium. Це означає, що ви тестуєте реальні сторінки зі справжніми даними, а не ізольовані компоненти. Наша команда налаштувала Percy для 50+ проектів: від інтернет-магазинів до SaaS-платформ. Гарантуємо, що після інтеграції жоден pixel shift не потрапить у продакшен. Замовте налаштування Percy та перестаньте гадати, чи не зламалася верстка після чергового коміту.
Як 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% та зменшує час на регресійне тестування в 5 разів.
Крім того, часто зустрічаються проблеми з відображенням користувацьких шрифтів (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 сторінках, а загальна економія часу складає до 90%.
| Параметр | Percy | Chromatic |
|---|---|---|
| Інтеграція | Playwright, Cypress, Selenium | Storybook |
| Тестує | Сторінки цілком | Компоненти в ізоляції |
| Мультибраузер | Chrome + Firefox | Chromium |
| Знімки в різних роздільностях | Так (настроюється) | Тільки один |
Окупність візуального тестування
Налаштування на 20–30 сторінках займає 3–5 днів і коштує від $500. Кожен запобігнений баг у продакшені економить від 2 до 8 годин налагодження. Якщо на місяць ви випускаєте 10 релізів, а кожен візуальний баг відловлюється за годину — Percy окупається за один-два спринти. Отримайте консультацію щодо впровадження — оцінимо ваш проект.
Як 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.
Що входить у результати
- Готові візуальні тести (до 500 знімків за прогон).
- Налаштований CI/CD пайплайн.
- Документація та доступ до Percy Dashboard.
- Навчання команди (1 година онлайн).
- 2 тижні підтримки після здачі.
Хочете захистити сайт від візуальних багів? Зв'яжіться з нами — оцінимо проект та запропонуємо оптимальне рішення.