- Основы GUI
- Элементы UI
- Критерии качества GUI
- Методологии тестирования
- Подход к тестированию
- Ручное или автоматизированное
- Инструменты
- Чеклисты
- Компоненты пользовательского интерфейса
- Поведение и удобство использования
- Практический пример
Большинство людей взаимодействуют с программами ежедневно, как на компьютере, так и в смартфоне. Быстрое развитие мобильных технологий повлекло за собой рост конкуренции в индустрии разработки приложений. Благодаря этому все современные популярные программы визуально привлекательны, просты в использовании и надежны. Единственный способ добиться такого результата, помимо эффективной разработки, — тщательное тестирование.
Главной особенностью любой программы является графический пользовательский интерфейс (GUI), обеспечивающий взаимодействие с программой.
В этом руководстве мы подробно рассмотрим процедуру тестирования пользовательского интерфейса.
Основы GUI
Бизнес-логика, процессы, данные и транзакции, вычисления — все это управляется функционалом бэкенда. Результаты работы бэкенда затем показываются пользователю через интерфейс (текстовый или графический).
Графический пользовательский интерфейс (GUI) — это уровень представления программы, сайта или мобильного приложения. В отличие от старого текстового интерфейса командной строки, GUI представляет собой современное графическое представление базовой функциональности. Графика упрощает взаимодействие обычных пользователей с программными приложениями.
По сути, пользовательский интерфейс — это все возможности и функции, доступные пользователю в программе. А поскольку это именно та часть ПО, с которой взаимодействует пользователь, важность ее тестирования очевидна.
Элементы UI
Элементы пользовательского интерфейса — это компоненты, позволяющие пользователю взаимодействовать с программой. Тестирование графического интерфейса — это проверка этих компонентов.
Список возможных компонентов, нуждающихся в проверке, обширен, но в числе наиболее распространенных можно назвать следующие:
- текстовые поля для ввода данных
- чекбоксы для выбора нескольких вариантов
- радиокнопки для выбора одного варианта
- командные кнопки для действий
- значки социальных сетей для шеринга
Кроме того, нужно учитывать варианты поведения и состояния элементов GUI, например:
- активирован / деактивирован
- заполнен / не заполнен
- скрыт / отображен
- параметры по умолчанию
- до / после наведения мыши
Ключевые критерии качества GUI
Графический интерфейс пользователя — это нечто большее, чем красивое оформление с цветными кнопками.
GUI и бесперебойная работа его функций обеспечивают хороший пользовательский опыт. Поэтому следующие вещи должны быть тщательно спланированы и качественно реализованы:
- таблицы стилей и эстетика
- совместимость с браузером и/или операционной системой
- валидация данных и проверка на целостность
- удобная навигация и удобство использования в целом
- безопасное применение различных режимов
- выполнение действий пользователя и сочетания клавиш
Пользователи видят и оценивают дизайн приложения. Если пользователь ощущает дискомфорт (например, из-за низкого качества изображений или текста, запутанной структуры меню), он очень быстро выйдет из программы. Если это мобильное приложение, оно, вероятно, будет удалено в течение нескольких минут.
Методологии тестирования
Независимо от того, отдается ли тестирование программы на аутсорс или тестирование проводится собственными силами, это неотъемлемая часть любого производственного процесса.
Чтобы проверить, соответствует ли программа определенным стандартам и все ли действия доступны пользователю и могут быть выполнены без ошибок, применяются различные виды функционального и нефункционального тестирования. Например:
- приемочное пользовательское тестирование
- функциональное тестирование
- регрессионное тестирование
- модульное тестирование
- тестирование производительности
- тестирование графического интерфейса
Теперь, когда мы прояснили роль графического пользовательского интерфейса и вспомнили различные методы тестирования, давайте более подробно разберем методы тестирования GUI.
Подход к тестированию графического пользовательского интерфейса
Как тестировщику подступиться к тестированию пользовательского интерфейса?
Думайте как пользователь. Определите очевидное и неясное и сосредоточьтесь на компонентах дизайна, потока и пользовательского интерфейса.
Наиболее распространенными проблемами, на которые следует обратить внимание, являются непоследовательные пустые пространства и выравнивание на странице, неправильная работа элементов управления, орфографические ошибки в названиях полей, а также проблемы, связанные с кроссбраузерной совместимостью.
Ручное или автоматизированное тестирование?
Тестирование GUI может быть как автоматизированным, так и ручным (или и тем, и другим). Последний вариант является наиболее эффективным, поскольку обеспечивает наилучшее покрытие тестами.
Автоматизированное тестирование позволяет повторно проверять уже созданный функционал, а специалисты по ручному тестированию могут сосредоточиться на новых и разрабатываемых функциях. Мануальное тестирование не только улучшает качество продукта, но и закладывает основу для создания наборов автоматизированных тестов.
Внедрение автоматизации тестирования GUI — это трудоемкий процесс, который может окупиться в долгосрочной перспективе, если будет непрерывным. В некоторых случаях ручное тестирование быстрее и эффективнее, поэтому важно знать, что стоит автоматизировать, а что — нет.
Инструменты для тестирования GUI
Выбор правильного инструмента автоматизации тестирования определит успех или неудачу его развертывания. При оценке инструментов автоматизации следует обращать внимание на следующие вещи:
- поддержка автоматизации технологий, используемых для разработки приложения
- написание и обновление тестов, а также их развертывание в тестовых средах должны быть простыми и безболезненными для команды тестировщиков
- наличие технической поддержки инструмента
- инструмент должен поддерживать новейшие технологии, браузеры и операционные системы
Чтобы тщательно изучить различные инструменты с графическим интерфейсом, такие как Ranorex, Selenium, QTP и Cucumber, пользуйтесь пробными периодами.
Чеклисты
Тестирование дизайна и функциональности компонентов GUI требует внимания к деталям.
Тестировщик должен отметить все аспекты фронтенда, включая стили, шрифты, выравнивание, гиперссылки, контент, компоненты UI и ожидаемое поведение пользователя.
Ниже приведены важные аспекты тестирования пользовательского интерфейса.
Компоненты пользовательского интерфейса
- Проверьте расположение, размер, ширину, длину и выравнивание всех элементов пользовательского интерфейса.
- Протестируйте прием данных, вводя в поля текст, цифры, специальные и недопустимые символы.
- Запустите функционал программы при помощи GUI.
- Проверьте орфографию в сообщениях об ошибках и об успешном выполнении.
- Изображения должны быть хорошего качества, а текст — четким.
- Проверьте, как выглядит GUI в разных разрешениях экрана и при изменении размера экрана/страницы.
- Протестируйте полосы прокрутки страницы, а также состояние и поведение элементов управления.
Поведение и удобство использования
Следующий список включает общие ожидания в отношении поведения и удобства использования программы.
- Приложение открывается двойным кликом.
- Поведение при запуске нескольких экземпляров приложения соответствует ожидаемому.
- В информации о программе отображается название приложения, версия и другие важные сведения.
- Строки заголовков окон и нейминг последовательны.
- При закрытии приложения пользователю предлагается подтвердить закрытие и выводится предупреждение о любой несохраненной работе.
- Динамические элементы, такие как индикаторы выполнения или значки песочных часов, показывают, требуется ли процессам время для загрузки или завершения.
- Онлайн-справка доступна через меню «Справка» и клавишу F1.
- Навигация по вкладкам работает и имеет порядок слева направо и сверху вниз.
- Обязательные поля выделены и имеют валидацию.
- Команды окна имеют соответствующую клавишу быстрого доступа.
Практический пример
А в завершение статьи давайте рассмотрим практический пример стандартного юзкейса тестирования GUI. Зеленые пометки на скриншоте — это ссылки на конкретные действия по тестированию, описанные ниже.
- UI-1: проверьте метку страницы, шрифт и позиционирование.
- UI-2: проверьте правильность заголовка страницы и шрифт.
- UI-3: проверьте, находится ли фокус курсора на поле по умолчанию. Также проверьте:
- какие поля являются обязательными (нажимая «Next» с пустой формой)
- метку поля и прием допустимых и недопустимых символов
- выравнивание и положение текстового поля.
- UI-4: проверьте метку поля и прием допустимых и недопустимых символов. Также проверьте выравнивание и положение текстового поля.
- UI-5: проверьте метку поля и прием допустимых и недопустимых символов. Также проверьте выравнивание и положение текстового поля.
- UI-6: попробуйте ввести текст без орфографических ошибок. Попробуйте ввести разрешенные и запрещенные символы.
- UI-7: протестируйте гиперссылки и всплывающие окна.
- UI-8: проверьте метку поля и прием допустимых и недопустимых символов. Проверьте выравнивание и положение текстового поля.
- UI-9: проверьте метку поля и прием допустимых и недопустимых символов. Введите несовпадающий пароль. Проверьте выравнивание и положение текстового поля.
- UI-10: проверьте, работает ли значок «показать / скрыть пароль». Проверьте положение и качество изображения.
- UI-11: попробуйте ввести текст без орфографических ошибок. Проверьте сообщение, введя разрешенные и запрещенные символы.
- UI-12: Протестируйте гиперссылки и всплывающие окна.
- UI-13: Проверьте положение и четкость управляющих компонентов. Протестируйте отправку тестовой формы.
