Network performance

Cypress предоставляет мощные возможности для тестирования сетевых взаимодействий веб-приложений. Основным инструментом для работы с сетью является команда cy.intercept(), которая позволяет перехватывать HTTP-запросы, модифицировать их или проверять поведение приложения при различных сценариях.

Перехват запросов и мокинг

cy.intercept() заменяет устаревший cy.route() и позволяет управлять как запросами, так и ответами. С помощью этой команды можно:

  • Отслеживать исходящие запросы: проверить метод, URL, тело запроса или заголовки.
  • Моделировать ответы сервера: возвращать статические JSON-объекты или файлы с данными.
  • Создавать задержку или ошибки сети для проверки поведения приложения при нестабильной сети.

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

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers').its('response.statusCode').should('eq', 200);

В этом примере:

  • /api/users — URL запроса, который перехватывается.
  • { fixture: 'users.json' } — заранее подготовленный файл с данными, который возвращается вместо реального ответа.
  • .as('getUsers') — присваивает алиас для удобного ожидания и проверки запроса.

Проверка производительности сети

Cypress позволяет не только проверять корректность данных, но и измерять время отклика серверов. Для этого используется объект ответа, доступный через cy.wait().

cy.intercept('GET', '/api/data').as('getData');
cy.visit('/dashboard');
cy.wait('@getData').then((interception) => {
  expect(interception.response.duration).to.be.lessThan(500);
});
  • interception.response.duration возвращает время в миллисекундах, затраченное на получение ответа.
  • Это позволяет выявлять медленные запросы и тестировать поведение интерфейса при задержках.

Симуляция проблем с сетью

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

cy.intercept('GET', '/api/data', {
  delay: 1000, // задержка 1 секунда
  statusCode: 500,
  body: { error: 'Internal Server Error' }
}).as('getDataFail');

cy.visit('/dashboard');
cy.wait('@getDataFail');

Такой подход позволяет:

  • Проверить обработку ошибок интерфейсом.
  • Тестировать индикаторы загрузки и fallback UI.
  • Проверять поведение при нестабильной сети без реального воздействия на сервер.

Проверка последовательности запросов

Cypress поддерживает отслеживание серий запросов и их зависимости. Можно убедиться, что один запрос выполняется после другого:

cy.intercept('POST', '/api/login').as('login');
cy.intercept('GET', '/api/profile').as('getProfile');

cy.get('button#login').click();
cy.wait('@login').its('response.statusCode').should('eq', 200);
cy.wait('@getProfile').its('response.statusCode').should('eq', 200);
  • Важно задавать алиасы для каждого ключевого запроса.
  • Можно проверять не только статус, но и тело ответа, заголовки, параметры запроса.

Работа с динамическими URL и параметрами

cy.intercept() поддерживает шаблоны и регулярные выражения, что упрощает тестирование API с динамическими параметрами:

cy.intercept('GET', /\/api\/users\/\d+/).as('getUser');
cy.visit('/users/123');
cy.wait('@getUser').then((interception) => {
  expect(interception.request.url).to.match(/\/api\/users\/123/);
});
  • Регулярные выражения позволяют перехватывать все запросы, соответствующие шаблону, без создания отдельных правил для каждого ID.

Мокинг POST и PUT запросов

Для тестирования отправки данных на сервер можно подменять ответы на POST и PUT запросы:

cy.intercept('POST', '/api/users', {
  statusCode: 201,
  body: { id: 101, name: 'Test User' }
}).as('createUser');

cy.get('form#new-user').submit();
cy.wait('@createUser').its('response.statusCode').should('eq', 201);
  • Позволяет проверять работу форм и кнопок без изменения реальной базы данных.
  • Удобно для интеграционных тестов с внешними API.

Логирование сетевой активности

Для анализа поведения приложения полезно выводить подробные логи:

cy.intercept('GET', '/api/data', (req) => {
  req.continue((res) => {
    console.log('Запрос:', req.url);
    console.log('Ответ:', res.body);
  });
});
  • Можно добавлять логи только в отладочных тестах, не влияя на рабочие сценарии.
  • Легко выявлять неожиданные ответы сервера или ошибки формата данных.

Использование фикстур для сложных данных

Файлы с фикстурой позволяют хранить сложные объекты и использовать их многократно:

cy.fixture('products.json').then((products) => {
  cy.intercept('GET', '/api/products', products).as('getProducts');
});
cy.visit('/products');
cy.wait('@getProducts');
  • Фикстуры удобно использовать для повторяемых тестов и имитации больших наборов данных.
  • Поддерживают JSON, но также можно использовать текстовые или бинарные данные при необходимости.

Асинхронные сценарии и задержки

Cypress полностью асинхронен, поэтому важно корректно работать с ожиданиями запросов. Использование cy.wait() гарантирует, что тест не продолжится до получения нужного ответа.

cy.intercept('GET', '/api/messages').as('getMessages');
cy.get('button#load-messages').click();
cy.wait('@getMessages').then(({ response }) => {
  expect(response.body).to.have.length.greaterThan(0);
});
  • Это предотвращает гонки данных и ошибки при рендеринге интерфейса до завершения сетевых операций.

Интеграция с производственными API

Cypress позволяет тестировать приложение как с подменными ответами, так и с реальными API, используя одинаковый подход:

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

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

Оглавление