Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які інструменти використовуються для візуального тестування?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Для візуального тестування** використовують інструменти, які автоматично роблять скриншоти інтерфейсу, зберігають «еталон», порівнюють з ним нові зміни і показують дифф за відмінностей. **Ключове:** є три групи рішень: open-source (BackstopJS, Jest Image Snapshot), інструменти браузерної автоматизації (Playwright, Puppeteer, Cypress) і хмарні платформи enterprise-рівня (Percy, Applitools, Chromatic).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняДля візуального тестування використовують інструменти, які вміють автоматично **робити скриншоти інтерфейсу, зберігати «еталон», порівнювати з ним нові зміни і показувати дифф, якщо з'явилися відмінності**. На практиці застосовують кілька груп рішень, від локальних open-source до хмарних сервісів. --- ### **1) Інструменти для знімків і порівняння (open-source)** | Інструмент | Особливість | | --- | --- | | **Jest Image Snapshot** | розширення для Jest, порівняння скриншотів піксель-у-піксель | | **BackstopJS** | популярний візуальний регресійний тестер, працює через Puppeteer/Playwright | | **Reg-Suit** | робить візуальні дифи й інтегрується з CI/CD | | **Percy CLI (OSS-частина)** | рушій Percy, можна використовувати локально | Використовуються, коли потрібен повний контроль і локальна інфраструктура. --- ### **2) Інструменти для браузерної автоматизації (самі по собі + скриншоти)** | Інструмент | Що робить | | --- | --- | | **Playwright** | може рендерити сторінки, робити скриншоти і порівнювати їх | | **Puppeteer** | робить скриншоти в headless-Chrome, підходить як основа візуальних тестів | | **Cypress** | E2E-тести + можливість візуальних знімків через плагіни | Задають сценарій (наприклад, «перейди на сторінку → натисни кнопку → зроби знімок»). --- ### **3) Хмарні платформи (enterprise-рівень)** | Інструмент | Сильна сторона | | --- | --- | | **Percy (BrowserStack)** | зберігання baseline, розумні дифи, чудова інтеграція з CI | | **Applitools Eyes** | AI-візуальне порівняння (не лише піксель-у-піксель) | | **Chromatic (для Storybook)** | ідеальний для компонентних бібліотек і дизайн-систем | Ці сервіси особливо корисні у великих проєктах і командах. --- ### **Підсумок за категоріями** | Тип | Коли підходить | | --- | --- | | **Open-source (BackstopJS, Jest Image Snapshot)** | для локального контролю, малих і середніх проєктів | | **Playwright / Cypress** | коли вже є E2E-тести і потрібен візуальний шар | | **Percy / Applitools / Chromatic** | для великих проєктів і CI-процесів із командною розробкою |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.