Визуальная детекция — Все статьи и туториалы

14 статей

Визуальное обнаружение не сводится к попиксельному сравнению двух изображений. В зависимости от типа искомого дефекта алгоритмы и пороги различаются: тонкий дрейф цвета (плохо разрешённый токен, конвертация sRGB / P3) требует перцептивного сравнения; смещение layout (сломанный flexbox, удвоенный отступ) лучше видно при структурном анализе; проблема с типографикой (загружен шрифт fallback вместо основного) требует особого внимания к субпиксельному рендерингу. И всё снова меняется в режиме responsive или dark mode, где каждый breakpoint умножает поверхность, требующую покрытия.

На этой странице собраны статьи, разбирающие типы обнаруживаемых визуальных регрессий и способы их различения: ложные срабатывания, связанные со сглаживанием шрифтов, настоящие регрессии контраста, незаметные глазу, поломки вёрстки на узком viewport, частичные сбои переключения dark mode, когда некоторые компоненты забывают адаптироваться. Также рассматриваются выборы алгоритмов сравнения (pixel matching, SSIM, перцептивные) с их сильными сторонами и слепыми зонами. Delta-QA опирается на комбинацию этих подходов, чтобы минимизировать шум и оставаться строгим к настоящим регрессиям; эти статьи объясняют принципы, чтобы понимать, что инструмент визуального тестирования может — и не может — надёжно обнаруживать.

Тёмная тема и визуальное тестирование: почему вам нужно вдвое больше тестов
автор Gulben BINGOL

Тёмная тема и визуальное тестирование: почему вам нужно вдвое больше тестов

Тёмная тема удваивает поверхность тестирования: инвертированные цвета, сломанные контрасты, невидимые изображения. Защитите обе темы без удвоения нагрузки.

Читать далее →
CSS сломался после деплоя: почему это происходит и как этого избежать
автор Farid Boussetta

CSS сломался после деплоя: почему это происходит и как этого избежать

Каскад, специфичность, минификация, слишком агрессивный purge: почему CSS ломается после деплоя и как заметить это до продакшена.

Читать далее →
Автоматизированный визуальный аудит сайта: методическое руководство
автор Yasin AVCI

Автоматизированный визуальный аудит сайта: методическое руководство

Как провести полный визуальный аудит сайта: инвентаризация страниц, baseline, кросс-браузерный, адаптивный, аудит доступности. Пошаговая методология.

Читать далее →
Сократить ложные срабатывания в визуальном тестировании: проблема, которую никто по-настоящему не решает
автор Emre AVCI

Сократить ложные срабатывания в визуальном тестировании: проблема, которую никто по-настоящему не решает

Anti-aliasing, анимации, динамический контент: почему pixel diff порождает ложные срабатывания и как детерминированный движок устраняет их в корне.

Читать далее →
Визуальный сравнитель HTML онлайн: сравните две страницы в браузере
автор Yasin AVCI

Визуальный сравнитель HTML онлайн: сравните две страницы в браузере

Сравнивайте две HTML-страницы визуально, бесплатно и без регистрации. Обнаруживайте невидимые в коде различия CSS благодаря реальному рендерингу браузера.

Читать далее →