Интерсепт запросов с cy.intercept()

cy.intercept() — мощный инструмент для перехвата HTTP-запросов и управления ими в тестах. Он позволяет контролировать поведение сети: подменять ответы, проверять отправленные данные, задерживать или блокировать запросы. Использование cy.intercept() значительно повышает надёжность тестов, делая их независимыми от внешних сервисов.

Синтаксис

cy.intercept([method], url, [response])
  • method (необязательный) — HTTP-метод (GET, POST, PUT, DELETE и др.). Если не указан, перехватываются все методы.
  • url — строка, регулярное выражение или объект с параметрами запроса.
  • response (необязательный) — объект, функцию или alias для подмены ответа сервера.

Пример перехвата GET-запроса:

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');

Здесь все запросы к /api/users будут возвращать локальный fixture users.json, а alias @getUsers позволяет ссылаться на перехваченный запрос в дальнейшем.

Проверка и ожидание запросов

Использование alias позволяет легко проверять, что запрос был выполнен и корректно обработан:

cy.wait('@getUsers').its('response.statusCode').should('eq', 200);
  • cy.wait() ожидает выполнения перехваченного запроса.
  • its('response.statusCode') позволяет проверить HTTP-статус ответа.

Подмена ответа динамически

cy.intercept() поддерживает функцию обратного вызова для динамической подмены ответа:

cy.intercept('POST', '/api/login', (req) => {
  if (req.body.username === 'admin') {
    req.reply({ statusCode: 200, body: { token: 'fake-token' } });
  } else {
    req.reply({ statusCode: 401, body: { error: 'Unauthorized' } });
  }
}).as('loginRequest');
  • req содержит информацию о запросе: тело, заголовки, параметры.
  • req.reply() позволяет изменить статус, тело и заголовки ответа.

Перехват всех запросов к домену

Можно использовать регулярные выражения или шаблоны URL для перехвата множества запросов:

cy.intercept('GET', /\/api\/.*/).as('allApiCalls');

Все GET-запросы, начинающиеся с /api/, будут перехвачены и доступны через alias @allApiCalls.

Проверка отправленных данных

cy.intercept() позволяет проверять содержимое запроса:

cy.intercept('POST', '/api/orders').as('createOrder');

cy.get('form').submit();

cy.wait('@createOrder').then((interception) => {
  expect(interception.request.body).to.have.property('productId', 123);
});
  • interception.request.body содержит тело отправленного запроса.
  • Проверка данных помогает убедиться, что фронтенд корректно формирует запросы.

Симуляция ошибок и задержек

Для тестирования обработки ошибок или медленных соединений можно подменять статус и добавлять задержку:

cy.intercept('GET', '/api/users', {
  statusCode: 500,
  body: { error: 'Server error' },
  delayMs: 2000
}).as('getUsersError');
  • statusCode изменяет HTTP-статус.
  • body задаёт тело ответа.
  • delayMs эмулирует задержку сети.

Использование fixture для тестовых данных

Fixtures позволяют хранить тестовые данные в отдельных файлах и возвращать их при перехвате запросов:

cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');
  • Файл cypress/fixtures/products.json содержит JSON-массив с продуктами.
  • Это обеспечивает предсказуемость тестов и изоляцию от внешних API.

Ограничение перехвата по заголовкам или query-параметрам

Можно фильтровать запросы по дополнительным условиям:

cy.intercept({
  method: 'GET',
  url: '/api/users',
  headers: { 'x-custom-header': 'test' },
  query: { role: 'admin' }
}, { fixture: 'admin-users.json' }).as('getAdminUsers');
  • Объект конфигурации позволяет задать метод, URL, заголовки и query-параметры.
  • Только запросы, полностью соответствующие условиям, будут перехвачены.

Сценарии комбинирования cy.intercept() и UI-тестирования

  1. Загрузка данных при рендере страницы:

    • Перехватить GET-запрос к API.
    • Подставить фиктивные данные через fixture.
    • Проверить, что компоненты отобразили правильную информацию.

  2. Формы и отправка данных:

    • Перехватить POST-запрос.
    • Проверить, что тело запроса соответствует заполненным полям формы.
    • Симулировать успешный или ошибочный ответ для проверки уведомлений UI.

  3. Обработка ошибок и таймаутов:

    • Перехватить запрос с delayMs и статусом ошибки.
    • Проверить, что приложение корректно отображает индикатор загрузки и сообщения об ошибке.

Лучшие практики

  • Использовать alias для всех перехваченных запросов, чтобы легко ссылаться на них в cy.wait().
  • Предпочитать fixture для статических тестовых данных, это упрощает поддержку тестов.
  • Проверять и тело запроса, и ответ сервера для полной проверки взаимодействия фронтенда с API.
  • Ограничивать перехват только нужными URL или параметрами, чтобы избежать случайного влияния на другие тесты.
  • Комбинировать cy.intercept() с проверкой UI для комплексного e2e-тестирования.

cy.intercept() обеспечивает полный контроль над сетевыми взаимодействиями, позволяя создавать стабильные, предсказуемые и быстрые тесты, которые не зависят от состояния внешних сервисов.

Оглавление