Тестирование пользовательского интерфейса

Тестирование пользовательского интерфейса. Графический интерфейс пользователя (Graphical user interface, GUI) –разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.

Проверяется в целом общий вид приложения и в отдельности формы, расположенные на странице.

Тестирование графического интерфейса
Тестирование графического интерфейса

Общие проверки:

  • Вид элементов при уменьшении окна браузера + появление скрола
  • Правильность написания текста + текст должен быть выровнен
  • Правильность перемещения фокуса в окне (Tab / Tab+Shift)
  • Выбранные элементы выделяются
  • Неизменяемые поля выглядят одинаково и отличаются от редактируемых
  • Желательно не использовать двойной клик
  • Проверка наличия нужных нотификейшенов
  • Унификация дизайна (цвет, шрифт, размер)
  • При необходимости должны быть тултипы
  • Изменение вида элемента при ховере на него
  • Если формы дублируются, то должны быть одинаковые названия

Дополнительные проверки для веб-форм

Текстовое поле

  • Проверить выделение текста с помощью Ctrl+A /  Shift+стрелка
  • Проверка ввода длинного текста

Радио-баттон

  • Расположение возле соответствующего текста
  • Переключение кнопок с помощью клавиатуры

Чек-боксы

  • Установить чекбокс кликом и пробелом
  • Расположение возле соответствующего текста

Выпадающие списки

  • Должна быть функция прокрутки
  • Должны располагаться по алфавиту (если текст), по возрастанию (если числовые значения)
  • Если элемент был выбран, то должен находиться сверху либо обозначен, что он выбран

Поп-ап

  • Расположение по центру окна

GUI (Graphical User Interface) Testing  — тестирование графического пользовательского интерфейса. Графический пользовательский интерфейс — это интерфейс, в котором пользователь взаимодействует с компьютером, используя графические изображения .

 

Основные элементы графического интерфейса:

  • окно (окно браузера, диалоговое окно, модальное окно, плавающее окно)
  • меню (главное, всплывающее, контекстное, системное)
  • виджеты/элементы управления/контролы (аккордеон, кнопка, радио-кнопка, чек-бокс, значок (иконка), список, панель инструментов, дерево, полоса прокрутки, ползунок, строка состояния, тултип (подсказка) и др.)
  • вкладка
  • элементы взаимодействия: курсор мыши, текстовый курсор, поинтер (“ладошка”), курсор перетаскивания и др.

 

Основные моменты при проверке GUI:

 

  • расположение, размер, цвет, ширина, длина элементов; возможность ввода букв или цифр
  • реализуется ли функционал приложения с помощью графических элементов
  • размещение всех сообщений об ошибках, уведомленией (а также шрифт, цвет, размер, расположение и орфография текста)
  • читабелен ли использованный шрифт
  • переходит ли курсор из текстового в поинтер при наведении на активные элементы, выделяются ли выбранные элементы
  • выравнивание текста и форм  
  • качество изображений
  • проверить расположение и отображение всех элементов при различных разрешениях экрана, а также при изменении размера окна браузера (проверить, появляется ли скролл)
  • проверить текст на орфографические, пунктуационные ошибки
  • появляются ли тултипы (если есть необходимость)
  • унификация дизайна (цвета, шрифты, текст сообщений, названия кнопок и т.д.)

 

Наиболее распространенные баги:

 

  • курсор не переходит в поинтер при наведении на активный элемент
  • орфографические и грамматические ошибки
  • не ровное расположение полей ввода в формах, самих форм 
  • неправильное отображение элементов при смене размера окна браузера и масштаба страницы
  • изменение размера текста при смене языка
  • неровное расположение форм
  • разные шрифты
  • выбранные элементы не отличаются от не выбранных

Проверка  pixel to pixel — проверка точного (пиксель в пикcель) соответствия  сверстанного HTML — шаблона оригиналу (PSD-макету). Другими словами, если наложить “картинку” сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпадать. Совместиться должны все элементы картинок — текст, изображения, графические элементы.

Все виды тестирования