Що таке скриншотне (візуальне) UI-тестування?

Скриншотне (візуальне) UI-тестування - це підхід, за якого тести порівнюють зображення інтерфейсу з раніше збереженим еталонним скріном. Ідея в тому, щоб автоматично визначати будь-які візуальні зміни: кольори, розміри, відступи, положення елементів, шрифти, баги у верстці тощо.

---

#Як це працює

1. Тест запускає застосунок і робить скриншот певного екрана, компонента або сторінки.
2. Отримане зображення порівнюється з еталонним (baseline), яке зберігається в репозиторії.
3. Якщо картинки ідентичні, тест проходить.
4. Якщо є навіть невелика відмінність, тест падає, показуючи візуальний дифф (що саме змінилося).

---

#Навіщо це потрібно

Скриншотне тестування допомагає ловити помилки, які юніт-тестами не побачити, наприклад:

• з'їхалу верстку
• зламаний адаптив
• елемент, що зник
• поломки після оновлення браузера, CSS або сторонніх бібліотек
• неправильний стан компонентів (кнопки, вікна, списки тощо)

---

#Де застосовують

• веб-UI
• мобільні застосунки
• дизайн-системи
• компоненти в Storybook
• складні візуальні інтерфейси (дашборди, таблиці)

---

#Плюси

• ловить візуальні баги, які людина може не помітити
• автоматизує перевірку зовнішнього вигляду
• зменшує обсяг ручного тестування інтерфейсу

#Мінуси

• тести можуть бути крихкими (дрібні візуальні зміни ламають результат)
• великі дифи іноді складно аналізувати
• вимагає акуратного ведення baseline-скриншотів

---

#Головна ідея

Скриншотне UI-тестування перевіряє не поведінку, а зовнішній вигляд. Це захист від несподіваних візуальних змін, щоб інтерфейс виглядав саме так, як було задумано.