UI-дизайн

Как проводить UI-тестирование мобильных и верстки + сравнение инструментов автоматизации

Расскажу о ценности UI-тестирования, а еще разберем, как проводить тестирование интерфейсов по шагам. Чек-лист с примерами и рекомендациями в конце статьи. 👩‍💻👇
Иллюстрация Berin Holy: https://dribbble.com/shots/7152093-Nike-TN

За основу материала взяты и расширены статьи “UI Testing: A Comprehensive Guide” и “Switching to UI Automation: Everything You Need to Know”.

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

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

Содержание:

Что такое UI-тестирование и в чем его польза?

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

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

5 аспектов, которые изучает UI-тестирование:

UI-тестирование выполняют вручную и с помощью автоматизированных методов. Цель UI-тестирования — обеспечить соответствие спецификации.

В чем ценность UI-тестирования для компании и пользователей

UI-тестирование обволакивает контролем качества два основных круга ответственности:

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

Чек-лист для UI-тестирования: что тестировать в первую очередь

В этом разделе основные UI-тесты, которые помогут QA-инженерам тщательнее проводить тестирование интерфейсов. Кейсы охватывают различные аспекты интерфейса: изображения, цвет, контент страниц, навигацию, юзабилити.

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

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

Подходы к UI-тестированию мобильных приложений и веб-интерфейсов

Существует три основных подхода к тестированию графического интерфейса приложений, а именно:

1. Ручное тестирование

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

2. Тестирование утилитами записи и воспроизведения (англ. capture/playback tools)

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

3. Тестирование на основе моделей

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

  1. Создайте модель системы
  2. Определите входные параметры
  3. Проверьте ожидаемые результаты
  4. Проведите тесты
  5. Проверьте и подтвердите вывод системы по сравнению с ожидаемым результатом

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

Формат описания сценариев тестирования пользовательского интерфейса

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

Сценарий тестирования — это документ, который определяет, как должно работать приложение в реальной жизни, в настоящих ситуациях.

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

Сценарии — это база для создания сценариев тестирования (англ. scripting), как показано на схеме:

Пример подготовки сценариев тестирования.

Пример создания карты тест-кейсов для UI-тестирования

Вокруг формы минимум 13 тест-кейсов. Сделаем разметку от TC-1 до TC-13 и выполним тестирование пользовательского интерфейса:

Пример покрытия тестами формы авторизации.

ТC-1

ТC-2

ТC-3

ТC-4

ТC-5

ТC-6

ТC-7

ТC-8

ТC-9

ТC-10

ТC-11

ТC-12

ТC-13

Что важно учесть при UI-тестировании

Тестировщики UI приложений сталкиваются с рядом нюансов при выполнении тестов пользовательского интерфейса. Вот некоторые из наиболее заметных историй:

Лучшие практики организации UI-тестирования

Держите практические советы, которые помогут справляться с возрастающей сложностью при тестировании пользовательского интерфейса.

1. Выберите правильный инструмент автоматизации тестирования пользовательского интерфейса

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

2. Используйте репозиторий для сценариев

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

3. Выберите инструменты автоматизации тестирования без использования программного кода

Чтобы избежать повторяющихся изменений в тестовом коде, разработчикам и командам QA следует использовать возможности автоматизации без программирования. Например, если вы поклонник Selenium, то Perfecto Scriptless автоматизирует весь процесс создания и выполнения тестов, тем самым сэкономив вам много времени и средств.

4. Стандарты ревью

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

Автоматизация тестирования сайтов, мобильных и веб- приложений: когда делать и какими инструментами

Команды разработки и тестирования стремятся автоматизировать UI-тесты по нескольким причинам. К наиболее примечательным относятся:

Согласно Global Quality Report около 60% организаций указали на улучшенную способность обнаруживать дефекты приложений из-за увеличения тестового покрытия. Еще 57% отметили увеличение повторного использования тест-кейсов после применения автоматизации. При этом 54% зафиксировали снижение времени, затрачиваемого на циклы тестирования.

Таблица сравнения ручного и автоматического тестирования

Разбираем в каких случаях применять автоматическое тестирование.

КритерийРучное тестированиеАвтоматическое тестирование
СкоростьНизкаяВысокая
ТочностьНизкаяВысокая
МасштабируемостьНизкаяВысокая
Рентабельность инвестиций в краткосрочное тестированиеВысокаяВысокая
Рентабельность инвестиций в долгосрочное тестированиеНизкаяВысокая
Возможность повторного использования тестаНизкаяВысокая
Покрытие тестовНизкаяВысокая
Порог входаЛегко освоитьТребуется постараться
ПрозрачностьСкорее низкаяСкорее высокая
АдаптивностьВысокаяТребуется постараться
Лучше всего подходит для:Юзабилити-тестирование;
Исследовательское тестирование;
Ранние стадии разработки; Тестирование пользовательского интерфейса;
Ad-hoc тесты;
Сквозное тестирование;
Регрессионное тестирование;
Тестирование стабильных версий пользовательского интерфейса;

Ребята из SimbirSoft сделали классный обзор инструментов для тестирования и подобрали подходящие инструменты для тестирования.

Инструмент для тестирования iOS- и Android-приложений

Для покрытия тестами основных пользовательских сценариев выбрали Appium по следующим причинам:

Appium помог успешно провести тесты для iOS и Android. При этом следует учитывать, что подобные end-to-end тесты с Appium не проводятся на каждом merge request, поскольку это занимает много времени. Подробнее

Инструмент для тестирования веб-приложений и сайтов

Для тестирования веб-приложений и сайтов ребята применяют WebDriver (в связке с Selenium и протоколом автоматизации DevTools). Однажды они нашли статью с исследованием от Giovanni Rago – автора серии полезных материалов о тестировании – и перевели его статью «Puppeteer vs Selenium vs Playwright: сравнение скорости» (Puppeteer vs Selenium vs Playwright, a speed comparison). В итоге решили опробовать новые инструменты, такие как Puppeteer и Playwright. Подробнее

Вывод и рекомендации

UI-тестирование — это мощный драйвер развития пользовательского опыта и повышения количества удовлетворенных клиентов. А главная задача QA-инженеров помочь сделать интерфейс простым и удобным во всех браузерах и на всех устройствах. Сильный QA-инженер может расчехлить Figma и переделать пользовательский сценарий так, чтобы клиенты радовались, а в техподдержку прилетало меньше жалоб и непоняток. И, конечно же, у него есть на это время, так как он применяет передовые методики по автоматизации тестирования.