Query параметры

Query-параметры в URL представляют собой ключ-значение, добавляемые после знака ? и разделяемые амперсандом &. В контексте тестирования веб-приложений с помощью Cypress они часто используются для передачи данных между страницами, фильтрации контента или управления состоянием приложения. Умение работать с query-параметрами позволяет создавать более точные и гибкие тесты.

Получение query-параметров

Cypress не предоставляет встроенного метода для прямого извлечения query-параметров из URL, но это легко реализуется с помощью JavaScript. Основной подход — использовать объект URL и его свойство searchParams:

cy.url().then((urlString) => {
  const url = new URL(urlString);
  const paramValue = url.searchParams.get('key'); // получение значения параметра 'key'
  expect(paramValue).to.equal('expectedValue');
});

Метод searchParams.get() возвращает значение указанного параметра или null, если параметр отсутствует. Для проверки нескольких параметров можно использовать комбинацию has() и get():

cy.url().then((urlString) => {
  const url = new URL(urlString);
  expect(url.searchParams.has('filter')).to.be.true;
  expect(url.searchParams.get('filter')).to.equal('active');
});

Передача query-параметров при переходе на страницу

Для перехода на страницу с query-параметрами используется команда cy.visit(). Параметры можно передавать напрямую в URL:

cy.visit('/products?category=books&sort=price');

Альтернативно, Cypress позволяет использовать объект qs для автоматического формирования строки запроса через параметры в объекте:

cy.visit({
  url: '/products',
  qs: {
    category: 'books',
    sort: 'price'
  }
});

Этот подход особенно полезен для динамического создания URL с большим количеством параметров.

Проверка query-параметров в тестах

Проверка query-параметров важна для тестов, которые зависят от состояния страницы, фильтров или сортировки. Стандартный метод — извлечение текущего URL и проверка его параметров:

cy.url().should((urlString) => {
  const url = new URL(urlString);
  expect(url.searchParams.get('sort')).to.equal('price');
  expect(url.searchParams.get('category')).to.equal('books');
});

Для более комплексных проверок удобно создавать вспомогательные функции:

function checkQueryParam(key, value) {
  cy.url().then((urlString) => {
    const url = new URL(urlString);
    expect(url.searchParams.get(key)).to.equal(value);
  });
}

checkQueryParam('category', 'books');
checkQueryParam('sort', 'price');

Изменение query-параметров без перезагрузки страницы

Некоторые приложения используют динамическое обновление состояния через history.pushState или history.replaceState. В Cypress можно симулировать изменение query-параметров с помощью команды cy.window():

cy.window().then((win) => {
  const url = new URL(win.location);
  url.searchParams.set('filter', 'active');
  win.history.pushState({}, '', url);
});
cy.url().should('include', 'filter=active');

Это позволяет проверять реакцию интерфейса на изменения URL без необходимости полной перезагрузки страницы.

Парсинг сложных query-параметров

Query-параметры могут содержать массивы, объекты или закодированные строки. Для работы с ними полезно использовать decodeURIComponent:

cy.url().then((urlString) => {
  const url = new URL(urlString);
  const data = JSON.parse(decodeURIComponent(url.searchParams.get('data')));
  expect(data).to.have.property('id', 123);
});

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

import qs from 'qs';

cy.visit(`/products?${qs.stringify({ filter: ['active', 'new'] })}`);
cy.url().then((urlString) => {
  const query = qs.parse(urlString.split('?')[1]);
  expect(query.filter).to.deep.equal(['active', 'new']);
});

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

  • Использовать URL и searchParams для простых случаев и проверки отдельных параметров.
  • Для динамических или сложных параметров применять библиотеки сериализации (qs).
  • Всегда проверять наличие параметра через has(), чтобы избежать ошибок при отсутствии ключа.
  • Для изменения query-параметров без перезагрузки использовать window.history методы (pushState, replaceState).
  • В тестах поддерживать единый подход к проверке и передаче параметров для упрощения сопровождения.

Эффективная работа с query-параметрами обеспечивает точность тестов и позволяет проверять корректность работы фильтров, сортировок и других элементов интерфейса, зависящих от состояния URL.

Оглавление