Как на самом деле тестировать UI

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

Как ведущие команды разработчиков фронтенда все успевают? Какова их стратегия тестирования, и какие методы они используют? Я исследовал десять команд из сообщества Storybook, чтобы узнать, что реально работает  — Twilio, Adobe, Peloton, Shopify и другие.

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

Что мы тестируем?

Все основные JavaScript-фреймворки являются компонентно-ориентированными. Это означает, что пользовательский интерфейс строится "снизу вверх", начиная с атомарных компонентов и постепенно складываясь в страницы.

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

Поэтому тестирование пользовательского интерфейса теперь является синонимом тестирования компонентов.

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

1. Визуальные характеристики: правильно ли отрисовывается компонент с заданным набором свойств или состояний?
2. Композиция: работают ли вместе несколько компонентов?
3. Взаимодействие: события обрабатываются так, как задумано?
4. Доступность: доступен ли пользовательский интерфейс?
5. Пользовательские потоки: работают ли сложные взаимодействия между различными компонентами?
   

На чем следует сосредоточиться?

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

• 💰 Стоимость обслуживания: время и усилия, необходимые для написания и поддержки тестов.
• ⏱️ Скорость итераций: насколько быстро