# Тестирование графического интерфейса/визуальное тестирование (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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://vladislaveremeev.gitbook.io/qa_bible/vidy-metody-urovni-testirovaniya/testirovanie-graficheskogo-interfeisa-vizualnoe-testirovanie-gui-graphical-user-interface-testing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.