Тестирование графического интерфейса пользователя: примеры и тестовые случаи для UI-тестирования.

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

Что такое графический интерфейс?

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

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

Тестирование графического интерфейса — это проверка вышеупомянутых элементов.

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

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

Графический интерфейс пользователя (GUI) — это то, что видит пользователь. Зайдите на сайт guru99.com, и на главной странице отобразится графический интерфейс сайта. Исходный код остаётся скрытым; виден только интерфейс. Поэтому тестирование GUI фокусируется на структуре дизайна и на корректности отображения изображений.

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

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

💡 Совет: Перед тем как сообщать о каких-либо дефектах, запустите одну и ту же страницу в разрешениях 1920×1080, 1366×768 и 375×812. Многие сообщения о «нарушениях макета» просто указывают на непроверенные контрольные точки.

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

Теперь основная концепция тестирования графического интерфейса пользователя (GUI) понятна. У вас наверняка возникнут следующие вопросы:

• Зачем проводить тестирование GUI?
• Это действительно необходимо?
• Разве тестирования функциональности и логики приложения недостаточно, и зачем тратить дополнительное время на интерфейс?

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

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

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

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

• Функциональное тестирование графического интерфейса пользователя: Подтверждает, что каждый элемент управления выполняет свои функции. Тесно связан с функциональное тестированиеВ нем запрашивается подтверждение отправки нажатием кнопки, выпадающий список выполняет фильтрацию, а поле принимает корректный ввод.
• Юзабилити-тестирование: Измеряет, насколько легко реальный человек выполняет задачу. Юзабилити-тестирование анализирует глубину навигации, читаемость и то, действительно ли помогают сообщения об ошибках.
• Тестирование совместимости: Повторяет одни и те же экраны во всех браузерах, операционных системах и размерах устройств. Кроссбраузерное тестирование Выявляет ошибки рендеринга, которые проявляются только в одном движке.
• Тестирование доступности: Проверяет навигацию с клавиатуры, метки программ чтения с экрана и цветовой контраст в соответствии со стандартами WCAG. Тестирование доступности В настоящее время это является обязательным требованием на многих рынках, а не дополнительной опцией.
• Визуальное и производительное тестирование: Сравнивает отрендеренные скриншоты с базовым показателем и измеряет скорость отрисовки и отклика интерфейса, а также перекрытие изображений.ping с тестирование производительности.

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

Что вы проверяете при тестировании графического интерфейса пользователя?

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

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

Методы тестирования графического интерфейса

После составления контрольного списка следующим шагом является решение о том, как его реализовать. Методы тестирования графического интерфейса можно разделить на три части:

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

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

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

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

Тестирование на основе модели

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

При проведении тестирования на основе данной модели необходимо учитывать следующее:

• Построить модель
• Определите входные данные для модели
• Рассчитайте ожидаемый результат для модели
• Запустите тесты
• Сравните фактический результат с ожидаемым.
• Решение о дальнейших действиях по модели

Некоторые методы моделирования, на основе которых можно получить тестовые примеры:

• Диаграммы — отображают состояние системы и проверяют состояние после некоторых входных данных.
• Таблицы решений – таблицы, используемые для определения результатов для каждого примененного входного сигнала.

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

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

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

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

фактор	Ручное тестирование графического интерфейса пользователя	Автоматизированное тестирование графического интерфейса пользователя
лучше всего для	Новые экраны, предварительные проверки, внешний вид и пользовательский интерфейс.	Стабильные наборы регрессионных тестов, кроссбраузерные запуски.
Скорость за цикл	Медленная работа, ограниченная временем, затраченным на тестирование.	Быстро работает без присмотра всю ночь.
Первоначальная стоимость	Низкий	Высокий уровень (настройка скриптов и фреймворка)
Обслуживание	Ничего, кроме обновления контрольного списка.	Это имеет значение при изменении интерфейса.
Выявляет субъективные проблемы	Да	Нет

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

Тестирование GUI в основном включает в себя

1. Тестирование размера, положения, ширины, высоты элементов.
2. Тестирование отображаемых сообщений об ошибках.
3. Тестирование разных участков экрана.
4. Тестирование шрифта на читаемость или нет.
5. Тестирование экрана в разных разрешениях с помощью увеличения и уменьшения масштаба, например 640х480, 600х800 и т.д.
6. Проверка выравнивания текстов и других элементов, таких как значки, кнопки и т. д., находятся ли они на своих местах или нет.
7. Тестирование цветов шрифтов.
8. Тестирование цветов сообщений об ошибках, предупреждающих сообщений.
9. Проверка того, имеет ли изображение хорошую четкость или нет.
10. Проверка выравнивания изображений.
11. Проверка правописания.
12. Пользователь не должен расстраиваться при использовании системного интерфейса.
13. Проверка, находится ли интерфейс в нужном месте.tracположительный или нет.
14. Тестирование полос прокрутки в зависимости от размера страницы, если таковые имеются.
15. Тестирование отключенных полей, если таковые имеются.
16. Тестирование размера изображений.
17. Проверка заголовков, правильно ли они выровнены или нет.
18. Тестирование цвета гиперссылки.

Демо: Как провести тест графического интерфейса

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

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

Тестовый пример 01 – Убедитесь, что текстовое поле с меткой «Исходная папка» выровнено правильно.

Тестовый пример 02 – Убедитесь, что текстовое поле с меткой «Упаковка» выровнено правильно.

Тестовый пример 03 – Проверьте, соответствует ли эта метка названию «Вставить” — это кнопка, расположенная в конце текста.Box с названием «Исходная папка".

Тестовый пример 04 – Проверьте, соответствует ли эта метка названию «Вставить” — это кнопка, расположенная в конце текста.Box с названием «Упаковка".

Тестовый пример 05 – Убедитесь, что текстовое поле с меткой «Имя» выровнено правильно.

Тестовый пример 06 – Убедитесь, что метка «Модификаторы» состоит из 4 переключателей с названиями public, default, Private, protected.

Тестовый пример 07 – Убедитесь, что метка «Модификаторы» состоит из 4 переключателей, которые правильно выровнены в ряд.

Тестовый пример 08 – Убедитесь, что метка «Суперкласс» под этикеткой «Модификаторы» состоит из раскрывающегося списка, который должен быть правильно выровнен.

Тестовый пример 09 – Убедитесь, что метка «Суперкласс” состоит из кнопки с надписью “Вставить»на нем, который должен быть правильно выровнен.

Тестовый пример 10 – Убедитесь, что при нажатии на любую радиокнопку указатель мыши по умолчанию должен быть изменен на указатель мыши в виде руки.

Тестовый пример 11 – Убедитесь, что пользователь не может вводить текст в выпадающее меню «Суперкласс".

Тестовый пример 12 – Убедитесь, что в случае ошибочного выбора генерируется соответствующее сообщение об ошибке.

Тестовый пример 13 – Убедитесь, что сообщение об ошибке отображается КРАСНЫМ цветом там, где это необходимо.

Тестовый пример 14 – Убедитесь, что в сообщениях об ошибках используются соответствующие метки.

Тестовый пример 15 – Убедитесь, что отдельные радиокнопки всегда должны быть выбраны по умолчанию.

Тестовый пример 16 – Убедитесь, что кнопка TAB работает корректно во время прыжка.ping на другом поле рядом с предыдущим.

Тестовый пример 17 – Убедитесь, что все страницы содержат правильный заголовок.

Тестовый пример 18 – Убедитесь, что текст на странице выровнен должным образом.

Тестовый пример 19 – Убедитесь, что после обновления любого поля отображается соответствующее подтверждающее сообщение.

Тестовый пример 20 – Убедитесь, что выбран только один переключатель, и что можно выбрать более одного флажка.

Проблемы тестирования графического интерфейса

Написание таких дел не представляет сложности; продолжайтеping То, что они остаются работоспособными на протяжении нескольких релизов, недопустимо. В разработке программного обеспечения наиболее распространенная проблема при этом заключается в следующем: Регрессионное тестирование заключается в том, что графический интерфейс приложения часто меняется. Очень сложно проверить и определить, является ли это проблемой или улучшением. Проблема проявляется, когда у вас нет документов, касающихся изменений графического интерфейса.

⚠️ Предупреждение: Скрипты, которые определяют местоположение элементов по экранным координатам или автоматически сгенерированным идентификаторам, завершатся с ошибкой при следующей сборке. Рассматривайте стратегию определения местоположения как часть проектирования, а не как второстепенный вопрос.

Инструменты тестирования графического интерфейса

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

1. Selenium
2. QTP
3. Cucumber
4. ШелкТест
5. TestComplete
6. Тестер графического интерфейса Squish

Нажмите здесь, чтобы узнать Selenium, QTP & Cucumber.

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

Продукт	Под лицензией
AutoHotkey	GPL
Selenium	Apache
Сикули	MIT
Робот Фреймворк	Apache
Вода - Water	BSD
Набор инструментов Dojo	BSD

Сикули Основана на изображении, полезна в тех случаях, когда у элемента управления нет надежного локатора; Selenium остается значением по умолчанию для тестирование веб-приложений.

Часто задаваемые вопросы (FAQ)