CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
Порівнюйте візуальні зміни до та після оновлення веб-сторінок з детальними звітами та DOM-аналізом.
Image from store
Description from store
Втомилися після кожної правки коду вручну шукати «схиблені» пікселі?
UI Testing Inspector — 100 % локальний інспектор візуальних відмінностей із DOM-аналізом, що за секунди знаходить зміни.
Чому варто спробувати?
⚡ 100 % локально й приватно — усі скріншоти й дані порівняння лишаються в браузері; жодних серверів і збору даних
⚡ Миттєвий цикл фідбеку — зніміть Baseline, змінюйте код і одразу дивіться різницю; ідеально для швидких regression-тестів
⚡ Піксель-ідеальне виявлення — фіксує навіть ті зміни, що зісковзують з уваги людини
Основні можливості
🔸 Baseline в один клік — «стан До» будь-якої сторінки миттєво
🔸 Pixel Perfect Diff — звіт Before / After / Diff у єдиному вигляді
🔸 Inspect Element — показує, які саме атрибути DOM та CSS змінились
🔸 Viewport ↔ Full-page Capture — фіксуйте лише видиму частину чи всю сторінку
🔸 Історія звітів — зберігає до 14–15 попередніх порівнянь
🔸 Світла й темна тема — комфортне тестування вдень і вночі
Всередині детального звіту
✔️ Підсумок — % відмінностей + лічильник доданих/видалених/змінених елементів
✔️ Side-by-Side — порівняння Before, After та Diff-знімка поруч
✔️ DOM & CSS Change List — кольори, шрифти, відступи та інше у вигляді чіткого списку
Що ви спіймаєте
➤ Зміщення макета та вирівнювання
➤ Зміни кольорів і стилів
➤ Відсутні або переміщені елементи
➤ Модифікації шрифтів і тексту
➤ Відмінності зображень
Як це працює
1️⃣ Перейдіть на потрібну сторінку та натисніть «Set Baseline»
2️⃣ Внесіть правки в CSS/HTML/контент
3️⃣ Клацніть «Compare with Baseline» й отримайте детальний звіт у новій вкладці
4️⃣ Аналізуйте Side-by-Side та Change List, щоб знайти кожну відмінність
5️⃣ Задоволені новим виглядом? Збережіть його як новий Baseline
Поради Pro
✨Чекайте повного завантаження сторінки перед зніманням Baseline
✨Для комплексних тестів використовуйте Full-page Capture
✨Робіть скріншоти з однаковим розміром вікна браузера
✨Фіксуйте Baseline, коли контент стабільний
✨Тестуйте по одній зміні — так відмінності видно чіткіше
✨Перед великим refactor збережіть критичні Baselines
Сценарії використання
✅Візуальне Regression-тестування
✅Перевірка UI/дизайну
✅Безпечний CSS-refactor
✅Frontend-workflow з миттєвим фідбеком
Для кого
➡️ Фронтенд-розробники
➡️ QA-інженери
➡️ UI/UX-дизайнери
➡️ фрилансери й малі команди
Чим вирізняється
🖼️ Забудьте про ручне сортування скріншотів
📝 Крива навчання ≈ 0
FAQ
❓ Як виявляються зміни?
💬 Подвійний підхід: порівняння піксель-до-пікселя + структурний скан DOM/CSS.
❓ Дані точно безпечні?
💬 Так, усе обробляється та зберігається тільки локально у вашому браузері.
❓ Працює на localhost?
💬 Авжеж, під час локальної розробки функціонує бездоганно.
❓ А динамічний контент?
💬 Інструмент розраховано на статичні стани; фіксуйте скріншоти, коли анімації завершено, а банери стабільні.
Latest reviews
- (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.