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

10 статей

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

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

CSS-анимации и визуальное тестирование: как перестать бороться с ложными срабатываниями
автор Gulben BINGOL

CSS-анимации и визуальное тестирование: как перестать бороться с ложными срабатываниями

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

Читать далее →
Что такое CSS-регрессия? Определение, примеры и руководство по обнаружению
автор Gulben BINGOL

Что такое CSS-регрессия? Определение, примеры и руководство по обнаружению

CSS-регрессия — это непреднамеренное изменение внешнего вида сайта после модификации кода. Узнайте, почему они невидимы в текстовом diff и как их эффективно обнаружить.

Читать далее →
Почему ваш сайт выглядит по-разному в разных браузерах (и как это исправить)
автор Mohamed MCIRDI

Почему ваш сайт выглядит по-разному в разных браузерах (и как это исправить)

Узнайте, почему Chrome, Firefox и Safari отображают ваш сайт по-разному. Движки рендеринга, нестандартный CSS, шрифты: разберитесь в причинах и примените конкретные решения.

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

Ложные срабатывания в визуальном тестировании: почему они убивают ваши тесты и как их устранить

Ложные срабатывания — главная причина отказа от визуального тестирования. Узнайте, почему они возникают (антиалиасинг, шрифты, sub-pixel rendering) и конкретные решения для их устранения.

Читать далее →
Визуальный технический долг: определение, влияние и решения для его погашения
автор Yasin AVCI

Визуальный технический долг: определение, влияние и решения для его погашения

Визуальный технический долг — те CSS-смещения и дизайнерские несоответствия, которые накапливаются спринт за спринтом — незаметно снижает воспринимаемое качество вашего продукта. Узнайте, как визуальное тестирование помогает его обнаружить и погасить.

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

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

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

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

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

CSS работал идеально локально, а в продакшне всё сломалось? Узнайте, почему CSS ломается после деплоя и как автоматизированное [визуальное тестирование](/ru/blog/rukovodstvo-vizualnoe-regressionnoe-testirovanie/) предотвращает этот кошмар.

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

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

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

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

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

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

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