E2E-план критических флоу

E2E-тесты — не «протестировать всё». E2E — это 5-7 critical flows, поломка которых = потеря денег / пользователей. Всё остальное — unit + integration. Этот промт — план как выделить, написать стабильно и поставить в CI.

Продукт: {{product_context}} Текущее покрытие: {{current_coverage}}

1. Что такое critical flow

Flow = последовательность шагов от точки A до точки B, где B — bottom-line outcome.

Критичный flow:

• Если сломан — теряем revenue (signup, checkout, subscription update)
• Если сломан — теряем доверие (password recovery, contact form)
• Если сломан — теряем retention (search, key user action продукта)

Не критичный: страничка About, footer link, change theme. Покрывай unit-тестами / accessibility-проверками, не E2E.

2. Top 7 для типичного продукта

Adapt под {{product_context}}:

Для конкретного продукта добавь 2-3 product-specific (например, для SaaS: invite team member, для e-commerce: add to cart + apply coupon).

3. Tool choice

Default: Playwright для большинства случаев в 2025+.

4. Test структура (для каждого flow)

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

test.describe('signup flow', () => {
  test('happy path: new user can sign up and reach dashboard', async ({ page }) => {
    // 1. Setup — clean state
    const email = `test+${Date.now()}@example.com`;

    // 2. Action — действия пользователя
    await page.goto('/signup');
    await page.getByLabel('Email').fill(email);
    await page.getByLabel('Password').fill('Test12345!');
    await page.getByRole('button', { name: 'Sign up' }).click();

    // 3. Assert — что должно произойти
    await expect(page).toHaveURL(/\/onboarding/);
    await expect(page.getByText(/welcome/i)).toBeVisible();

    // 4. Cleanup (если нужно)
    // ...
  });

  test('rejects invalid email', async ({ page }) => { /* ... */ });
  test('rejects weak password', async ({ page }) => { /* ... */ });
});

Принципы:

• One assert per concern — не пытайся проверить всё в одном test
• Test-IDs или semantic selectors (getByRole, getByLabel) — не CSS-классы (ломаются при refactoring)
• No waitForTimeout() — используй waitFor* методы что синкаются с реальным state
• Fresh state per test — каждый test изолирован (новый user, очищенная корзина)

5. Mocking external dependencies

Какие dep'ы mock'ать:

• Stripe / payment — Stripe test mode + test cards (не реальные)
• Email — Mailosaur / MailHog / dev-only mailbox API
• Auth providers (Google OAuth, etc) — test users в provider или local mock
• External APIs (geo, maps, currency) — fixture responses
• Random / time — Date.now mock, deterministic seeds

Какие НЕ mock'ать:

• Собственная DB — используй test environment с очисткой между прогонами
• Собственный backend — это часть того что тестируешь
• Frontend assets / CDN — реальные, иначе тестируешь не то

6. Стабильность (anti-flakiness)

Flaky tests — главная причина «E2E не работает». Lock down:

• Network requests: page.route('**/api/**', ...) для контроля API в тестах
• Animations: prefers-reduced-motion или @media (prefers-reduced-motion) override
• Fonts: жди document.fonts.ready перед screenshot assertions
• Stable selectors: data-testid="user-menu" лучше чем .css-xyz123 (Tailwind hash меняется)
• Retry strategy: 2 retries в CI (Playwright default), 0 локально
• Timeout strategy: 30s default, 60s для slow flows (checkout); НЕ 5min на тест (это паттерн «забили на flakiness»)

7. CI integration

GitHub Actions example:

name: E2E
on: [pull_request]
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npx playwright install --with-deps chromium
      - run: npm run build
      - run: npm run start &
      - run: npx wait-on http://localhost:3000
      - run: npx playwright test
        env:
          BASE_URL: http://localhost:3000
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Запуск:

• На каждый PR — happy paths для всех 7 flows
• На main после merge — полный набор включая edge cases
• Раз в день в cron — полный + against production (smoke на prod)

8. Anti-patterns

• ❌ E2E на 200 тестов — медленно, flaky, дольше unit; ограничь 5-7 critical
• ❌ page.waitForTimeout(5000) — magic numbers; используй semantic waits
• ❌ CSS-classes как selectors — рефакторинг ломает
• ❌ Один большой test «signup, login, checkout, logout» — если падает на шаге 3, не знаешь почему
• ❌ Тестировать UI вёрстку через E2E — это работа visual regression (Chromatic / Percy), не E2E
• ❌ Тестировать backend logic через E2E — это integration-test job, E2E медленнее в 10 раз
• ❌ Skip retries «у нас стабильные тесты» — пока не flakiness, retry безопасный страховщик
• ❌ Тесты не запускаются в CI — пишешь и не запускаешь = бесполезно
• ❌ Один shared user / fixture — race conditions при parallelism; user-per-test
• ❌ Mock'ать собственный backend — теряешь contract validation, тестируешь не product

9. Output

1. Список 5-7 critical flows с обоснованием почему именно эти
2. Test файлы (tests/e2e/*.spec.ts) для каждого flow с 1-3 cases
3. Playwright config (playwright.config.ts) с base URL, retries, reporters
4. CI workflow (.github/workflows/e2e.yml) с правильным caching
5. Метрика: время на полный прогон (target <5 минут), flakiness rate за неделю (target <1%)