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

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

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

npm install cypress --save-dev

Для интеграции с Ant Design важно учитывать, что многие компоненты используют асинхронные анимации и динамическое отображение элементов. Поэтому в настройках Cypress следует включить timeouts и использовать команды ожидания элементов:

cy.get('.ant-modal').should('be.visible');
cy.get('.ant-btn-primary').click();

Тестирование компонентов формы

Компоненты формы в Ant Design (Form, Input, Select, Checkbox, Radio) требуют особого внимания при E2E тестировании, так как они часто управляются внутренним состоянием React.

Input и TextArea

cy.get('input[name="username"]')
  .type('admin')
  .should('have.value', 'admin');

cy.get('textarea[name="description"]')
  .type('Тестовое описание')
  .should('contain.value', 'Тестовое описание');

Особенности:

  • Использование .type() для ввода текста.
  • Проверка состояния через .should('have.value', ...).
  • При динамическом отображении Input внутри модального окна необходимо дождаться появления модального окна.

Select

cy.get('.ant-select').click();
cy.get('.ant-select-item-option')
  .contains('Опция 1')
  .click();

cy.get('.ant-select-selection-item').should('contain.text', 'Опция 1');

Особенности:

  • Выпадающие списки Ant Design создаются в отдельном DOM-слое (portal), поэтому важно выбирать элементы через их глобальный селектор.
  • Для тестирования мультиселектов используется комбинация .click() и .contains() для выбора нескольких опций.

Checkbox и Radio

cy.get('.ant-checkbox-input').check().should('be.checked');
cy.get('.ant-radio-input').check().should('be.checked');

Особенности:

  • Проверка состояния с помощью .should('be.checked').
  • Для Radio необходимо удостовериться, что выбран именно один вариант в группе.

Модальные окна и диалоги

Компонент Modal требует контроля за асинхронным появлением и исчезновением:

cy.get('.ant-modal').should('exist');
cy.get('.ant-modal .ant-btn-primary').click();
cy.get('.ant-modal').should('not.exist');

Ключевые моменты:

  • Использование .should('exist') и .should('not.exist') гарантирует, что тест корректно учитывает анимацию закрытия.
  • Для модальных окон с формами рекомендуется дождаться загрузки всех внутренних элементов перед взаимодействием.

Проверка таблиц и списков

Ant Design Table и List часто содержат динамические данные. E2E тесты должны учитывать задержку загрузки данных и виртуализацию строк.

cy.get('.ant-table-row').should('have.length.greaterThan', 0);
cy.get('.ant-table-cell').contains('Иванов').should('exist');

Особенности:

  • Использование contains() удобно для поиска конкретной строки по тексту.
  • Для виртуализированных таблиц нужно прокручивать таблицу или использовать специальные селекторы, так как некоторые строки изначально не рендерятся в DOM.

Интерфейсные уведомления

Компоненты message, notification и Tooltip в Ant Design имеют встроенные таймауты и анимацию. Для их тестирования используют cy.wait() или специальные команды ожидания появления элемента:

cy.get('.ant-message-notice').should('be.visible');
cy.get('.ant-message-notice').contains('Успешно сохранено');

Особенности:

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

Работа с Tabs и Collapse

Компоненты навигации и скрываемого контента (Tabs, Collapse) требуют проверки состояния активного элемента и отображаемого контента:

cy.get('.ant-tabs-tab').contains('Профиль').click();
cy.get('.ant-tabs-content-holder .ant-tab-pane-active')
  .should('contain.text', 'Информация о пользователе');

cy.get('.ant-collapse-header').click();
cy.get('.ant-collapse-content').should('be.visible');

Особенности:

  • .ant-tab-pane-active определяет активную вкладку.
  • Для компонентов Collapse важно дождаться раскрытия контента перед проверкой текста.

Настройка стабильности E2E тестов

Ant Design активно использует анимации, что может приводить к нестабильности тестов. Для повышения стабильности:

  1. Отключение анимаций в тестовом окружении:
import { ConfigProvider } fr om 'antd';
import 'antd/dist/reset.css';

  1. Использование явных ожиданий:

    • .should('be.visible')
    • .should('exist')
    • .wait() только при крайней необходимости.

  2. Проверка состояния компонентов вместо DOM-свойств:

    • Например, проверять .should('have.class', 'ant-checkbox-checked') вместо сложного поиска input.

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

E2E тесты для Ant Design удобно запускать в CI/CD системах:

npx cypress run --headless --browser chrome

Рекомендации:

  • Использовать headless режим для ускорения прогонов.
  • Настроить отдельный тестовый сервер с моками API для стабильного поведения таблиц и форм.
  • Генерировать скриншоты и видео прогонов для диагностики ошибок UI.

Применение Page Object Pattern

Для крупных приложений с Ant Design рекомендуется использовать Page Object Pattern, чтобы тесты оставались читаемыми и поддерживаемыми.

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

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

  fillPassword(pass) {
    cy.get('input[name="password"]').type(pass);
  }

  submit() {
    cy.get('.ant-btn-primary').click();
  }
}

Преимущества:

  • Изоляция логики взаимодействия с компонентами.
  • Легкая адаптация при изменении селекторов Ant Design.
  • Повышение читаемости и повторного использования тестов.
Оглавление