Тестирование верстки
В процессе тестирования верстки быстро становится понятно: один и тот же интерфейс может выглядеть аккуратно на макете, но разваливаться на практике. Чаще всего это проявляется в длине текста, переносах строк, состояниях элементов и отступах.
В статье Даша, руководитель группы тестирования UI, делится тем, на что обращает внимание при проверке верстки и какие моменты важно проверять в первую очередь.
С чего начинается тестирование верстки?
При тестировании верстки мы сначала наполняем блоки разными текстовыми данными. Это сразу показывает, где интерфейс начинает ломаться. Дальше проверяем:
- максимально короткие значения — точка, пробел;
- максимально длинный текст, который можно ввести;
- соответствие ограничениям из постановки — например, максимально доступно 64 символа.
Почему важно проверять текст с пробелами и без?
Очень частый кейс: текст с пробелами красиво переносится, а без пробелов — вылезает за границы или ломает блок.
Иногда нам кажется, что пользователь так точно не напишет, но ничто не мешает ему назвать кнопку: «дезоксирибонуклеиноваякнопка». Поэтому проверяем с пробелами и без пробелов, а еще смотрим, как ведет себя перенос строк.Для таких проверок удобно использовать максимально широкие буквы:
- для кириллицы — «Щ»;
- для латиницы — «W».
Что нужно проверять в макете?
Например, в макете Figma мы смотрим:
И, конечно, отступы между всеми элементами по вертикали и горизонтали.
Как проверять реализацию?
В браузере используем стандартные DevTools: смотрим вкладку Elements + разделы Styles и Computed.
Что важно знать о состояниях элементов?
Чаще всего это кнопки. В DevTools можно вручную включить состояния:
- :hover
- :active
- :focus
Позволяет увидеть нужный цвет, проверить границы и сравнить с макетом, даже если мышь сейчас не наведена на элемент.
На что еще нужно обращать внимание?
Отступы могут быть реализованы через padding (внутренний) и margin (внешний).
Когда удобно считать руками, а когда — линейкой?
Иногда проще посмотреть padding и margin и сложить их значения. Но если блоки визуально хорошо видны, помогает линейка: измеряем расстояния не только в браузере, но и вообще на экране.
Для текста и иконок лучше ориентироваться на границы блоков и отступы, а не пытаться измерять «на глаз».
