> For the complete documentation index, see [llms.txt](https://vladislaveremeev.gitbook.io/qa_bible/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vladislaveremeev.gitbook.io/qa_bible/vidy-metody-urovni-testirovaniya/testirovanie-graficheskogo-interfeisa-vizualnoe-testirovanie-gui-graphical-user-interface-testing.md).

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

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

**Виды интерфейсов:**

* **Интерфейс командной строки** (CLI - Command Line Interface), где вы вводите текст в терминал, и компьютер отвечает на эту команду;
* **Графический интерфейс пользователя** (GUI - Graphical User Interface) , где вы взаимодействуете с компьютером, используя графическое представление, а не текст;
* **Прикладной программный интерфейс** (API - Application Programming Interface) - это набор правил и определений, который позволяет различным программам взаимодействовать друг с другом;
* **Интерфейс аппаратного обеспечения** (HI - Hardware Interface) - это физическая точка соединения между двумя устройствами, например, USB-порт.

**Тестирование графического интерфейса пользователя** (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](https://apiumhub.com/tech-blog-barcelona/ui-testing/)
* [GUI Testing Tutorial: User Interface (UI) TestCases with Examples](https://www.guru99.com/gui-testing.html)
* [GUI Testing Tutorial: A Complete User Interface (UI) Testing Guide](https://www.softwaretestinghelp.com/gui-testing/)
* [Интерфейсы — инструмент взаимодействия и продаж](https://beseller.by/blog/interface/)

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

* [Тестирование GUI: полное руководство](https://testengineer.ru/testirovanie-gui-polnoe-rukovodstvo/)
* [Эффективное тестирование верстки](https://habr.com/ru/company/oleg-bunin/blog/499638/)
* [#9 Артем, Сева и Визуальное тестирование](https://www.youtube.com/watch?v=d91Ca1Yz5q0\&ab_channel=Heisenbug)
* [Кроссбраузерное визуальное тестирование - выбор подходящего инструмента для дизайн-системы NewsKit](https://telegra.ph/Krossbrauzernoe-vizualnoe-testirovanie---vybor-podhodyashchego-instrumenta-dlya-dizajn-sistemy-NewsKit-03-31)
* [О бедном мокапе замолвите слово](https://habr.com/ru/post/170549/)
* [A Pattern Library for Interaction Design](http://www.welie.com/patterns/index.php)
* [Основы IT для тестировщика / Виды интерфейсов / Что такое GUI, API, CLI?](https://www.youtube.com/watch?v=zs13PZhW9lM)