Тестирование пользовательского интерфейса
Тестирование пользовательского интерфейса. Графический интерфейс пользователя (Graphical user interface, GUI) –разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.
Проверяется в целом общий вид приложения и в отдельности формы, расположенные на странице.
Общие проверки:
- Вид элементов при уменьшении окна браузера + появление скрола
- Правильность написания текста + текст должен быть выровнен
- Правильность перемещения фокуса в окне (Tab / Tab+Shift)
- Выбранные элементы выделяются
- Неизменяемые поля выглядят одинаково и отличаются от редактируемых
- Желательно не использовать двойной клик
- Проверка наличия нужных нотификейшенов
- Унификация дизайна (цвет, шрифт, размер)
- При необходимости должны быть тултипы
- Изменение вида элемента при ховере на него
- Если формы дублируются, то должны быть одинаковые названия
Дополнительные проверки для веб-форм
Текстовое поле
- Проверить выделение текста с помощью Ctrl+A / Shift+стрелка
- Проверка ввода длинного текста
Радио-баттон
- Расположение возле соответствующего текста
- Переключение кнопок с помощью клавиатуры
Чек-боксы
- Установить чекбокс кликом и пробелом
- Расположение возле соответствующего текста
Выпадающие списки
- Должна быть функция прокрутки
- Должны располагаться по алфавиту (если текст), по возрастанию (если числовые значения)
- Если элемент был выбран, то должен находиться сверху либо обозначен, что он выбран
Поп-ап
- Расположение по центру окна
GUI (Graphical User Interface) Testing — тестирование графического пользовательского интерфейса. Графический пользовательский интерфейс — это интерфейс, в котором пользователь взаимодействует с компьютером, используя графические изображения .
Основные элементы графического интерфейса:
- окно (окно браузера, диалоговое окно, модальное окно, плавающее окно)
- меню (главное, всплывающее, контекстное, системное)
- виджеты/элементы управления/контролы (аккордеон, кнопка, радио-кнопка, чек-бокс, значок (иконка), список, панель инструментов, дерево, полоса прокрутки, ползунок, строка состояния, тултип (подсказка) и др.)
- вкладка
- элементы взаимодействия: курсор мыши, текстовый курсор, поинтер (“ладошка”), курсор перетаскивания и др.
Основные моменты при проверке GUI:
- расположение, размер, цвет, ширина, длина элементов; возможность ввода букв или цифр
- реализуется ли функционал приложения с помощью графических элементов
- размещение всех сообщений об ошибках, уведомленией (а также шрифт, цвет, размер, расположение и орфография текста)
- читабелен ли использованный шрифт
- переходит ли курсор из текстового в поинтер при наведении на активные элементы, выделяются ли выбранные элементы
- выравнивание текста и форм
- качество изображений
- проверить расположение и отображение всех элементов при различных разрешениях экрана, а также при изменении размера окна браузера (проверить, появляется ли скролл)
- проверить текст на орфографические, пунктуационные ошибки
- появляются ли тултипы (если есть необходимость)
- унификация дизайна (цвета, шрифты, текст сообщений, названия кнопок и т.д.)
Наиболее распространенные баги:
- курсор не переходит в поинтер при наведении на активный элемент
- орфографические и грамматические ошибки
- не ровное расположение полей ввода в формах, самих форм
- неправильное отображение элементов при смене размера окна браузера и масштаба страницы
- изменение размера текста при смене языка
- неровное расположение форм
- разные шрифты
- выбранные элементы не отличаются от не выбранных
Проверка pixel to pixel — проверка точного (пиксель в пикcель) соответствия сверстанного HTML — шаблона оригиналу (PSD-макету). Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпадать. Совместиться должны все элементы картинок — текст, изображения, графические элементы.
