Тёмная тема и визуальное тестирование: почему вам нужно вдвое больше тестов
Тёмная тема удваивает поверхность тестирования: инвертированные цвета, сломанные контрасты, невидимые изображения. Защитите обе темы без удвоения нагрузки.
Читать далее →14 статей
Визуальное обнаружение не сводится к попиксельному сравнению двух изображений. В зависимости от типа искомого дефекта алгоритмы и пороги различаются: тонкий дрейф цвета (плохо разрешённый токен, конвертация sRGB / P3) требует перцептивного сравнения; смещение layout (сломанный flexbox, удвоенный отступ) лучше видно при структурном анализе; проблема с типографикой (загружен шрифт fallback вместо основного) требует особого внимания к субпиксельному рендерингу. И всё снова меняется в режиме responsive или dark mode, где каждый breakpoint умножает поверхность, требующую покрытия.
На этой странице собраны статьи, разбирающие типы обнаруживаемых визуальных регрессий и способы их различения: ложные срабатывания, связанные со сглаживанием шрифтов, настоящие регрессии контраста, незаметные глазу, поломки вёрстки на узком viewport, частичные сбои переключения dark mode, когда некоторые компоненты забывают адаптироваться. Также рассматриваются выборы алгоритмов сравнения (pixel matching, SSIM, перцептивные) с их сильными сторонами и слепыми зонами. Delta-QA опирается на комбинацию этих подходов, чтобы минимизировать шум и оставаться строгим к настоящим регрессиям; эти статьи объясняют принципы, чтобы понимать, что инструмент визуального тестирования может — и не может — надёжно обнаруживать.
Тёмная тема удваивает поверхность тестирования: инвертированные цвета, сломанные контрасты, невидимые изображения. Защитите обе темы без удвоения нагрузки.
Читать далее →Каскад, специфичность, минификация, слишком агрессивный purge: почему CSS ломается после деплоя и как заметить это до продакшена.
Читать далее →Как провести полный визуальный аудит сайта: инвентаризация страниц, baseline, кросс-браузерный, адаптивный, аудит доступности. Пошаговая методология.
Читать далее →Anti-aliasing, анимации, динамический контент: почему pixel diff порождает ложные срабатывания и как детерминированный движок устраняет их в корне.
Читать далее →Сравнивайте две HTML-страницы визуально, бесплатно и без регистрации. Обнаруживайте невидимые в коде различия CSS благодаря реальному рендерингу браузера.
Читать далее →