Что такое скриншотные тесты интерфейса и для чего они применяются?

Question

Скриншотные тесты — это тесты, которые сравнивают текущий внешний вид интерфейса с эталонным изображением. Если внешний вид изменился, тест сообщает об отличиях. Такой подход помогает обнаружить визуальные баги, например сломанную верстку или неправильные стили. Обычно используются инструменты вроде Storybook, Playwright или Percy.

YeaHub · Accepted Answer

Скриншотные тесты — это способ автоматической проверки UI, при котором система делает снимок компонента или страницы и сравнивает его с сохраненным эталоном.Как работает механизмРендерится компонент или страница.Делается скриншот.Скриншот сравнивается с baseline-изображением.Если есть различия выше допустимого порога, тест падает.Где применяетсяПроверка компонентов дизайн-системыКонтроль регрессий после изменения CSSПроверка адаптивностиПример (условный пример Playwright)await expect(page).toHaveScreenshot("button.png");
ПлюсыПозволяет обнаруживать визуальные баги, которые не видны в unit-тестахХорошо подходит для UI-библиотекМинусыЧувствительность к мелким изменениямТребует поддержки baseline-скриншотовВыводСкриншотные тесты полезны для контроля визуальных изменений и особенно эффективны при разработке компонентов и дизайн-систем.