1. Почему layout-дефекты проходят обычные тесты Компонент может отрендериться без ошибок, кнопка может оставаться кликабельной, а данные — корректными. При этом CSS Grid способен поместить текст в колонку шириной 40 пикселей или скрыть все рабочие панели на конкретном breakpoint.
Поэтому функциональный тест сам по себе не доказывает качество интерфейса.
2. Geometry contracts Для критических поверхностей полезно проверять измеримые свойства: - сколько колонок реально вычислил браузер; - какую долю строки занимает контент; - присутствует ли horizontal overflow; - видима ли ожидаемая панель; - не перекрывает ли fixed navigation нижний контент.
Такие проверки устойчивее субъективного сравнения изображений и хорошо ловят ошибки CSS specificity.
3. Матрица breakpoint-ов Нельзя тестировать только desktop и один mobile viewport. Практическая матрица должна включать пограничные размеры: 1920, 1440, 1280, 1024, tablet 834 и mobile 390/320.
Особенно важны точки прямо до и после media-query: именно там часто возникает breakpoint cliff, когда трехколоночный layout включается слишком рано.
4. Проверка уже развернутой версии Даже идеальный локальный browser-test не заменяет smoke развернутой среды. После staging или production deployment стоит открыть реальный контейнер и повторить geometry assertions на опубликованной версии.
Так проверяется не только исходный код, но и фактический артефакт, CSS cascade и конфигурация runtime.