Чек-лист для тестирования графического интерфейса

Чек-лист для тестирования графического интерфейса

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

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

Содержание

Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.

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

Прежде чем говорить о графическом интерфейсе, давайте разберемся в типах интерфейсов. Существует два типа интерфейсов: GUI и CLI.

GUI расшифровывается как Graphical User Interface (пользовательский графический интерфейс). GUI позволяет взаимодействовать с компьютером с помощью изображений, а не текста. Говоря простым языком, GUI – это то, что видит пользователь при работе с приложением. Например, чек-бокс, кнопка и т. д.

С другой стороны, интерфейс командной строки (Command Line Interface, CLI) позволяет взаимодействовать с компьютером с помощью текста. Компьютер обрабатывает команды и отвечает на них.

Разница между GUI и CLI

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

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

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

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

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

Почему тестирование графического интерфейса важно?

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

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

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

По данным Forrester, хорошо продуманный пользовательский интерфейс может увеличить конверсию сайта более чем на 200 %, а отличный пользовательский опыт – до 400 %. Вот какое влияние оказывает пользовательский интерфейс на успех продукта.

Чек-лист для тестирования GUI

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

1. Согласованность

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

  • Тест-кейс 1: Убедитесь, что размер шрифта во всем приложении соответствует ожиданиям.
  • Тест-кейс 2: Убедитесь, что цвет шрифта одинаков на всех веб-страницах и соответствует ожиданиям.

2. Базовая функциональность приложения

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

Возьмем пользователя, который использует сайт электронной коммерции, например Amazon, на настольном компьютере и может прекрасно ориентироваться на нем, добавлять товары в корзину и успешно оформлять покупки. Параллельно рассмотрим пользователя, использующего то же приложение на смартфоне. В этом сценарии, когда пользователь добавляет товары и пытается оформить заказ, изображение товара перекрывает кнопку “Оформить заказ” в приложении. Это может помешать пользователю оформить заказ. А раздраженный неудачей пользователь может просто уйти, так и не совершив покупку. Подобные дефекты можно легко выявить, протестировав базовую функциональность приложения.

  • Тест-кейс 1: Убедитесь, что кнопка “Разместить заказ” работает так, как ожидалось.
  • Тест-кейс 2: Убедитесь, что веб-элементы на странице не перекрывают друг друга.

3. Орфографические ошибки

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

  • Тест-кейс 1: Убедитесь, что на всем сайте нет орфографических ошибок.
  • Тест-кейс 2: Убедитесь, что в сообщениях об ошибках нет орфографических ошибок.

4. Совместимость и отзывчивость

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

  • Тест-кейс 1: Убедитесь, что все элементы работают, как ожидалось, в последней версии Google Chrome.
  • Тест-кейс 2: Убедитесь, что веб-страницы отображаются так, как ожидается, на последней версии устройства iPhone.
  • Тест-кейс 3: Убедитесь, что дизайн веб-страницы отображается корректно в браузере Safari.

5. Типография

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

Наиболее распространенные сценарии включают следующие проверки:

  • Хорошо ли читается текст?
  • Является ли он достаточно контрастным и разборчивым?
  • Не мешает ли какой-либо текст другому элементу?

Тест-кейсы:

  • Тест-кейс 1: Проверьте, виден ли текст ссылки.
  • Тест-кейс 2: Убедитесь, что текст заголовка и обычный текст различимы и читаемы.

6. Формы, поля и выпадающие списки

Проверьте, все ли текстовые поля видны и позволяют пользователям вводить и отправлять данные. Все ли выпадающие списки, радиокнопки и чек-боксы работают правильно?

  • Тест-кейс 1: Убедитесь, что поля ввода отображаются корректно.
  • Тест-кейс 2: Убедитесь, что дизайн выпадающего списка соответствует ожиданиям.
  • Тест-кейс 3: Проверьте, корректно ли отображается плейсхолдер во всех полях.

7. Валидации

  • Тест-кейс 1: Проверьте, являются ли сообщения об ошибках понятными и корректными.
  • Тест-кейс 2: Проверьте, отмечается ли сообщение об ошибке валидации красным цветом.

8. Поведение элементов пользовательского интерфейса

  • Тест-кейс 1: Проверьте, меняется ли цвет ссылок при наведении курсора.
  • Тест-кейс 2: Проверьте, перенаправляют ли ссылки при нажатии на них на нужные разделы/страницы.

9. Разметка

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

  • Тест-кейс 1: Убедитесь, что межстрочный интервал соответствует требованиям клиента.
  • Тест-кейс 2: Убедитесь, что на веб-странице нет лишних пробелов между элементами.

10. Изображения

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

  • Тест-кейс 1: Убедитесь, что изображения имеют необходимый формат (например, jpeg).
  • Тест-кейс 2: Убедитесь, что все изображения правильно выровнены.
  • Тест-кейс 3: Убедитесь, что изображения хорошо видны.

Пример тестирования GUI

Давайте в качестве примера, чтобы определить подходящие тест-кейсы для тестирования GUI, рассмотрим простую страницу входа в систему.

Страница входа на сайт testsigma

Для такой простой веб-страницы можно выделить следующие тест-кейсы:

  • Убедитесь, что логотип расположен в нужном месте в соответствии с требованиями.
  • Убедитесь, что текст заголовка страницы отображается правильно.
  • Убедитесь, что поле Email принимает правильные данные.
  • Убедитесь, что поле Email выдает сообщение об ошибке, когда пользователь вводит недопустимые данные.
  • Убедитесь, что поле Password отображается правильно.
  • Убедитесь, что в тексте поля Password отображаются сообщения об ошибках при вводе неверных данных/неправильного пароля.
  • Убедитесь, что сообщения об ошибках имеют красный цвет.
  • Убедитесь, что текст кнопки “Войти” отображается правильно.
  • Убедитесь, что кнопка “Войти” доступна для нажатия и работает корректно.
  • Убедитесь, что текст ссылки “Forgot Password?” отображается правильно.
  • Убедитесь, что ссылка “Forgot Password?пароль” работает правильно.
  • Убедитесь, что кнопка GitHub кликабельна.
  • Убедитесь, что кнопка GitHub позволяет пользователям войти в систему с учетными данными GitHub.
  • Убедитесь, что кнопка входа в систему с помощью Google является кликабельной.
  • Убедитесь, что функция входа в систему с помощью Google позволяет пользователям входить в систему с учетными данными Google.
  • Проверьте, является ли ссылка Join free today кликабельной.
  • Убедитесь, что ссылка Join free today перенаправляет пользователей на правильную страницу.

Когда автоматизировать тестирование GUI

Вам следует автоматизировать тестирование графического интерфейса, когда:

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

Заключение

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

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

Какова процедура тестирования графического интерфейса?

Пошаговый процесс тестирования графического интерфейса выглядит следующим образом:

  1. Определите компоненты графического интерфейса и то, что необходимо протестировать.
  2. Проверьте все визуальные аспекты веб-сайта или приложения.
  3. Напишите тест-кейсы для проверки стиля и работы компонентов GUI.
  4. Автоматизируйте повторяющиеся тест-кейсы и вручную протестируйте те, которые не могут быть автоматизированы.
  5. Сообщите о дефектах и повторите тестирование.

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

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

Перевод статьи «A Complete GUI Testing Checklist With Examples».

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *