Какое поведение проверяешь в End-to-end?

Поведение, которое проверяется в End-to-End тестировании для Frontend

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

Ключевые типы поведения, проверяемые в E2E тестах

1. Критические пользовательские сценарии (User Journeys)

Это основные пути пользователя через приложение, которые напрямую влияют на бизнес-ценность. Например:

• Регистрация и авторизация: заполнение формы, отправка данных, получение подтверждения, доступ к защищенным ресурсам.
• Работа с основными данными: создание, редактирование, удаление элементов (например, задач в Todo-приложении, товаров в корзине).
• Комплексные транзакции: процесс оформления заказа от выбора товара до оплаты и получения подтверждения.

Пример кода (Cypress) для теста процесса добавления товара в корзину:

describe('E2E: Purchase Flow', () => {
  it('User can add item to cart and proceed to checkout', () => {
    // 1. Открытие приложения и навигация
    cy.visit('/products');
    // 2. Выбор товара (имитация клика пользователя)
    cy.get('[data-testid="product-card"]').first().click();
    // 3. Добавление в корзину
    cy.get('[data-testid="add-to-cart-button"]').click();
    // 4. Проверка состояния UI (появление сообщения, изменение счетчика)
    cy.get('[data-testid="cart-counter"]').should('contain', '1');
    cy.get('[data-testid="success-message"]').should('be.visible');
    // 5. Переход к оформлению
    cy.get('[data-testid="cart-link"]').click();
    cy.url().should('include', '/cart');
    // 6. Проверка, что товар присутствует в корзине
    cy.get('[data-testid="cart-item"]').should('have.length', 1);
  });
});

2. Интеграция между фронтендом и бэкендом

E2E тесты проверяют, что фронтенд правильно взаимодействует с API, базами данных и другими сервисами:

• Запросы к API: корректность отправляемых данных, обработка ответов (успешных и ошибок).
• Состояние данных после действий: убедиться, что изменения на фронтенде персистятся на бэкенде (например, созданный пост появляется в ленте после сохранения).
• Обработка асинхронных операций: загрузки данных, индикаторы loading, ошибки сети.

3. Взаимодействие с внешними системами

Проверка интеграций, которые могут не тестироваться в unit или интеграционных тестах:

• Аутентификация через OAuth/Social providers (например, вход через Google).
• Платежные шлюзы (имитация процесса оплаты через Stripe или PayPal).
• Отправка email или SMS (подтверждение регистрации).

4. Поведение в различных условиях и состояниях

• Управление состоянием приложения: корректность работы после повторных входов, очистка localStorage/sessionStorage.
• Обработка ошибок и исключительных ситуаций: поведение при недоступности API, невалидных данных пользователя, ограничениях доступа.
• Навигация и роутинг: переходы между страницами, сохранение состояния в истории браузера, корректность динамических маршрутов.

5. Кросс-браузерное и кросс-платформенное поведение

Хотя это часто относится к совместимости, E2E тесты могут проверять ключевые сценарии в разных браузерах (Chrome, Firefox, Safari) или на разных устройствах (десктоп, мобильный), чтобы убедиться в базовой функциональности.

Пример комплексного E2E сценария для приложения блога

describe('E2E: Blog Application Full Flow', () => {
  beforeEach(() => {
    // Подготовка: очистка данных, посещение сайта
    cy.clearLocalStorage();
    cy.visit('/');
  });

  it('Complete flow: Login, Create Post, Edit, Delete', () => {
    // Авторизация
    cy.get('[data-testid="login-button"]').click();
    cy.get('[data-testid="email-input"]').type('test@example.com');
    cy.get('[data-testid="password-input"]').type('password123');
    cy.get('[data-testid="submit-login"]').click();
    cy.url().should('include', '/dashboard');

    // Создание нового поста
    cy.get('[data-testid="new-post-button"]').click();
    cy.get('[data-testid="post-title-input"]').type('My New Post');
    cy.get('[data-testid="post-content-editor"]').type('Content of the post...');
    cy.get('[data-testid="save-post-button"]').click();
    cy.get('[data-testid="success-alert"]').should('be.visible');

    // Проверка, что пост появился в списке
    cy.get('[data-testid="posts-list"]').within(() => {
      cy.contains('My New Post').should('exist');
    });

    // Редактирование поста
    cy.get('[data-testid="edit-post-button"]').first().click();
    cy.get('[data-testid="post-title-input"]').clear().type('Updated Title');
    cy.get('[data-testid="save-post-button"]').click();
    cy.contains('Updated Title').should('exist');

    // Удаление поста
    cy.get('[data-testid="delete-post-button"]').first().click();
    cy.get('[data-testid="confirm-delete-button"]').click();
    cy.get('[data-testid="posts-list"]').should('not.contain', 'Updated Title');
  });
});

Важные аспекты, на которые обращается внимание в E2E тестах

• Детерминированность и надежность: тесты должны быть стабильными, избегать зависимостей от неконтролируемых факторов (например, внешних API).
• Изоляция данных: использование тестовых данных, которые не конфликтуют с производственными.
• Время выполнения: E2E тесты медленные, поэтому их количество часто ограничивается ключевыми сценариями.
• Визуальная проверка: иногда включает проверку корректности отображения элементов (через snapshot или visual regression testing).

В заключение, E2E тестирование для Frontend проверяет не отдельные функции или модули, а целостное поведение системы с точки зрения конечного пользователя. Это гарантирует, что все части приложения — UI компоненты, клиентская логика, коммуникация с сервером, управление состоянием — работают вместе без сбоев, обеспечивая положительный user experience и выполнение бизнес-целей. Для разработчика важно покрыть эти тесты наиболее значимые и рискованные сценарии, так как они служат последним барьером перед выпуском продукта.