Тестирование графического интерфейса/визуальное тестирование (GUI - Graphical User Interface testing)

Интерфейс - это то, с помощью чего происходит “общение” между ПО и окружением. Существует два типа интерфейсов:

● Интерфейс командной строки (CLI - Command Line Interface), где вы вводите текст в терминал, и компьютер отвечает на эту команду;

● Графический интерфейс пользователя (GUI - Graphical User Interface), где вы взаимодействуете с компьютером, используя графическое представление, а не текст;

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

Техники тестирования GUI:

● Manual testing: При таком подходе тестеры вручную проверяют графические экраны в соответствии с требованиями, изложенными в документе бизнес-требований (business requirements document);

● Capture & replay testing или Record and Replay: Мы также можем провести тестирование графического интерфейса пользователя, используя некоторые инструменты автоматизации, разработанные специально для этого. Идея состоит в том, чтобы запустить приложение и записать взаимодействие, которое должно происходить между пользователем и самим приложением (движения мыши и т. д.), после чего эти тесты будут прогоняться, а фактический результат сравниваться с ожидаемым;

● Model based testing: Модель - это графическое описание поведения системы. Это помогает нам понять и спрогнозировать поведение системы. Модели помогают в создании эффективных тестовых примеров с использованием системных требований. Процесс:

○ Построение модели;

○ Определение входных данных для модели;

○ Расчет ожидаемых результатов для модели;

○ Запуск тестов;

○ Сравнение фактических результатов с ожидаемыми;

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

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

● Графики - отображает состояние системы и проверяет состояние после некоторого ввода;

● Таблицы решений - таблицы, используемые для определения результатов для входных данных;

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

Примеры проверок:

● Тип и размер шрифта: шрифт одинаковый на всех экранах или хотя бы одного семейства, одинаковый размер шрифта заголовков, основного текста и т. д.;

● Цвета: должны быть сочетаемы. Придерживайтесь одних цветов и следуйте гайдлайнам. Вы не можете использовать 4 разных варианта оранжевого (если только он не является частью дизайна). Посмотрите на гиперссылки, фон, кнопки, основной текст и т. д.;

● Стили значков: вам не следует выбирать 5 разных стилей значков, если вы выбираете «плоские» значки, оставайтесь с плоскими значками;

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

● Несоответствия диалоговых окон: если вы используете «выход» в одних диалоговых окнах, вы должны использовать «выход» в других;

● Обязательные поля: всегда лучше указать, что поле является обязательным, добавив к нему звездочку и предоставив пользователю своего рода предупреждение, если данные не указаны;

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

● Один и тот же документ, несколько открытий: когда документ открывается / загружается более одного раза, вместо перезаписи вы можете переименовать его, добавив номер к имени файла;

● Ширина полей: очевидно, если разрешено определенное количество символов и введенные данные не должны превышать определенное число, вы должны прояснить это;

● Экранные инструкции: экраны (непонятные) должны содержать какие-то экранные инструкции, которые помогут / направят пользователя;

● Индикаторы выполнения: когда ждете результатов, индикаторы выполнения хороши, чтобы пользователи понимали, что им нужно чего-то ждать и что процесс все еще продолжается;

● Подтверждение сохранения: если вы можете вносить изменения в приложение без необходимости сохранения, всегда полезно убедиться, что пользователь не хочет сохранять, прежде чем перейти к другому экрану;

● Подтверждение удаления: поскольку мы подтверждаем сохранение, всегда полезно подтвердить, что пользователь хочет удалить элемент. Я уверен, что многие из вас (как и я) удаляли что-то на странице, не желая этого;

● Ввод перед Drop down list: когда у вас есть сотни вариантов на выбор в выпадающем меню, гораздо лучше иметь возможность сначала вводить текст, чем просматривать весь список;

● Недопустимые параметры: иногда чтобы выбрать какие-то параметры вам необходимо подтвердить другие. Эта опция должна отображаться как доступная, когда все требования выполнены;

● Пункты меню: показывать только те пункты меню, которые доступны в данный момент, вместо отображения всех пунктов, даже если они недоступны;

● Сообщения об ошибках: сообщения об ошибках должны быть информативными;

● Рабочие шорткаты: если в вашем приложении есть шорткаты, убедитесь, что все они работают, независимо от того, какие браузеры используются;

● Разные разрешения: проверить корректность верстки при масштабировании и на разных разрешениях;

● Полосы прокрутки;

● Изображения: сжатие, выравнивание и т.п.;

● Проверка орфографии;

Источники:

● A Guide To GUI Testing

● GUI Testing Tutorial: User Interface (UI) TestCases with Examples

● GUI Testing Tutorial: A Complete User Interface (UI) Testing Guide

Доп. материал:

● Эффективное тестирование верстки

● #9 Артем, Сева и Визуальное тестирование

● Кроссбраузерное визуальное тестирование - выбор подходящего инструмента для дизайн-системы NewsKit

● О бедном мокапе замолвите слово

● A Pattern Library for Interaction Design