Что такое визуальное регрессионное тестирование?
Визуальное регрессионное тестирование сравнивает скриншоты пользовательского интерфейса с ранее одобренными эталонными изображениями, чтобы поймать непреднамеренные визуальные изменения. Оно находит ошибки, которые пропускают тесты кода: сдвинувшуюся кнопку, вылезающий за границы текст или сломанную мобильную вёрстку.
Как это работает
Метод состоит из четырёх шагов, повторяющихся при каждом изменении.
- Эталон: сделайте скриншоты страниц в одобренном состоянии.
- Сравнение: после изменения снимите те же страницы в тех же размерах и сравните их попиксельно.
- Порог: задайте предел доли изменённых пикселей, чтобы крошечные отличия не считались сбоями.
- Одобрение: если изменение задумано, новое изображение становится эталоном; если нет, исправьте ошибку.
Зачем это нужно
Модульные тесты сообщают, что функция возвращает правильное значение, но не что страница выглядит правильно. Изменение CSS может сломать вёрстку на странице, которую никто не трогал. Такие побочные эффекты чаще возникают, когда интерфейс меняют кодинг-агенты, потому что агент обычно работает, не видя экрана.
Как уменьшить ложные срабатывания
Шумный тест быстро начинают игнорировать, поэтому важна стабильная настройка.
- Отключите анимации и переходы.
- Зафиксируйте меняющиеся данные: даты, время и случайный контент.
- Дожидайтесь загрузки шрифтов и всегда снимайте в одном и том же браузере и одной и той же операционной системе.
- Тестируйте в нескольких размерах, например для телефона, планшета и десктопа.
Инструменты
Распространённые варианты: проверка toHaveScreenshot в Playwright, инструменты с открытым исходным кодом вроде BackstopJS и облачные сервисы вроде Percy или Chromatic. Все они основаны на одной идее: эталонное изображение, новое изображение и изображение-разница, подсвечивающее изменения.
Визуальное сравнение в AgentVera
Вкладка Preview в AgentVera запускает визуальные сравнения для dev-сервера проекта и каждого worktree.
- Скриншоты выбранных страниц целиком делаются в размерах Mobile (375×812), Tablet (768×1024) и Desktop (1440×900); можно задать до 6 размеров.
- Вы задаёте эталон; последующие снимки сравниваются попиксельно, а изменённые пиксели отмечаются красным. Порог по умолчанию — 0,1% пикселей.
- Кнопка тестирования с агентом открывает агента Claude в этом worktree с браузером AgentVera; он открывает каждую страницу на каждой контрольной ширине и ищет переполнение, сломанную вёрстку, ошибки консоли и нерабочие ссылки.
FAQ
Визуальное регрессионное тестирование — это то же самое, что snapshot-тестирование?
Похожая идея, другая цель. Snapshot-тесты обычно сравнивают HTML или текстовый вывод компонента; визуальные регрессионные тесты сравнивают настоящие скриншоты.
Почему попиксельные сравнения дают ложные сбои?
Отрисовка шрифтов, сглаживание, анимации и меняющийся контент могут сдвигать несколько пикселей. Порог и стабильное окружение снижают этот шум.
Какие страницы тестировать?
Начните с самых используемых и самых хрупких: главной страницы, входа, оформления заказа или форм. Снимайте каждую в нескольких размерах экрана.