Тестирование фронтенда и E2E тесты. Как это связано и как правильно внедрять

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

Тестирование фронтенда и Е2Е тесты: в чём взаимосвязь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему E2E тестирование важно для фронтенда

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Саммари

1. Фронтенд тестирование является важной частью Е2Е тестирования, или End-to-End tests. Е2Е (сквозное) тестирование невозможно без проверки фронтенда, так как именно через фронтенд пользователь взаимодействует с системой.

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

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

4. Несмотря на все плюсы, у Е2Е тестов есть также минусы и ограничения. Они включают высокие требования к ресурсам, сложность в настройке и поддержке, быстрое устаревание.

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