Альтернативы Protractor 2026: Сравнение Современных Инструментов Тестирования Angular

// Playwright автоматически ждёт:
// - Элемент становится видимым
// - Элемент становится активным
// - Сетевые запросы завершаются
await page.click('[data-testid="submit-btn"]');

// Явные ожидания не нужны в 90% случаев
// Сравни с постоянными browser.wait() в Protractor

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    // Мобильные viewports
    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } },
  ],
});

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,

  use: {
    baseURL: 'http://localhost:4200',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },

  // Запуск Angular dev сервера
  webServer: {
    command: 'npm run start',
    port: 4200,
    reuseExistingServer: !process.env.CI,
    timeout: 120000,
  },
});

// e2e/checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Оформление заказа', () => {
  test.beforeEach(async ({ page }) => {
    // Логин один раз на файл тестов
    await page.goto('/login');
    await page.fill('[formControlName="email"]', 'test@example.com');
    await page.fill('[formControlName="password"]', 'password123');
    await page.click('button[type="submit"]');
    await page.waitForURL('/dashboard');
  });

  test('завершить покупку с валидной картой', async ({ page }) => {
    await page.goto('/cart');
    await page.click('[data-testid="checkout-btn"]');

    // Заполнение формы доставки (Angular reactive forms)
    await page.fill('[formControlName="firstName"]', 'Иван');
    await page.fill('[formControlName="lastName"]', 'Петров');
    await page.fill('[formControlName="address"]', 'ул. Пушкина 123');
    await page.fill('[formControlName="city"]', 'Москва');
    await page.selectOption('[formControlName="state"]', 'MOW');
    await page.fill('[formControlName="zip"]', '101000');

    await page.click('[data-testid="continue-to-payment"]');

    // Оплата (работа с iframe)
    const stripeFrame = page.frameLocator('iframe[name="stripe-card"]');
    await stripeFrame.locator('[name="cardnumber"]').fill('4242424242424242');
    await stripeFrame.locator('[name="exp-date"]').fill('12/28');
    await stripeFrame.locator('[name="cvc"]').fill('123');

    await page.click('[data-testid="place-order"]');

    // Проверка успеха
    await expect(page.locator('.order-confirmation')).toBeVisible();
    await expect(page.locator('.order-number')).toContainText('ORD-');
  });

  test('показать ошибки валидации для пустой формы', async ({ page }) => {
    await page.goto('/checkout');
    await page.click('[data-testid="continue-to-payment"]');

    // Сообщения об ошибках Angular Material
    await expect(page.locator('mat-error')).toHaveCount(5);
    await expect(page.locator('mat-error').first()).toContainText('обязательно');
  });
});

// user-card.component.cy.ts
import { UserCardComponent } from './user-card.component';

describe('UserCardComponent', () => {
  it('отображает информацию о пользователе корректно', () => {
    cy.mount(UserCardComponent, {
      componentProperties: {
        user: { name: 'Иван Петров', email: 'ivan@example.com', role: 'Admin' }
      }
    });

    cy.get('.user-name').should('contain', 'Иван Петров');
    cy.get('.user-role').should('contain', 'Admin');
  });

  it('отправляет событие при клике на редактирование', () => {
    const onEditSpy = cy.spy().as('onEditSpy');

    cy.mount(UserCardComponent, {
      componentProperties: {
        user: { name: 'Иван', email: 'ivan@example.com' },
        onEdit: onEditSpy
      }
    });

    cy.get('[data-cy="edit-btn"]').click();
    cy.get('@onEditSpy').should('have.been.calledOnce');
  });
});

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    supportFile: 'cypress/support/e2e.ts',
    specPattern: 'cypress/e2e/**/*.cy.ts',
    viewportWidth: 1280,
    viewportHeight: 720,
    video: false,
    screenshotOnRunFailure: true,

    setupNodeEvents(on, config) {
      require('@cypress/code-coverage/task')(on, config);
      return config;
    },
  },

  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    specPattern: '**/*.cy.ts',
  },
});

// cypress/e2e/products.cy.ts
describe('Каталог продуктов', () => {
  beforeEach(() => {
    // Мокируем ответы API для детерминированных тестов
    cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');
    cy.intercept('GET', '/api/categories', { fixture: 'categories.json' }).as('getCategories');

    cy.visit('/products');
    cy.wait(['@getProducts', '@getCategories']);
  });

  it('фильтрует продукты по категории', () => {
    cy.get('[data-cy="category-filter"]').select('Электроника');

    cy.get('[data-cy="product-card"]')
      .should('have.length', 5)
      .first()
      .should('contain', 'Ноутбук');
  });

  it('добавляет продукт в корзину с оптимистичным UI', () => {
    cy.intercept('POST', '/api/cart', {
      statusCode: 200,
      body: { success: true, cartId: 'cart-123' }
    }).as('addToCart');

    cy.get('[data-cy="add-to-cart"]').first().click();

    // Проверяем оптимистичное обновление
    cy.get('[data-cy="cart-count"]').should('contain', '1');

    // Проверяем что API был вызван
    cy.wait('@addToCart').its('request.body').should('have.property', 'productId');
  });

  it('корректно обрабатывает ошибки API', () => {
    cy.intercept('POST', '/api/cart', {
      statusCode: 500,
      body: { error: 'Server error' }
    }).as('addToCartError');

    cy.get('[data-cy="add-to-cart"]').first().click();

    cy.get('[data-cy="error-toast"]')
      .should('be.visible')
      .and('contain', 'Не удалось добавить товар');
  });
});

// Protractor (до)
element(by.css('[data-test="login"]')).click();
expect(element(by.css('.welcome')).getText()).toEqual('Welcome');

// WebdriverIO (после) — почти идентично
await $('[data-test="login"]').click();
await expect($('.welcome')).toHaveText('Welcome');

// wdio.conf.js
exports.config = {
  // ... другая конфигурация

  before: async function() {
    // Ожидание стабилизации Angular
    await browser.executeAsync((done) => {
      if (window.getAllAngularTestabilities) {
        const testabilities = window.getAllAngularTestabilities();
        let pending = testabilities.length;
        testabilities.forEach(t => {
          t.whenStable(() => {
            pending--;
            if (pending === 0) done();
          });
        });
      } else {
        done();
      }
    });
  }
};

// wdio.conf.js
exports.config = {
  framework: 'mocha', // или 'jasmine' или 'cucumber'
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000
  }
};

// test/specs/user-management.spec.ts
describe('Управление пользователями', () => {
  before(async () => {
    await browser.url('/admin/login');
    await $('#username').setValue('admin@example.com');
    await $('#password').setValue('adminpass');
    await $('button[type="submit"]').click();
    await browser.waitUntil(
      async () => (await browser.getUrl()).includes('/admin/dashboard'),
      { timeout: 10000 }
    );
  });

  it('должен создать нового пользователя', async () => {
    await browser.url('/admin/users');
    await $('[data-test="add-user-btn"]').click();

    // Заполняем Angular форму
    await $('[formControlName="name"]').setValue('Новый пользователь');
    await $('[formControlName="email"]').setValue('newuser@example.com');
    await $('[formControlName="role"]').selectByVisibleText('Редактор');

    await $('[data-test="save-user-btn"]').click();

    // Ожидаем обновление Angular
    await browser.pause(500);

    // Проверяем
    await expect($('.success-message')).toBeDisplayed();
    await expect($('.user-list')).toHaveTextContaining('newuser@example.com');
  });

  it('должен валидировать формат email', async () => {
    await browser.url('/admin/users/new');

    await $('[formControlName="email"]').setValue('invalid-email');
    await $('[formControlName="name"]').click(); // Триггерим blur

    await expect($('mat-error')).toHaveText('Введите корректный email');
  });
});

# Установи новый фреймворк рядом с Protractor
npm install --save-dev @playwright/test
# или
npm install --save-dev cypress
# или
npm install --save-dev webdriverio @wdio/cli

# Создай новую директорию для тестов
mkdir e2e-new

// package.json
{
  "scripts": {
    "test:e2e:legacy": "protractor protractor.conf.js",
    "test:e2e:new": "playwright test",
    "test:e2e:all": "npm run test:e2e:legacy && npm run test:e2e:new"
  }
}

# Только после 100% покрытия в новом фреймворке
npm uninstall protractor
rm -rf protractor.conf.js
rm -rf e2e-legacy/

// Protractor (вход для AI)
it('should filter results', async () => {
  await browser.get('/search');
  await element(by.model('query')).sendKeys('angular');
  await element(by.css('.search-btn')).click();
  await browser.wait(EC.presenceOf(element(by.css('.results'))), 5000);
  expect(await element.all(by.css('.result-item')).count()).toBeGreaterThan(0);
});

// Playwright (выход AI, проверенный человеком)
test('should filter results', async ({ page }) => {
  await page.goto('/search');
  await page.fill('[ng-model="query"]', 'angular');
  await page.click('.search-btn');
  await expect(page.locator('.results')).toBeVisible();
  await expect(page.locator('.result-item')).not.toHaveCount(0);
});