Сетевой перехват и мокирование в Playwright

+-----------------------------------------------------------------------------+
|             Старый подход (Monkey Patching в runtime страницы)             |
|                                                                             |
|  DOM Window -> [window.fetch Override] -> Возврат Promise.resolve()        |
|  (Service Worker, Fonts, Image Tags, Beacons — НЕ ПЕРЕХВАТЫВАЮТСЯ)          |
+-----------------------------------------------------------------------------+

+-----------------------------------------------------------------------------+
|             Playwright 2026: Сетевой перехват на уровне движка              |
|                                                                             |
|  DOM / Worker / Service Worker / Tags                                       |
|       │                                                                     |
|       ▼                                                                     |
|  [Браузерный сетевой сокет (Chromium Network Stack / WebKit LibWebSockets)] |
|       │                                                                     |
|       ▼ (Событие CDP: Fetch.requestPaused / WebSocket Frame)                |
|  [Playwright Route Interceptor: page.route() / context.route()]             |
|       │                                                                     |
|       ├──► route.fulfill()  ──► Инжекция синтетического HTTP-ответа         |
|       ├──► route.abort()    ──► Физический обрыв сокета (Connection Reset)  |
|       ├──► route.continue() ──► Пропуск запроса во внешнюю сеть             |
|       └──► route.fetch()    ──► Запрос на реальный сервер с модификацией    |
+-----------------------------------------------------------------------------+

+--------------------------------+
                    |    Браузер инициирует HTTP     |
                    |    запрос GET /api/v1/user     |
                    +--------------------------------+
                                    │
                                    ▼
                    +--------------------------------+
                    |  Срабатывает фильтр паттерна   |
                    |  page.route('**/api/v1/**', r) |
                    +--------------------------------+
                                    │
               ┌────────────────────┼────────────────────┐
               ▼                    ▼                    ▼
     +-------------------+ +------------------+ +------------------+
     |  route.fulfill()  | |  route.abort()   | | route.continue() |
     +-------------------+ +------------------+ +------------------+
     | Синтезирует ответ | | Обрывает сокет на| | Пропускает пакет |
     | прямо в памяти    | | уровне сетевого  | | на реальный      |
     | Node.js: status,  | | драйвера         | | сервер бекенда   |
     | headers, json     | | (Network Error)  | | без изменений    |
     +-------------------+ +------------------+ +------------------+
               │                    │                    │
               ▼                    ▼                    ▼
     +-------------------------------------------------------------+
     |            Рендерер браузера получает результат            |
     +-------------------------------------------------------------+

interface Route {
  /** Возврат синтетического ответа клиенту */
  fulfill(options?: {
    status?: number;
    headers?: Record<string, string>;
    contentType?: string;
    body?: string | Buffer;
    json?: unknown;
    response?: APIResponse;
  }): Promise<void>;

  /** Пропуск запроса на реальный сервер с возможной подменой заголовков или метода */
  continue(options?: {
    url?: string;
    method?: string;
    headers?: Record<string, string>;
    postData?: string | Buffer;
  }): Promise<void>;

  /** Имитация сетевого сбоя на транспортном уровне */
  abort(errorCode?: 
    | 'aborted'
    | 'accessdenied'
    | 'addressunreachable'
    | 'blockedbyclient'
    | 'connectionaborted'
    | 'connectionclosed'
    | 'connectionfailed'
    | 'connectionrefused'
    | 'connectionreset'
    | 'internetdisconnected'
    | 'nameNotResolved'
    | 'timedout'
  ): Promise<void>;

  /** Выполнение реального сетевого запроса из Node.js с последующей модификацией ответа */
  fetch(options?: {
    url?: string;
    method?: string;
    headers?: Record<string, string>;
    postData?: string | Buffer;
  }): Promise<APIResponse>;
}

import { test, expect } from '@playwright/test';

test('пользователь видит информативный баннер при сбое платежного шлюза', async ({ page }) => {
  // 1. ВАЖНО: Регистрируем перехватчик ДО навигации на страницу
  await page.route('**/api/v1/payments/charge', async (route) => {
    // Верифицируем метод входящего запроса
    expect(route.request().method()).toBe('POST');

    // Возвращаем контролируемую 500 ошибку с JSON-структурой бекенда
    await route.fulfill({
      status: 500,
      contentType: 'application/json',
      json: {
        success: false,
        errorCode: 'GATEWAY_TIMEOUT',
        message: 'Платежный шлюз временно недоступен. Средства не списаны.',
      },
      headers: {
        'x-mocked-by': 'playwright-e2e',
      },
    });
  });

  await page.goto('/checkout/payment');

  // Заполняем форму и нажимаем кнопку оплаты
  await page.getByRole('button', { name: 'Оплатить 9 900 ₽' }).click();

  // Проверяем, что интерфейс корректно отобразил сообщение об ошибке, а не упал в белый экран
  const errorAlert = page.getByRole('alert');
  await expect(errorAlert).toBeVisible();
  await expect(errorAlert).toContainText('Платежный шлюз временно недоступен');

  // Убеждаемся, что кнопка оплаты снова стала доступна для повторной попытки
  await expect(page.getByRole('button', { name: 'Оплатить 9 900 ₽' })).toBeEnabled();
});

import { test, expect } from '@playwright/test';

test('интерфейс отображает AI-ассистента, если включен экспериментальный флаг', async ({ page }) => {
  await page.route('**/api/v1/user/features', async (route) => {
    // 1. Выполняем реальный сетевой запрос к серверу через Playwright
    const response = await route.fetch();
    const originalJson = (await response.json()) as { features: Record<string, boolean> };

    // 2. Модифицируем payload "на лету"
    const modifiedJson = {
      ...originalJson,
      features: {
        ...originalJson.features,
        experimentalAiCopilot: true, // Включаем флаг
      },
    };

    // 3. Отдаем клиенту модифицированный ответ со статусом и заголовками реального сервера
    await route.fulfill({
      response,
      json: modifiedJson,
    });
  });

  await page.goto('/editor');

  // Проверяем появление плавающей панели AI Copilot
  await expect(page.getByTestId('ai-copilot-panel')).toBeVisible();
});

import { test, expect } from '@playwright/test';

test('приложение сохраняет черновик статьи в IndexedDB при внезапном отключении сети', async ({
  page,
  context,
}) => {
  await page.goto('/articles/new');
  await page.getByLabel('Заголовок статьи').fill('Архитектура распределенных систем 2026');
  await page.getByRole('textbox', { name: 'Контент' }).fill('Текст черновика статьи...');

  // 1. Физически переводим браузерный контекст в оффлайн-режим
  await context.setOffline(true);

  // Нажимаем "Сохранить черновик"
  await page.getByRole('button', { name: 'Сохранить черновик' }).click();

  // 2. Интерфейс должен отобразить индикатор работы без сети
  await expect(page.getByText('Оффлайн-режим: черновик сохранен локально')).toBeVisible();

  // Перезагружаем страницу в оффлайне (Service Worker должен отдать закэшированный shell)
  await page.reload();

  // 3. Данные не должны потеряться
  await expect(page.getByLabel('Заголовок статьи')).toHaveValue('Архитектура распределенных систем 2026');

  // 4. Восстанавливаем соединение
  await context.setOffline(false);
  await expect(page.getByText('Синхронизировано с облаком')).toBeVisible({ timeout: 5_000 });
});

import { test, expect } from '@playwright/test';
import path from 'path';

test.describe('Каталог с воспроизведением сети из HAR-архива', () => {
  test.beforeEach(async ({ context }) => {
    // 1. Глобальная блокировка внешних трекеров и аналитики на уровне контекста
    await context.route(
      /(googletagmanager|google-analytics|hotjar|segment|datadoghq)\.com/,
      (route) => route.abort('blockedbyclient')
    );
  });

  test('быстрый детерминированный рендеринг каталога из сетевого архива', async ({ page }) => {
    // 2. Воспроизведение сетевых ответов из файла HAR
    // update: false — только чтение архива; notFound: 'abort' — запрет не записанных запросов
    await page.routeFromHAR(path.join(__dirname, '../__fixtures__/catalog-network.har'), {
      url: '**/api/v1/catalog/**',
      update: false,
      notFound: 'abort',
    });

    await page.goto('/shop');

    // Проверяем отображение каталога товаров (ответы приходят из локального HAR за 1-2 мс)
    const items = page.getByRole('listitem');
    await expect(items).toHaveCount(12);
  });
});