Как использовать DevTools для подмены сетевого трафика?

«Как использовать DevTools для подмены сетевого трафика?» — вопрос из категории Веб-тестирование, который задают на 10% собеседований QA Тестировщик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, использовал. Инструменты разработчика в браузере (Chrome DevTools, Firefox Developer Tools) предоставляют несколько мощных методов для подмены трафика, что критически важно для тестирования фронтенда и API.

Основные методы подмены трафика:

  1. Edit and Resend (Network tab):

    • Вкладка Network → выберите запрос → Edit and Resend.
    • Модифицируйте заголовки, тело запроса, метод и отправьте заново.
      
      # Исходный запрос
      GET /api/user/1

    Измененный запрос

    GET /api/user/99999 # Проверка обработки несуществующего ID

  2. Overrides (Sources tab):

    • Вкладка SourcesOverrides → включите и выберите папку для локальных файлов.
    • Найдите файл (например, .js или .json) в дереве Page, щелкните правой кнопкой → Save for overrides.
    • Отредактируйте файл локально — браузер будет загружать вашу версию.
      
      // Подмена ответа API в mock-файле
      // original_api_response.js
      fetch('/api/data').then(r => r.json());

    // override_api_response.js export const mockData = { status: 'test', value: 42 };

  3. Request Blocking (Network tab):

    • Щелкните правой кнопкой по запросу → Block request URL.
    • Полезно для проверки отказоустойчивости при недоступности ресурсов.
  4. Local Overrides для ответов (Chrome):

    • Вкладка Network → выберите запрос → вкладка Response.
    • Нажмите {} для pretty-print, затем Save for overrides и отредактируйте JSON/HTML.

Практические сценарии использования:

  • Тестирование обработки ошибок:

    // Подмена успешного ответа на ошибку 500
    // Используя Overrides или расширение (например, Requestly)
    if (request.url.includes('/api/payment')) {
    request.respondWith({
      status: 500,
      body: JSON.stringify({ error: 'Internal Server Error' })
    });
    }
  • Эмуляция различных состояний API:

    • Подмена ответов с пустыми данными, некорректными форматами, большими объемами данных.
  • Изменение заголовков:

    • Добавление/удаление заголовков (например, Authorization, Content-Type) для тестирования валидации.
  • Throttling (вкладка Network → Throttling):

    • Эмуляция медленных сетей (3G, Slow 3G) для проверки поведения приложения.

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

  • Быстрота: изменения применяются мгновенно без перезагрузки сервера.
  • Гибкость: можно тестировать edge-кейсы, которые сложно воспроизвести на бэкенде.
  • Интеграция: работает в связке с другими инструментами отладки (Console, Debugger).

Ограничения:

  • Не подходит для тестирования реального взаимодействия клиент-сервер в продакшене.
  • Подмена сложна для WebSocket-трафика или запросов с certificate pinning.