Как вы тестируете веб-приложение комплексно?

Комплексное тестирование веб-приложения охватывает все уровни и аспекты:

1. Пирамида тестирования:

        ▲
        │
   E2E тесты (5-10%)    ← Ручное исследовательское тестирование
        │
   Интеграционные тесты (15-20%)
        │
   Юнит-тесты (70-80%)  ← Статический анализ (ESLint, TypeScript)
        ▼

2. Критические user flows (E2E тестирование):

// Пример с Cypress
describe('Checkout Flow', () => {
  it('completes purchase successfully', () => {
    cy.visit('/products');
    cy.get('[data-testid="product-card"]').first().click();
    cy.get('[data-testid="add-to-cart"]').click();
    cy.get('[data-testid="cart-icon"]').click();
    cy.contains('Checkout').click();

    // Заполнение формы
    cy.get('[data-testid="email"]').type('test@example.com');
    cy.get('[data-testid="card-number"]').type('4242424242424242');

    // Mock API ответа
    cy.intercept('POST', '/api/payment', {
      statusCode: 200,
      body: { success: true, orderId: '123' }
    }).as('paymentRequest');

    cy.get('[data-testid="submit-payment"]').click();
    cy.wait('@paymentRequest');
    cy.contains('Order Confirmed').should('be.visible');
  });
});

3. Accessibility тестирование:

• Screen readers (NVDA, VoiceOver) – семантическая разметка
• Keyboard navigation – tab order, focus management
• WCAG 2.1 AA – контрастность, ARIA-атрибуты
• axe-core для автоматической проверки:

  
  import { axe, toHaveNoViolations } from 'jest-axe';
  expect.extend(toHaveNoViolations);

it('should have no accessibility violations', async () => { const html = render(); const results = await axe(html); expect(results).toHaveNoViolations(); });

**4. Производительность фронтенда:**
- **Core Web Vitals** (LCP, FID, CLS)
- **Bundle analysis** – размер JavaScript бандлов
- **Memory leaks** – профилирование в Chrome DevTools

**5. Межбраузерное тестирование:**
```yaml
# Конфигурация Playwright
projects: [
  {
    name: 'chromium',
    use: { browserName: 'chromium' },
  },
  {
    name: 'firefox',
    use: { browserName: 'firefox' },
  },
  {
    name: 'webkit',
    use: { browserName: 'webkit' },
  },
]

6. Тестирование в различных условиях:

• Оффлайн режим – Service Workers
• Медленные сети (3G throttling)
• Различные локали – RTL languages, форматирование дат

7. Визуальное регрессионное тестирование:

// Percy/Chromatic для визуальных снэпшотов
describe('Button Component', () => {
  it('renders correctly', () => {
    mount(<Button variant="primary">Click me</Button>);
    cy.percySnapshot('Primary Button');
  });
});