Что такое e2e-тесты с Protractor/Cypress?angular-98

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

Protractor

import { browser, by, element } from 'protractor';

describe('App', () => {
  it('should display welcome message', async () => {
    await browser.get('/');
    const title = await element(by.css('h1')).getText();
    expect(title).toEqual('Welcome to My App!');
  });
});

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

  1. Интеграция с Angular — изначально создан для Angular, поддерживает Angular-specific селекторы (например, by.model, by.binding).
  2. Использует Selenium WebDriver — работает через браузерный драйвер, что может замедлять выполнение тестов.
  3. Поддержка Jasmine/Mocha — стандартные фреймворки для написания тестов.

Cypress

describe('Login Page', () => {
  it('should log in successfully', () => {
    cy.visit('/login');
    cy.get('#username').type('user@example.com');
    cy.get('#password').type('password');
    cy.get('form').submit();
    cy.url().should('include', '/dashboard');
  });
});

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

  1. Быстрота и надежность — работает напрямую в браузере без WebDriver.
  2. Встроенный отладчик — позволяет видеть шаги теста в реальном времени.
  3. Автоматические ожидания — не требует явных await/async.
  4. Поддержка современных фронтенд-фреймворков — не только Angular, но и React, Vue.

Ключевые отличия

Характеристика Protractor Cypress
Интеграция с Angular ✅ Нативная ⚠️ Требует настройки
Скорость выполнения ⚠️ Зависит от WebDriver ✅ Высокая
Отладка ❌ Сложная ✅ Встроенная

Когда что выбирать?

  • Protractor: Устаревшие AngularJS/Angular проекты или специфичные задачи с Selenium.
  • Cypress: Современные приложения, где важны скорость и удобство разработки тестов.

Резюмируем

e2e-тесты с Protractor/Cypress — это мощный инструмент для проверки работоспособности приложения "как у пользователя". Protractor — legacy-решение для Angular, Cypress — современная альтернатива с лучшей производительностью и UX для разработчика.

Вопросы

Собеседования