Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке скриншотне (візуальне) UI-тестування?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Скриншотне (візуальне) UI-тестування** - підхід, за якого тести порівнюють зображення інтерфейсу з раніше збереженим еталонним скріном, щоб автоматично виявляти будь-які візуальні зміни: кольори, розміри, відступи, шрифти тощо. **Ключове:** тест перевіряє не поведінку, а зовнішній вигляд, і падає навіть за незначної відмінності від еталона, показуючи візуальний дифф.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСкриншотне (візуальне) UI-тестування - це підхід, за якого тести порівнюють **зображення інтерфейсу з раніше збереженим еталонним скріном**. Ідея в тому, щоб автоматично визначати будь-які візуальні зміни: кольори, розміри, відступи, положення елементів, шрифти, баги у верстці тощо. --- ### **Як це працює** 1. Тест запускає застосунок і робить скриншот певного екрана, компонента або сторінки. 2. Отримане зображення порівнюється з еталонним (baseline), яке зберігається в репозиторії. 3. Якщо картинки **ідентичні**, тест проходить. 4. Якщо є **навіть невелика відмінність**, тест падає, показуючи візуальний дифф (що саме змінилося). --- ### **Навіщо це потрібно** Скриншотне тестування допомагає ловити помилки, які **юніт-тестами не побачити**, наприклад: - з'їхалу верстку - зламаний адаптив - елемент, що зник - поломки після оновлення браузера, CSS або сторонніх бібліотек - неправильний стан компонентів (кнопки, вікна, списки тощо) --- ### **Де застосовують** - веб-UI - мобільні застосунки - дизайн-системи - компоненти в Storybook - складні візуальні інтерфейси (дашборди, таблиці) --- ### **Плюси** - ловить візуальні баги, які людина може не помітити - автоматизує перевірку зовнішнього вигляду - зменшує обсяг ручного тестування інтерфейсу ### **Мінуси** - тести можуть бути крихкими (дрібні візуальні зміни ламають результат) - великі дифи іноді складно аналізувати - вимагає акуратного ведення baseline-скриншотів --- ### **Головна ідея** Скриншотне UI-тестування перевіряє **не поведінку, а зовнішній вигляд**. Це захист від несподіваних візуальних змін, щоб інтерфейс виглядав саме так, як було задумано.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.