Визуальное регрессионное тестирование

Что такое визуальное регрессионное тестирование? #

Визуальное регрессионное тестирование — автоматизированная практика сравнения скриншотов UI приложения до и после изменений кода для обнаружения непредвиденных визуальных различий. Функциональные тесты проверяют, что кнопка отправляет форму; визуальные тесты проверяют, что кнопка видна, правильно позиционирована и корректно стилизована.

Одно CSS-изменение может сломать макет на десятках страниц. Обновление шрифта может сместить выравнивание текста по всему приложению. Функциональные тесты не ловят эти проблемы, потому что HTML-структура и поведение остаются корректными — ломается только внешний вид.

Как это работает #

Процесс из трёх шагов:

1. Снять baseline: Сделать скриншоты UI в корректном состоянии и утвердить как эталон
2. Сравнить при изменениях: После изменений кода сделать новые скриншоты и сравнить попиксельно с baseline
3. Ревью различий: При обнаружении различий представить diff для ревью

Инструменты #

Визуальные сравнения Playwright #

module.exports = {
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 100,
      maxDiffPixelRatio: 0.01,
      threshold: 0.2,
    }
  }
};

test('визуальный тест главной', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});

test('визуальный тест формы логина', async ({ page }) => {
  await page.goto('/login');
  const form = page.locator('.login-form');
  await expect(form).toHaveScreenshot('login-form.png');
});

Percy (BrowserStack Visual Testing) #

const percySnapshot = require('@percy/playwright');

test('визуальный тест главной', async ({ page }) => {
  await page.goto('/');
  await percySnapshot(page, 'Homepage');
});

Управление baseline #

• Коммитить в git: Делает baseline версионируемыми и доступными для ревью в PR
• Платформо-специфичные baseline: Разные ОС/браузеры рендерят по-разному
• Процесс обновления: При намеренном визуальном изменении обновить baseline в PR

Обработка ложных срабатываний #

1. Консистентные окружения: Запускать визуальные тесты в Docker-контейнерах
2. Увеличить порог: Разрешить небольшие пиксельные различия (1-2%)
3. Маскировать динамический контент: Скрывать таймстампы, аватары, рекламу

await page.evaluate(() => {
  document.querySelectorAll('.timestamp, .avatar, .ad-banner').forEach(el => {
    el.style.visibility = 'hidden';
  });
});
await expect(page).toHaveScreenshot('page-masked.png');

4. Тестирование компонентов: Снимать отдельные компоненты вместо полных страниц
5. Ждать стабильности: Убедиться в полной загрузке анимаций, изображений и шрифтов

Визуальное тестирование в CI/CD #

visual-tests:
  runs-on: ubuntu-latest
  container:
    image: mcr.microsoft.com/playwright:v1.40.0-focal
  steps:
    - uses: actions/checkout@v4
    - run: npm ci
    - run: npx playwright test --grep @visual
    - uses: actions/upload-artifact@v4
      if: failure()
      with:
        name: visual-diff-report
        path: test-results/

Когда использовать #

Хорошие кандидаты: Библиотеки компонентов дизайн-системы, лендинги, шаблоны email, сложные макеты, после обновления CSS-фреймворков.

Плохие кандидаты: Страницы с постоянно меняющимся контентом, высоко персонализированные интерфейсы, ранние прототипы.

Упражнения #

Упражнение 1: Визуальные тесты компонентов #

Настройте визуальное тестирование Playwright, создайте тесты для 5 ключевых компонентов, внесите CSS-изменение, ломающее макет, ревьюируйте diff.

Упражнение 2: Управление baseline #

Создайте baseline для десктопного и мобильного viewport, замаскируйте динамический контент, симулируйте смену шрифта и обновите baseline через PR.

Упражнение 3: Интеграция CI/CD #

Добавьте визуальные тесты в CI-пайплайн с Docker, настройте пороги, настройте хранение артефактов для diff-отчётов.