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

14 статей

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

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

Регрессионное тестирование и White-Label: как тестировать N тем и не сойти с ума
автор Gulben BINGOL

Регрессионное тестирование и White-Label: как тестировать N тем и не сойти с ума

White-label умножает темы по клиентам, брейкпоинтам и языкам. Только автоматизированное регрессионное тестирование позволяет добавить тему без QA-долга.

Читать далее →
Регрессионное тестирование и Tailwind CSS: почему utility-first подход требует визуальной проверки
автор Gulben BINGOL

Регрессионное тестирование и Tailwind CSS: почему utility-first подход требует визуальной проверки

Tailwind CSS делает CSS предсказуемым в теории. На практике изменение в tailwind.config.js может сломать сайт. Регрессионное тестирование — ваша страховка.

Читать далее →
Регрессионное тестирование responsive mobile: почему адаптивный дизайн больше не достаточен
автор Gulben BINGOL

Регрессионное тестирование responsive mobile: почему адаптивный дизайн больше не достаточен

60% веб-трафика приходится на мобильные устройства. Классическое responsive-тестирование не обнаруживает вырезы, панели и touch targets.

Читать далее →
Регрессионное тестирование multi-tenant: когда у каждого клиента свой рендеринг
автор Malloum LAYA

Регрессионное тестирование multi-tenant: когда у каждого клиента свой рендеринг

Multi-tenant SaaS: у каждого клиента свой брендинг. Как тестировать всех тенантов на регрессии, не взрывая QA-бюджет. Полное руководство.

Читать далее →
Визуальное тестирование и изображения Retina: если вы не тестируете в HiDPI, вы не видите то, что видят ваши пользователи
автор Gulben BINGOL

Визуальное тестирование и изображения Retina: если вы не тестируете в HiDPI, вы не видите то, что видят ваши пользователи

Экраны Retina и HiDPI: как обнаружить изображения, поставляемые в 1x, которые выглядят размытыми на дисплеях 2x и 3x у ваших пользователей.

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

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

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

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

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

CSS-регрессия — непреднамеренное изменение внешнего вида после правки кода. Почему она невидима в текстовом diff и как её эффективно обнаружить.

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

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

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

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

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

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

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