Тестирование фронтенда и E2E-тесты: как это связано и как правильно внедрять. Ручное тестирование, UI и проверка взаимодействия с бэкендом

Перед «выходом в свет» каждый цифровой сервис проходит множество тестов, и один из них – проверка фронтенда. Это «экзамен» пользовательского интерфейса веб-сайта или приложения, который показывает корректное функционирование и правильное отображение всех визуальных элементов: кнопки, формы, меню и другие. Тестирование фронтенда включает в себя UI-тестирование (соответствие верстки с макетами), адаптивность на различных устройствах, кроссплатформенность и кроссбраузерность, производительность и доступность. В этой статье расскажем, как именно проходит комплексная проверка фронтенда и какие типы тестов в ней используются.

Взаимосвязь двух типов тестов

E2E тестирование (End-to-End Test, он же сквозное тестирование), включает в себя проверку фронтенда. Это частично пересекающиеся процессы.

Тестирование фронтенда (Frontend Testing) – это проверка пользовательского интерфейса (UI) и пользовательского опыта (UX). Оно концентрируется на том, как приложение выглядит и ведет себя в браузере пользователя. Применение тестирования фронтенда:

• компоненты интерфейса (кнопки, формы, списки, модальные окна): корректное отображение, интерактивность и поведение;

• логика на стороне клиента: проверки JavaScript-кода, который отвечает за поведение интерфейса;

• визуальная целостность – соответствие дизайна макетам, адаптивность под разные разрешения экранов, корректное отображение стилей;

• скорость загрузки страниц и «отзывчивость» интерфейса (скорость реакции элементов на действия пользователя);

• доступность для пользователей с ограниченными возможностями.

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

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

E2E тестирование (End-to-End тестирование, читается как Энд-ту-Энд) — это тип тестирования, который проверяет весь рабочий процесс приложения от начала до конца, имитируя действия реального пользователя и убеждаясь, что все интегрированные компоненты работают вместе корректно. Ключевая идея E2E тестирования – это проверка целостности и интеграции системы. В отличие от юнит-тестов, которые проверяют отдельные функции изолированно, и интеграционных тестов, которые фокусируются на отдельных модулях и их взаимодействиях, E2E тесты охватывают полный жизненный цикл пользовательского взаимодействия.

Что тестируется:

• полный «юзер флоу», то есть пользовательский маршрут, который показывает порядок работы пользователя с интерфейсом. Например, регистрация – авторизация – добавление товаров в корзину – оформление заказа – оплата;

• корректность отправки запросов с фронтенда на бэкенд и обработки ответов, т.е. взаимодействие бэкенда с фронтендом;

• сохранение и получение данных из базы данных;

• работа при интеграциях со сторонними сервисами (оплаты, доставки, авторизации);

• бизнес-логика на уровне системы: проверка, что приложение выполняет бизнес-правила и удовлетворяет бизнес-требованиям.

Чтобы выполнить эти задачи, QA-инженеру (специалисту по тестированию) можно применять автоматизированное UI тестирование с использованием инструментов для имитации действий пользователя (с таким программным комплексом как Selenium, Cypress, Playwright). Или ручное тестирование: прохождение специалистом полных пользовательских сценариев.

В разработке системы сайтов для группы НЛМК мы в Uplab применили DevOps-подход: внедрили 8 сценариев автотестирования для главного и дочерних сайтов на общей дизайн-системе. Это позволило сформировать единый пользовательский опыт для всех сайтов в системе и убедиться в корректной работе всех веб-ресурсов.

Связь между фронтендом и E2E-тестированием

1. Фронтенд – часть E2E испытаний. Этот тип тестов начинается со взаимодействия с фронтендом, поскольку пользовательский интерфейс – точка входа пользователя в приложение. Такими тестами имитируют действия пользователя, чтобы оценить, насколько успешно проходит флоу.

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

3. Общие инструменты. Часто автоматизация как фронтенд, так и End-to-End тестов проводится одними и теми же инструментами (Selenium, Cypress, Playwright). Это позволяет командам эффективно использовать свои навыки и инфраструктуру для разных типов тестирования.

4. Общие цели. Оба типа тестирования направлены на обеспечение качества продукта для конечного пользователя. Успешные испытания фронтенда говорят о том, что пользовательский интерфейс удобен и работает корректно. Сквозное тестирование гарантирует, что все приложение в целом работает так, как ожидается пользователем, и выполняет свои функции.

E2E тестирование, или тестирование «от начала до конца», выходит за рамки проверки отдельных функциональных элементов интерфейса или взаимодействия с API. Тестирование End-to-End фокусируется на воспроизведении реальных пользовательских сценариев и проверке работоспособности приложения как единой системы, от момента взаимодействия пользователя с интерфейсом и до обработки данных на бэкенде, включая все промежуточные слои и интеграции.

Зачем нужны E2E тесты

Фронтенд – «лицо» приложения, и оно напрямую взаимодействует с пользователем. Ошибки на фронтенде могут не только испортить пользовательский опыт, но и привести к серьезным последствиям, таким как потеря клиентов, финансовые убытки или репутационные риски.

Четыре причины, почему End-to-End тест – это важно:

• Выявляем проблемы интеграции. Фронтенд часто тесно связан с бэкендом через API. E2E интеграционные тесты проверяют, что всё работает корректно и данные передаются между слоями без ошибок.

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

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

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

Также End2End тесты проверяют взаимодействие между фронтендом и бэкендом: корректно ли запросы от фронтендов отправляются на бэкенды? Правильно ли данные обрабатываются на сервере, верно ли ответы отображаются в интерфейсе?

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

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

Когда применять E2E тестирование?

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

Сложные пользовательские интерфейсы

Приложения с разветвленными и динамичными пользовательскими интерфейсами – идеальные кандидаты для E2E тестирования. Вот несколько конкретных особенностей интерфейса, для которых стоит проводить тесты:

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

• Сложные пользовательские сценарии и рабочие процессы, такие как оформление заказа в интернет-магазине, бронирование билетов или заполнение многошаговых форм. Здесь важна не только корректность отдельных шагов, но и правильность перехода между ними и общая логика всего процесса, и всё это проверяют End-to-End тесты.

• Неочевидное поведение, возникающее при взаимодействии компонентов. Например, изменение состояния одного элемента интерфейса может неожиданно повлиять на поведение другого. В модульных (юнит) тестах такие ошибки могут «проскочить» , но сквозное тестирование их выявляет.

Примеры приложений со сложными интерфейсами, где E2E тестирование особенно важно: интернет-магазины, банковские и финансовые приложения, CRM (системы управления взаимоотношениями с клиентами), цифровые сервисы с интерактивными дашбордами, отчетами и другими инструментами для визуализации данных.

Приложения с множеством интеграций (API, базы данных)

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

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

Также End-to-End тесты могут имитировать различные сценарии с пользователями, включая ошибки API, недоступность базы данных, медленные ответы от бэкенда или проблемы со сторонними сервисами. Это позволяет убедиться, что приложение корректно обрабатывает ошибки, предоставляет пользователю информативные сообщения и продолжает работать стабильно даже в неблагоприятных условиях. Например, тест может проверить, что при недоступности API приложение корректно отображает сообщение об ошибке и предлагает пользователю повторить попытку позже, а не просто "падает".

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

Ограничения и недостатки

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

Время выполнения и ресурсоемкость

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

Время выполнения End-to-End тестов может варьироваться в зависимости от стабильности тестового окружения, скорости сети, загруженности бэкенда и внешних сервисов. Нестабильность любого из этих компонентов может привести к замедлению или даже сбоям в тестах.

Длительное время выполнения и зависимость от внешних факторов повышают вероятность возникновения нестабильных, "флэки" тестов, которые иногда проходят, а иногда падают без видимых причин.

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

Сложности в настройке и поддержке

End2End тесты значительно сложнее в настройке и поддержке, чем тесты более низкого уровня. Для них требуется полноценное тестовое окружение, максимально приближенное к продакшену. Это может включать в себя развертывание приложения, настройку базы данных, API-сервисов, внешних интеграций и т.д. Поддержание такого окружения в актуальном и стабильном состоянии требует усилий и ресурсов.

Даже небольшие изменения в UI (например, изменение CSS-класса кнопки или перенос элемента на другое место) могут привести к поломке тестировочных программ, если селекторы элементов не были достаточно гибкими и устойчивыми к изменениям. Это и делает их сложными в поддержке.

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

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

Применение E2E тестов: примеры для фронтенда

• Тестирование авторизации и аутентификации: проверка процесса входа и выхода пользователя, сохранения сессии, управления ролями и доступом.

• Тестирование форм и валидации: проверка корректности заполнения форм, валидации данных на стороне клиента и сервера, обработки ошибок.

• Тестирование пользовательских сценариев. Например, для интернет-магазина - добавление товара в корзину, оформление заказа, оплата, отслеживание статуса заказа.

• Тестирование сложных взаимодействий. Например, работа с drag-and-drop интерфейсами, интерактивными картами, динамическими таблицами.

• Кросс-браузерное и кросс-платформенное тестирование: проверка работоспособности приложения в различных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах (десктоп, мобильные).

E2E тестирование позволяет убедиться, что ваше приложение работает не только корректно "под капотом", но и предоставляет пользователю бесшовный и удобный опыт.

Метрики в сквозных тестированиях

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

• Статус подготовки тест-кейса: показывает, насколько выполнена подготовка в сравнении с планом.

• Еженедельный прогресс тестирования в сравнении с планом. Демонстрирует, как продвигается тестирование на текущей неделе, в процентах выполненных тестов от общего объема, а также разбивку по статусам: сколько тестов успешно пройдено, сколько не успешно, и сколько еще не было запущено. Все эти данные должны быть представлены в сравнении с изначально запланированным объемом тестирования на эту неделю.

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

Саммари

1. Тестирование фронтенда является важной частью E2E тестирования, или End-to-End tests.

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

3. Зачем нужны E2E тесты: они применяются для сложных пользовательских интерфейсов и приложений с большим числом интеграций.

4. Минусы и ограничения: высокие требования к ресурсам, сложность в настройке и поддержке, быстрое устаревание.

5. Для проверок эффективности тестирования важно фиксировать статусы подготовки тест-кейса, еженедельный прогресс тестирования и обзоры статуса дефектов.