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

Обновлено: 20.05.2024

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

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

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

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

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

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

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

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

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

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

Чек-боксы

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

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

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

Поп-ап

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

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

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

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

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

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

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

UI / UX стал намного более важным в последнее десятилетие. По мере того, как число конкурентов в нашей нише увеличивается, мы должны следить за тем, чтобы наши пользователи оставались на шаг впереди и предоставляли нашим пользователям наилучший пользовательский опыт. Кроме того, поскольку веб-приложение поставляется с рядом функций, которые иногда могут быть довольно сложными. Вот почему становится жизненно важным сделать этот процесс более плавным и интуитивно понятным для пользователя. В противном случае они могут просто оставить ваше приложение разочарованным сложностью. Вот почему пользовательский интерфейс стал таким жизненно важным, и поэтому тестирование пользовательского интерфейса!

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

Итак, что такое UI Testing?

Тестирование пользовательского интерфейса или тестирование пользовательского интерфейса — это тип тестирования, при котором мы проверяем, работает ли пользовательский интерфейс для веб-приложения нормально или имеет какой-либо дефект, который препятствует поведению пользователя и не соответствует установленным требованиям. Например, для тестирования пользовательского интерфейса мы можем выполнить тест для текстового поля, которое будет принимать ввод от пользователя или раскрывающийся список, который скользит вниз, когда на него наведена мышь.

Очень важно знать, как пользователь будет взаимодействовать между пользователем и веб-сайтом, чтобы выполнить тестирование пользовательского интерфейса. Другими словами, выполняя тестирование пользовательского интерфейса, тестировщик пытается имитировать поведение пользователя, чтобы увидеть, как пользователь будет взаимодействовать с веб-сайтом, и посмотреть, работает ли веб-сайт так, как ожидается, и нет ли недостатков. Небольшой недостаток пользовательского интерфейса, такой как проблема в кнопке CTA, может привести к тому, что посетитель вашего веб-сайта не сможет заполнить ведущую форму, тем самым никогда не конвертировавшись. Кто знает, если бы это был пользователь, который, наконец, повысил бы вашу рентабельность инвестиций.

Веб-сайт состоит из множества различных веб-элементов из CSS, JavaScript и многих других языков. Тестирование пользовательского интерфейса захватывает эти элементы и выполняет тесты и утверждения на них. Основное внимание уделяется структурной и визуальной части веб-сайта, поскольку именно это касается пользователя, а не того, как данные хранятся в базе данных. Поскольку тестирование пользовательского интерфейса охватывает интерактивную часть пользователя, а элемент веб-сайта может быть подключен к экрану, клавиатуре, мыши или любому другому компоненту, который пользователь использует для взаимодействия с веб-сайтом, это в конечном итоге подпадает под тестирование пользовательского интерфейса.

Следующий тестовый сценарий поможет вам понять компонент, который важен для тестирования пользовательского интерфейса. В этом тестовом сценарии я пытаюсь забронировать 3 билета на фильм на популярном веб-сайте BookMyShow для бронирования билетов в кино и на мероприятия. Когда я выбираю место E-13, он автоматически выбирает 3 места следующим образом:

Их отбирают постоянно, и это здорово, так как большинство людей, бронирующих билеты, будут сидеть вместе. Теперь, если я выберу F-23 вместо E-13, посмотрим, что произойдет.

Обратите внимание, что E-13 автоматически отменяется, поскольку приложение ожидает, что люди захотят сидеть вместе, и следующий выбор будет F-22.

Когда я выберу E-13 в качестве следующего места, приложение выберет только это место. Это серьезная проблема, поскольку приложение может автоматически выбирать E-13,14,15 после выбора E-13, как на первом этапе.

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

Тестирование пользовательского интерфейса — это то же самое, что тестирование графического интерфейса?

GUI (графический пользовательский интерфейс) и UI (пользовательский интерфейс) часто рассматриваются как два похожих понятия в мире внешнего тестирования. Но на более глубоком уровне их нет. Тестирование пользовательского интерфейса представляет собой более широкую область, и тестирование пользовательского интерфейса можно рассматривать как подмножество тестирования пользовательского интерфейса. Тестирование GUI включает в себя тестирование графических интерфейсов, таких как цвет элементов, функционирование элементов, видимых для пользователя, и т. Д. В то время как тестирование UI также включает неграфическую часть интерфейсов, таких как средство чтения командной строки или что-либо через который пользователь будет взаимодействовать с GUI. Причина, по которой тестирование пользовательского интерфейса и тестирование GUI рассматриваются как сходные, заключается в том, что многие из компонентов тестирования пользовательского интерфейса используются реже. Таким образом, все, что сегодня используется в области тестирования пользовательского интерфейса, в основном является тестированием графического интерфейса.

Ручной или автоматический, какой путь?

Как и любой другой тип тестирования, тестирование пользовательского интерфейса также может выполняться либо вручную, либо с помощью автоматизации. Ручное тестирование требует, чтобы тестер выполнил каждый тест вручную на каждом элементе. Например, тестирование поля ввода потребовало бы вводить разные значения снова и снова для любых расхождений. На первый взгляд может показаться, что если в пользовательском интерфейсе веб-сайта меньше компонентов, лучше пройти тестирование пользовательского интерфейса вручную, что будет легко и быстро. Хотя это правильно и должно быть сделано для более простого и простого веб-сайта, оно не должно быть подходом для сложных. Современные веб-сайты с богатым пользовательским интерфейсом делают ручное тестирование пользовательского интерфейса довольно неэффективным, трудоемким и подверженным ошибкам. Представьте, сколько раз вам придется вводить значения вручную, если на входе есть пять полей ввода и пять выпадающих списков. Это безумно высоко

UI (user interface — пользовательский интерфейс) — является точкой взаимодействия человека и продукта. Дизайн кнопок, полей ввода и т.д. — это место, где пользователь взаимодействует с системой. Таким образом, Вы можете сравнить UI с рулем, педалями и приборной панелью автомобиля. Они используются для управления автомобилем так же, как приложение использует UI (пользовательский интерфейс) для управления системой. Короче говоря, дизайн пользовательского интерфейса (UI) — это дизайн точек взаимодействия, через которые пользователь может взаимодействовать с системой.

Тестирование интерфейса пользователя осуществляется вместе со следующими видами тестирования (UI):

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

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

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

Более детально ознакомиться с элементами графического интерфейса можно здесь.

Основные проверки при тестировании UI:

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

При проектировке качественного UI уделяется внимание не только внешнему виду интерфейса, но и его логической структуре, чтобы пользователь мог без лишних усилий, быстро и легко взаимодействовать с ним и добиваться необходимого результата. Но, чтобы четко понимать, как создать качественный пользовательский интерфейс для конкретного продукта, необходимо изучать поведение, эмоции и реакцию пользователей при взаимодействии с данным продуктом, проводить тестирование, собирать данные. Человек, взаимодействуя с какой-либо системой, испытывает ощущения и реагирует определенным образом в процессе ее использования. Это называется опытом взаимодействия, или UX.

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

Ощущение, что мы получаем, когда едим бутерброд, можно считать UX, а ингредиенты сэндвича ассоциируются с UI

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

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

Процесс проектирования UX включает в себя исследование поведенческих паттернов и психологических реакций пользователей, разработку информационной архитектуры, дизайн взаимодействия (interaction design), дизайн пользовательского интерфейса, интерактивное прототипирование макета (interactive prototyping) и тестирование юзабилити (usability testing).

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

А вот дизайнеры пользовательского опыта должны дополнительно еще и разбираться в исследованиях целевого рынка, information architecture и дизайне взаимодействий (что автоматически подразумевает базовое знание поведенческой психологии) и т. д.

Юзабилити (usability) –дословно с английского означает: возможность использования или полезность. Юзабилити — это больше мера дружелюбности сайта или интерфейса программы, поскольку оно помогает сделать сайт понятным и естественным для пользователя.

Тестирование удобства пользования (Usability Testing) — это метод тестирования, направленный на установление степени удобства использования, обучаемости, понятности и привлекательности для пользователей разрабатываемого продукта в контексте заданных условий.

Можно выделить этапы тестирования удобства использования пользовательского интерфейса:

1.Исследовательское — проводится после формулирования требований и спецификаций к системе, а также после разработки прототипа интерфейса. Основная цель на этом этапе — выяснить, позволяет ли он с достаточной степенью эффективности решать задачи пользователя.

2. Оценочное — проводится после разработки низкоуровневых требований и детализированного прототипа пользовательского интерфейса. Оценочное тестирование углубляет исследовательское и имеет ту же цель. На данном этапе уже проводятся количественные измерения характеристик пользовательского интерфейса: измеряются количество обращений к системе помощи по отношению к количеству совершенных операций, количество ошибочных операций, время устранения последствий ошибочных операций и т.п.

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

4. Сравнительное— данный вид тестирования может проводиться на любом этапе разработки интерфейса. В ходе сравнительного тестирования сравниваются два или более вариантов реализации пользовательского интерфейса.

Из этого следует, что UI-тестирование, предполагает под собой тестирование на основании требований к внешнему виду пользовательского интерфейса и формам взаимодействия с пользователем. На какие требования стоит обращать внимание при UI-тестировании:

Что такое GUI?

Есть два типа интерфейсов для компьютерных приложений.

Интерфейс командной строки, где вы набираете текст и компьютер ответчик к этой команде.

GUI означает графический интерфейс пользователя, где вы взаимодействуете с компьютером, используя изображения, а не текст.

Ниже приведены GUI элементы, которые могут быть использованы для взаимодействия между пользователем и приложением:

GUI тестирование, является проверкой указанных элементов[1].

Что такое GUI тестирование?

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

GUI это то, что видит пользователь. Пользователь не видит исходный код. Интерфейс виден пользователю. Особенно акцент делается на дизайн структуры, образы, которые они работают должным образом или нет.

В приведенном выше примере, если мы должны сделать тестирование GUI, сначала убедитесь, что изображения должны быть полностью видны в разных браузерах.

Кроме того, ссылки доступны, и кнопка должна работать при нажатии.

Кроме того, если пользователь изменил размер экрана, ни изображения, ни содержание должно сокращаться или кадрирования или перекрытия.

Необходимость тестирования графического интерфейса пользователя

Теперь, основная концепция тестирования GUI ясно. Несколько вопросов:

 Почему тестирование GUI?

 Действительно ли это необходимо?

 Достаточно ли тестирование функциональности и логики приложения?

Чтобы получить ответ, думайте как пользователь, а не в качестве тестера. Это пользовательский интерфейс приложения, который решил, что пользователь будет использовать приложение дальше или нет.

Обычный пользователь сначала наблюдает за дизайном и внешностью приложения / программного обеспечения и насколько легко понять его интерфейс. Если пользователь не чувствует себя комфортно с интерфейсом приложений или найти сложно понять, что он никогда не будет использовать это приложение еще раз. Вот почему, графический интерфейс является предметом для беспокойства, и надлежащее тестирование должно проводиться для того, чтобы убедиться, что GUI свободен от ошибок.

Что вы проверяете в GUI тестирования?

Следующий перечень обеспечит детальное тестирование GUI.

 Проверьте все элементы GUI для размера, положения, ширины, длины и акцепта символов или цифр. Например, вы должны быть в состоянии внести свой вклад в соответствующие поля ввода.

 Убедитесь, что вы можете выполнить намеченную функциональность приложения с помощью графического интерфейса

 Проверьте, четкое разграничение различных участков на экране

 Проверьте шрифт, используемый в приложении для чтения

 Проверьте выравнивание текста собственно

 Убедитесь, что изображения имеют хорошую прозрачность

 Убедитесь, что изображения правильно выровнены

 Проверьте расположение элементов графического интерфейса для различного разрешения экрана.

Подход тестирования графического интерфейса пользователя

тестирование графического интерфейса пользователя может быть сделано с помощью трех способов:

Ручное тестирование

При таком подходе графические экраны проверяются вручную тестерами в соответствии с требованиями, указанными в документе бизнес-требований.

Запись и воспроизведение

Тестирование GUI можно выполнить с помощью инструментов автоматизации. Это делается в 2 частях. Во время записи шаги теста записываются инструментом автоматизации. Во время воспроизведения записанные этапы тестирования выполняются в тестовом приложении.

Модель на основе тестирования

Модель представляет собой графическое описание поведения системы. Это поможет нам понять и предсказать поведение системы. Модели помогают в поколении эффективных тестов с использованием требований к системе. Эти потребности должны быть рассмотрены для этого тестирования на основе модели:

 Определить исходные данные для модели

 Рассчитать ожидаемый выход для модели

 Сравните фактический выход с ожидаемым выходом

 Решение о дальнейших действиях по модели

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

Проблемы в тестировании GUI

Самой распространенной проблемой приходят при этом регрессионного тестирования является то, что GUI приложения часто меняется. Это очень трудно проверить и определить, является ли это проблемой или аксессуара. Проблема проявляется, когда у вас нет каких-либо документов, касающихся изменений GUI.

Вывод:

Успех программного продукта очень зависит от того, как GUI взаимодействует с пользователем и легкость в использовании его различных функций. Таким образом, тестирование GUI очень важно. Ручное тестирование GUI может быть иногда повторяющимся и скучным. Автоматизация настоятельно рекомендуется для тестирования графического интерфейса пользователя.

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

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

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

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

Итак, что такое UI Testing?

Тестирование пользовательского интерфейса — это то же самое, что тестирование графического интерфейса?

Ручной или автоматический, какой путь?

Похожие статьи

Игровой интерфейс и управление игрой | Статья в журнале.

Пользовательский интерфейс | Статья в журнале.

Графический интерфейс пользователя — это обширная тема.

Анализ и сравнение методов контроля при проведении.

Разработка модуля формирования документов студенческой.

INTERFACE — использование интерфейсов; - IMPLEMENTS.

Работа с элементами GUI на примере приложения.

Разработка программного приложения визуализации упражнений.

Применение возможностей Python для автоматизации.

Похожие статьи

Игровой интерфейс и управление игрой | Статья в журнале.

Пользовательский интерфейс | Статья в журнале.

Графический интерфейс пользователя — это обширная тема.

Анализ и сравнение методов контроля при проведении.

Разработка модуля формирования документов студенческой.

INTERFACE — использование интерфейсов; - IMPLEMENTS.

Работа с элементами GUI на примере приложения.

Разработка программного приложения визуализации упражнений.

Применение возможностей Python для автоматизации.