В процессе тестирования верстки быстро становится понятно: один и тот же интерфейс может выглядеть аккуратно на макете, но разваливаться на практике. Чаще всего это проявляется в длине текста, переносах строк, состояниях элементов и отступах.
Рассказываем, на что обращаем внимание при проверке верстки и какие моменты проверяем в первую очередь.
1️⃣ С чего начинаем тестирование верстки?
При тестировании верстки мы сначала наполняем блоки разными текстовыми данными. Это сразу показывает, где интерфейс начинает ломаться. Дальше проверяем:
максимально короткие значения — точка, пробел;
максимально длинный текст, который можно ввести;
соответствие ограничениям из постановки — например, максимально доступно 64 символа.
Если ограничений в ТЗ нет, смотрим, какой тип поля используется в базе данных. Часто это varchar(255), от этого и отталкиваемся при проверке.
2️⃣ Почему проверяем текст с пробелами и без?
Очень частый кейс: текст с пробелами красиво переносится, а без пробелов — вылезает за границы или ломает блок.
Иногда нам кажется, что пользователь так точно не напишет, но ничто не мешает ему назвать кнопку: «дезоксирибонуклеиноваякнопка». Поэтому проверяем с пробелами и без пробелов, а еще смотрим, как ведет себя перенос строк.
Для таких проверок удобно использовать максимально широкие буквы:
для кириллицы — «Щ»;
для латиницы — «W».
Это простой способ увидеть помещается ли текст, переносится ли он корректно на следующую строку и не вылезает ли за контейнер.
3️⃣ Что проверяем в макете?
Например, в макете Figma мы смотрим:
И, конечно, отступы между всеми элементами по вертикали и горизонтали.
4️⃣ Как проверяем реализацию?
В браузере используем стандартные DevTools: смотрим вкладку Elements + разделы Styles и Computed.
Computed удобнее — отображаются итоговые значения после применения всех CSS-правил: размер шрифта, высота строки, цвета, отступы.
Так проще напрямую сравнивать реализацию с макетом и не теряться в длинных CSS-цепочках.
5️⃣ Что важно знать о состояниях элементов?
Чаще всего это кнопки. В DevTools можно вручную включить состояния:
:hover
:active
:focus
Позволяет увидеть нужный цвет, проверить границы и сравнить с макетом, даже если мышь сейчас не наведена на элемент.
6️⃣ На что еще обращаем внимание?
Отступы могут быть реализованы через padding (внутренний) и margin (внешний).
Важно помнить, что высота текстового блока определяется line-height. Если высота строки отличается от макета — поплывут и расстояния между элементами, даже если padding и margin заданы верно.
7️⃣ Когда удобно считать руками, а когда — линейкой?
Иногда проще посмотреть padding и margin и сложить их значения. Но если блоки визуально хорошо видны, помогает линейка: измеряем расстояния не только в браузере, но и вообще на экране.
Для текста и иконок лучше ориентироваться на границы блоков и отступы, а не пытаться измерять «на глаз».
При этом в тестировании верстки почти всегда появляется вопрос баланса: где достаточно базовых проверок, а где уже начинается избыточный pixel perfect.
Интересно сравнить подходы: какие проверки верстки вы считаете обязательными в своей практике, а какие — избыточными?
