45 тест-кейсов

Типографика

Типографика — невидимая ткань, которая держит весь контент интерфейса: заголовки, абзацы, кнопки, подписи полей форм, сообщения о состоянии. Типографическая регрессия редко выливается в краш, но ухудшает читабельность, ломает визуальную иерархию и заставляет терять часы на разбор инцидентных отчётов от пользователей. На бизнес-дашборде заголовок, перешедший на две строки, сдвигает все индикаторы ниже; в карточке товара изменение насыщенности у подписи цены может намекнуть на акцию, которой нет. Типичные причины известны: обновление npm-зависимости, ломающее импорт веб-шрифта, смена переменной --font-family в дизайн-системе, изменение глобального line-height ради одной страницы, внедрение text-wrap balance, перекомпонующего строки, или банальное отсутствие fallback для кастомного семейства шрифтов. Расхождения font-weight между 600 и 700 от спринта к спринту остаются классическим источником типографического дрейфа, особенно когда несколько разработчиков работают без строгой хартии. Delta-QA встраивает эти задачи в логику сравнения: инструмент не просто проверяет наличие текста, он сравнивает рендеринг попиксельно и обнаруживает любое изменение насыщенности, межбуквенного интервала, высоты строки или fallback шрифта. Эталонные скриншоты служат стабильным типографическим baseline, и каждый новый запуск визуального тестирования выявляет смещения текста, заголовки, перескакивающие на новую строку, переполнения и вариации веса между версиями. Такой подход даёт командам QA возможность валидировать переработку дизайн-системы или обновление фреймворка через сравнение страниц, не перечитывая вручную каждый экран и без рисков скрытой визуальной регрессии.

Что мы обнаруживаем

1

Изменения семейства шрифтов

Обнаруживает, когда отображается резервный шрифт вместо основного, или когда меняются объявления font-family.

2

Вес и стиль

Фиксирует вариации веса (400 vs 500, bold vs semibold) и изменения стиля (italic, oblique).

3

Размер и масштабирование

Отслеживает изменения font-size в px, rem, em и единицах viewport, включая clamp() и fluid-типографику.

4

Высота строки и вертикальный ритм

Мониторит настройки line-height, которые могут нарушить вертикальный ритм и общий поток страницы.

5

Межбуквенное и межсловное расстояние

Обнаруживает изменения letter-spacing и word-spacing, влияющие на плотность и читабельность текста.

6

Декорация и трансформация

Определяет изменения подчёркиваний, зачёркиваний, text-transform и поведения text-overflow.

Живой пример

Посмотрите, что именно обнаруживает Delta-QA. Сравните две версии бок о бок.

До
После

Реальные сценарии

🎯

Шрифт, который перестал загружаться

Разработчик запускает npm update и, сам того не зная, ломает импорт шрифта Inter. Браузер молча переключается на Arial. Межбуквенные интервалы меняются, некоторые заголовки переносятся на две строки, кнопка вылезает за пределы контейнера — вся вёрстка незаметно съезжает. Изменение казалось безобидным (обновление зависимостей), его смержили без визуальной проверки. Delta-QA сравнивает скриншоты двух версий и выделяет каждый сдвиг текста, каждый перенос заголовка и каждый выход за границы, вызванный сменой шрифта.

⚠️

line-height, который ломает карточки товаров

Разработчик меняет глобальный line-height для улучшения читаемости блога. Побочный эффект: заголовки товаров, которые помещались в одну строку, переносятся на две. Карточки теряют одинаковую высоту, сетка становится неровной — каталог выглядит «кривым» и вызывает меньше доверия. QA проверил блог (изменённую страницу), но не каталог, который использует те же глобальные стили. Delta-QA сравнивает скриншоты и выделяет каждую карточку, высота которой изменилась — сбои в сетке видны сразу.

💡

Незаметный font-weight

Дизайнер задал font-weight semi-bold (600) для заголовков. Со временем разные разработчики используют то 600, то 700. Результат: одни заголовки заметно жирнее других на одной и той же странице. Визуальная иерархия непоследовательна — один заголовок секции кажется важнее другого без всякой причины. Дизайнера не уведомляли об этих постепенных изменениях. Delta-QA сравнивает скриншоты и выделяет различия в толщине заголовков — более жирные заголовки видны при наложении.

Готовы ловить каждую визуальную регрессию?

Скачайте Delta-QA и начните обнаруживать CSS-изменения на ваших веб-страницах — без кода.