E2E тестирование

E2E (End-to-End) тестирование предназначено для проверки работы приложения как единого целого, включая фронтенд, бэкенд и взаимодействие с внешними сервисами. В контексте приложений на JavaScript с использованием библиотеки MUI (Material-UI) особое внимание уделяется корректному отображению компонентов, взаимодействию с пользователем и интеграции с состоянием приложения.

Настройка среды для E2E тестирования

Для E2E тестирования чаще всего используют фреймворки Cypress или Playwright. Они позволяют управлять браузером, эмулировать пользовательские действия и проверять конечный результат.

Пример установки Cypress:

npm install cypress --save-dev

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

npx cypress open

Это создаст структуру каталогов с папками cypress/e2e для тестов, fixtures для фиктивных данных и support для вспомогательных функций.

Организация тестов MUI-компонентов

MUI-компоненты часто используют динамическое рендеринг, стили и кастомные атрибуты, что требует внимательного подхода при написании селекторов для тестов. Основные подходы:

  1. data-testid – добавление уникальных атрибутов к компонентам:
<Button data-testid="submit-button" variant="contained">
  Отправить
</Button>
  1. По тексту или роли – использование стандартного API:
cy.get('button').contains('Отправить').click();
cy.get('[role="button"][name="Отправить"]').click();
  1. Использование селекторов классов MUI – менее предпочтительно, так как классы могут динамически меняться:
cy.get('.MuiButton-contained').click();

Тестирование взаимодействий с формами

MUI широко используется для форм: TextField, Select, Checkbox, RadioGroup. Важно проверять все пользовательские сценарии:

// Ввод текста
cy.get('[data-testid="username"]').type('user123');

// Выбор из селекта
cy.get('[data-testid="role"]').click();
cy.get('[data-value="admin"]').click();

// Отметка чекбокса
cy.get('[data-testid="agree"]').check();

Для проверки ошибок валидации:

cy.get('[data-testid="submit-button"]').click();
cy.get('[data-testid="username-error"]').should('contain', 'Поле обязательно для заполнения');

Работа с асинхронными компонентами

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

// Ожидание появления элементов
cy.get('[data-testid="autocomplete-options"]', { timeout: 5000 }).should('be.visible');

// Выбор опции после подгрузки
cy.get('[data-testid="autocomplete-option"]').contains('Option 1').click();

Использование { timeout: 5000 } позволяет дождаться асинхронного появления элементов, что критично для стабильных E2E тестов.

Тестирование навигации и роутинга

Для приложений на React Router или Next.js проверка маршрутов и переходов также является частью E2E:

// Проверка начального URL
cy.url().should('include', '/login');

// Переход по кнопке
cy.get('[data-testid="login-button"]').click();
cy.url().should('include', '/dashboard');

Важно убедиться, что MUI-компоненты корректно отображаются на каждом маршруте и их состояние соответствует ожиданиям.

Визуальное тестирование компонентов MUI

Для проверки визуального соответствия используют библиотеки Percy, Cypress Image Snapshot или Playwright snapshots:

cy.get('[data-testid="card"]').toMatchImageSnapshot();

Особенно полезно при кастомизации темы MUI (ThemeProvider) и проверке различных breakpoints для адаптивного дизайна.

Использование Page Object Pattern

Для удобства масштабирования тестов и повышения читаемости рекомендуется выделять Page Object:

class LoginPage {
  visit() {
    cy.visit('/login');
  }

  fillUsername(name) {
    cy.get('[data-testid="username"]').type(name);
  }

  fillPassword(pass) {
    cy.get('[data-testid="password"]').type(pass);
  }

  submit() {
    cy.get('[data-testid="login-button"]').click();
  }
}

// Использование
const loginPage = new LoginPage();
loginPage.visit();
loginPage.fillUsername('user123');
loginPage.fillPassword('pass123');
loginPage.submit();

Page Object позволяет централизованно управлять селекторами MUI-компонентов, снижая вероятность ошибок при изменении разметки.

Рекомендации по стабильности тестов

  1. Всегда использовать data-testid или уникальные атрибуты вместо классов.
  2. Применять cy.wait только для асинхронных вызовов, иначе использовать ожидания по появлению элементов.
  3. Проверять адаптивность и визуальные изменения при изменении темы.
  4. Изолировать тесты, чтобы они не зависели друг от друга.
  5. Снимать скриншоты или видео при падении тестов для быстрого анализа.

Интеграция с CI/CD

E2E тесты должны запускаться автоматически в пайплайнах. Пример конфигурации для GitHub Actions с Cypress:

name: E2E Tests
on: [push, pull_request]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npx cypress run

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

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

Оглавление