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

E2E (End-to-End) тестирование направлено на проверку работы приложения целиком — от пользовательского интерфейса до взаимодействия с серверной частью и базой данных. Для приложений на JavaScript с использованием библиотеки Element Plus ключевыми аспектами являются тестирование компонентов, взаимодействующих с DOM, и корректного отображения UI элементов, предоставляемых библиотекой.

Настройка окружения для E2E

Для E2E тестирования чаще всего применяются инструменты вроде Cypress или Playwright. Основные шаги:

  1. Установка зависимости:
npm install cypress --save-dev

или

npm install @playwright/test --save-dev
  1. Инициализация конфигурации:
npx cypress open

или

npx playwright test --init
  1. Создание структуры тестов:
/cypress
  /e2e
    login.spec.js
    form.spec.js

Тестирование компонентов Element Plus

Работа с формами и валидацией

Библиотека Element Plus предоставляет мощный набор компонентов для форм (<el-form>, <el-form-item>), включая встроенные правила валидации. В E2E тестах проверяется:

  • Отображение элементов формы.
  • Валидация полей при вводе некорректных данных.
  • Поведение кнопок при изменении состояния формы.

Пример Cypress теста для формы с полем email и кнопкой отправки:

describe('Форма логина', () => {
  it('показывает ошибку при некорректном email', () => {
    cy.visit('/login')
    cy.get('input[type="email"]').type('invalid-email')
    cy.get('button[type="submit"]').click()
    cy.contains('Введите корректный email').should('be.visible')
  })
})

Проверка модальных окон

Компоненты <el-dialog> часто используются для подтверждений действий или отображения дополнительной информации. E2E тест должен убедиться в:

  • Открытии и закрытии диалогового окна.
  • Корректной работе кнопок внутри модалки.
  • Отображении динамического контента.

Пример теста Playwright:

test('Диалог подтверждения работает корректно', async ({ page }) => {
  await page.goto('/users')
  await page.click('button#delete-user')
  await page.waitForSelector('.el-dialog__wrapper', { state: 'visible' })
  await page.click('.el-dialog__footer button.confirm')
  await expect(page.locator('text=Пользователь удалён')).toBeVisible()
})

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

Таблицы и пагинация

Компонент <el-table> с пагинацией требует проверки:

  • Корректной загрузки данных.
  • Работы сортировки и фильтров.
  • Перехода между страницами.

Пример Cypress:

cy.get('.el-table').should('exist')
cy.get('.el-table th').contains('Имя').click()
cy.get('.el-pagination .number').eq(1).click()
cy.get('.el-table tr').should('have.length.greaterThan', 0)

Выпадающие списки и селекты

Элементы <el-select> и <el-option> требуют проверки открывания списка, выбора элементов и правильного отображения выбранного значения:

cy.get('.el-select').click()
cy.get('.el-select-dropdown .el-select-option').contains('Опция 1').click()
cy.get('.el-select .el-input').should('have.value', 'Опция 1')

Работа с динамическим контентом

Для элементов, которые загружаются асинхронно (например, через API), важно:

  • Ожидать появления элементов (cy.wait(), page.waitForSelector()).
  • Проверять правильность рендеринга после получения данных.
  • Проверять обработку ошибок при некорректных ответах сервера.
cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
cy.visit('/users')
cy.wait('@getUsers')
cy.get('.el-table tr').should('have.length', 3)

Советы по устойчивости E2E тестов с Element Plus

  • Использовать селекторы по data-testid вместо классов, так как классы часто меняются при обновлениях Element Plus.
  • Избегать тестирования внутренних состояний компонентов; тестировать исключительно поведение через UI.
  • Инкапсулировать повторяющиеся действия в кастомные команды (Cypress) или функции (Playwright).
  • Проверять видимость и интерактивность элементов перед взаимодействием, чтобы снизить вероятность нестабильных тестов.

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

E2E тесты должны запускаться автоматически при сборке проекта:

  • Настройка скриптов в package.json:
"scripts": {
  "test:e2e": "cypress run"
}
  • Конфигурация CI (GitHub Actions, GitLab CI) для автоматического запуска после мержа в ветку main.
  • Отчетность через HTML отчёты или интеграцию с Allure для анализа результатов тестов.

Практические примеры

Тест кнопки загрузки данных

cy.get('button#load').click()
cy.get('.el-loading-spinner').should('exist')
cy.get('.data-item').should('have.length', 10)

Тест вкладок

cy.get('.el-tabs__header .el-tab-pane').eq(1).click()
cy.get('.el-tab-pane__content').should('contain.text', 'Содержимое второй вкладки')

Тест уведомлений

cy.get('button#notify').click()
cy.get('.el-notification').should('contain.text', 'Операция выполнена')

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

Оглавление