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

URL: https://agentvera.dev/ru/glossary/visual-regression-testing/

Визуальное регрессионное тестирование сравнивает скриншоты пользовательского интерфейса с ранее одобренными эталонными изображениями, чтобы поймать непреднамеренные визуальные изменения. Оно находит ошибки, которые пропускают тесты кода: сдвинувшуюся кнопку, вылезающий за границы текст или сломанную мобильную вёрстку.

**Как это работает.** Метод состоит из четырёх шагов, повторяющихся при каждом изменении.

- Эталон: сделайте скриншоты страниц в одобренном состоянии.
- Сравнение: после изменения снимите те же страницы в тех же размерах и сравните их попиксельно.
- Порог: задайте предел доли изменённых пикселей, чтобы крошечные отличия не считались сбоями.
- Одобрение: если изменение задумано, новое изображение становится эталоном; если нет, исправьте ошибку.

**Зачем это нужно.** Модульные тесты сообщают, что функция возвращает правильное значение, но не что страница выглядит правильно. Изменение CSS может сломать вёрстку на странице, которую никто не трогал. Такие побочные эффекты чаще возникают, когда интерфейс меняют кодинг-агенты, потому что агент обычно работает, не видя экрана.

**Как уменьшить ложные срабатывания.** Шумный тест быстро начинают игнорировать, поэтому важна стабильная настройка.

- Отключите анимации и переходы.
- Зафиксируйте меняющиеся данные: даты, время и случайный контент.
- Дожидайтесь загрузки шрифтов и всегда снимайте в одном и том же браузере и одной и той же операционной системе.
- Тестируйте в нескольких размерах, например для телефона, планшета и десктопа.

**Инструменты.** Распространённые варианты: проверка toHaveScreenshot в Playwright, инструменты с открытым исходным кодом вроде BackstopJS и облачные сервисы вроде Percy или Chromatic. Все они основаны на одной идее: эталонное изображение, новое изображение и изображение-разница, подсвечивающее изменения.

**Визуальное сравнение в AgentVera.** Вкладка Preview в AgentVera запускает визуальные сравнения для dev-сервера проекта и каждого worktree.

- **Визуальное регрессионное тестирование — это то же самое, что snapshot-тестирование?** Похожая идея, другая цель. Snapshot-тесты обычно сравнивают HTML или текстовый вывод компонента; визуальные регрессионные тесты сравнивают настоящие скриншоты.
- **Почему попиксельные сравнения дают ложные сбои?** Отрисовка шрифтов, сглаживание, анимации и меняющийся контент могут сдвигать несколько пикселей. Порог и стабильное окружение снижают этот шум.
- **Какие страницы тестировать?** Начните с самых используемых и самых хрупких: главной страницы, входа, оформления заказа или форм. Снимайте каждую в нескольких размерах экрана.

---

**Об AgentVera.** AgentVera — настольное приложение для macOS, Windows и Linux от Solviera Teknoloji. Оно запускает 18 ИИ-агентов для программирования (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) рядом, по проектам, в настоящих терминалах с собственными установками CLI и входами пользователя. В бесплатном тарифе количество агентов не ограничено. Скачать: https://agentvera.dev/ru/download/ · Цены: https://agentvera.dev/ru/pricing/