End-to-end тестирование

End-to-end (E2E) тестирование проверяет работу приложения целиком, включая взаимодействие компонентов, маршрутизации и сервисов. В Angular стандартным инструментом для E2E является Cypress или Protractor (хотя Protractor устарел и часто заменяется на Cypress).

Структура E2E теста

E2E тесты находятся в отдельной папке e2e и обычно включают:

  • spec-файлы — описывают конкретные сценарии.
  • page-objects — абстракция страниц для удобного взаимодействия с элементами.
  • конфигурационный файл — задаёт базовый URL, таймауты и браузеры для запуска.

Пример базового Cypress теста:

describe('Главная страница', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('отображает заголовок приложения', () => {
    cy.get('h1').should('contain.text', 'Добро пожаловать');
  });

  it('переход к странице о нас', () => {
    cy.get('a[href="/about"]').click();
    cy.url().should('include', '/about');
    cy.get('h2').should('contain.text', 'О нас');
  });
});

Проверка динамических данных

Для Angular важно учитывать асинхронные операции, например загрузку данных через HTTP. Cypress поддерживает ожидание элементов с использованием cy.wait() или cy.intercept() для подмены API-ответов:

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers');
cy.get('.user-item').should('have.length', 3);

Советы по надёжности тестов

  • Избегать жёстких таймаутов, использовать ожидания элементов.
  • Разделять тесты на независимые сценарии, чтобы ошибка в одном не ломала другие.
  • Применять page-objects для повторного использования логики работы с DOM.
  • Использовать мок-серверы для стабилизации данных.

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

E2E тесты интегрируются в pipeline для автоматического запуска на каждом коммите. Cypress поддерживает Headless режим, позволяющий запускать тесты без GUI, что ускоряет проверку и экономит ресурсы:

npx cypress run --headless --browser chrome

Такой подход обеспечивает постоянный контроль качества интерфейса и предотвращает регрессии в функционале приложения.

Оглавление