Функциональный тест проверяет, что кнопка работает, но не замечает, что она съехала, стала невидимой на тёмной теме или потеряла отступы после правки CSS. Визуальную регрессию ловит скриншотное сравнение: Playwright снимает элемент или страницу и сверяет с сохранённым эталоном - golden-файлом. По сути это контракт рендеринга: "вот как это должно выглядеть", зафиксированный в картинке. Ломается вёрстка - скриншот расходится с эталоном, и тест краснеет.

Работает это через матчер toHaveScreenshot. await expect(page).toHaveScreenshot(...) сравнивает снимок с эталоном; при первом запуске эталон создаётся, при последующих - сверяется. Снимать можно как всю страницу, так и отдельный элемент через локатор - expect(locator).toHaveScreenshot(...) фиксирует один компонент, что устойчивее и осмысленнее, чем полностраничный снимок, зависящий от всего сразу.

У матчера есть опции, без которых визуальные тесты нестабильны. animations: 'disabled' останавливает CSS-анимации, чтобы снимок не попадал на промежуточный кадр. fullPage: true снимает всю прокручиваемую страницу, а не только вьюпорт. mask принимает локаторы областей, которые надо скрыть перед сравнением, - там, где контент по определению меняется от прогона к прогону. Эти опции превращают капризный снимок в воспроизводимый контракт.

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

Главная сложность визуальных тестов - зависимость эталона от окружения. Golden-файл привязан к ОС, браузеру, набору шрифтов и рендерингу: снимок с macOS разработчика не совпадёт с тем же снимком на Linux в CI из-за разного сглаживания шрифтов. Поэтому эталоны генерируют и сравнивают в одинаковом окружении - как правило, в том же Docker-контейнере, что и CI, а не на локальной машине.

Динамику маскируют точечно, а не порогом. Дата, баланс, случайный идентификатор, рекламный баннер - всё, что меняется само по себе, - закрывают маской, чтобы оно не роняло сравнение. Соблазн вместо этого поднять допустимый порог pixel diff опасен: большой порог глушит не только шум, но и настоящие регрессии - съехавший на несколько пикселей блок пройдёт незамеченным. Маскируют конкретное динамическое, а порог держат строгим.