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