UI-тестирование, или тестирование пользовательского интерфейса (User Interface), проверяет, как продукт выглядит и ощущается для пользователя. Это важно, потому что именно через интерфейс люди взаимодействуют с программой. Если интерфейс неудобен, непонятен или некрасив, даже самый полезный продукт может остаться без внимания.
В отличие от функционального тестирования, которое проверяет что делает система, UI-тестирование смотрит на как она это делает — с точки зрения внешнего вида и удобства.
Что проверяет UI-тестирование?
UI-тестирование охватывает много аспектов:
- Визуальные элементы: Проверьте, правильно ли отображаются кнопки, поля ввода, изображения, шрифты, цвета, иконки. Например, кнопка должна быть видна, текст на ней читаем, а иконка соответствовать своему назначению.
- Расположение элементов: Убедитесь, что элементы расположены логично и не перекрывают друг друга. Например, поля для имени, почты и пароля в форме регистрации должны идти в понятном порядке.
- Соответствие макетам и дизайн-системам: Интерфейс должен выглядеть точно так, как задумали дизайнеры. Часто для этого используют макеты (Figma, Sketch) или гайдлайны (дизайн-системы).
- Адаптивность и кроссбраузерность/кроссплатформенность: Интерфейс должен корректно отображаться на разных устройствах (компьютеры, планшеты, смартфоны) и в разных браузерах (Chrome, Firefox, Safari, Яндекс.Браузер) или операционных системах (Windows, macOS, Android, iOS).
- Удобство использования (Usability): Хотя это отдельная область, UI-тестирование часто включает проверку базового удобства: понятны ли действия, легко ли найти нужную функцию, нет ли лишних шагов.
Важно: UI-тестирование — это не только про "красиво", но и про "удобно" и "функционально". Неработающая кнопка — это дефект функционала, но если она выглядит криво или текст на ней обрезан — это дефект UI.
Частые ошибки в UI
При UI-тестировании часто встречаются такие ошибки:
-
Визуальные дефекты:
- Неправильные шрифты или размеры: Текст слишком мелкий, крупный, или используется не тот шрифт.
- Несоответствие цветов: Элементы имеют неправильный цвет.
- Искажение изображений: Картинки растянуты, сжаты, пикселизированы или не загружаются.
- Наложение элементов: Один элемент перекрывает другой.
- Неправильные отступы: Элементы расположены слишком близко или слишком далеко.
- "Поехавшая" вёрстка: Элементы смещаются при изменении размера окна или на разных устройствах.
-
Проблемы с интерактивными элементами:
- Неправильное состояние: Кнопка должна быть неактивна, но активна; поле ввода должно быть пустым, но содержит текст.
- Нет визуальной обратной связи: При наведении курсора на кнопку она не меняет цвет, или при клике на ссылку нет индикации загрузки.
- Некорректное отображение плейсхолдеров: Текст-подсказка в поле ввода отображается неправильно или исчезает слишком рано.
-
Локализационные ошибки (для многоязычных приложений):
- Обрезание текста: Переведённый текст не помещается в отведённое место.
- Неправильные форматы: Неверное отображение дат, валют, чисел для разных регионов.
Пример: Тестируем форму регистрации
Представьте, что вы тестируете форму регистрации на сайте. Что вы проверите с точки зрения UI?
- Визуально:
- Все поля ввода, кнопки, заголовки и текст расположены ровно, не наезжают друг на друга.
- Шрифты и цвета соответствуют дизайну.
- Иконки (например, для показа/скрытия пароля) отображаются корректно.
- Форма выглядит хорошо на разных разрешениях экрана (например, на телефоне и на компьютере).
- Интерактивность:
- При наведении курсора на кнопку "Зарегистрироваться" она меняет цвет.
- При клике на поле ввода оно подсвечивается.
- Плейсхолдеры (
Введите ваше имя,Ваш email) отображаются и исчезают при вводе текста. - Сообщения об ошибках (например, "Неверный формат email") появляются в нужном месте, не перекрывая другие элементы, и имеют читаемый вид.
Практический совет: Всегда держите перед глазами макеты или дизайн-гайды, если они есть. Это ваш основной инструмент для UI-тестирования. Если макетов нет, ориентируйтесь на здравый смысл и общие принципы удобства.
Понимание особенностей UI-тестирования и знание типичных ошибок поможет вам эффективнее находить дефекты. Но как именно их искать, используя конкретные техники? Об этом мы поговорим в следующих разделах, где рассмотрим, как применять техники тест-дизайна для быстрого поиска багов.