Cypress v12.17如何在请求拦截中获取URL查询参数？

在Cypress v12.17中编写了如下测试代码：

it.only('Foo Test', () => {
  cy.intercept('somePath/someEndpoint**', { fixture: 'someJsonFile' }).as('getFoo');

  cy.visit('somePath/someEndpoint?queryParamOne=someValue');

  cy.wait('@getFoo').then((interception) => {
    console.log('URL', JSON.stringify(interception.request.url));
    console.log('QUERY', JSON.stringify(interception.request.query));
  });
});

执行测试时，左侧结果面板显示完整URL为https://someHost/somePath/someEndpoint?queryParamOne=someValue，但interception.request.url仅返回不带查询参数的URL，interception.request.query为空对象。请问如何在拦截中获取queryParamOne=someValue的键值对，以便在返回响应前过滤interception.response.body的内容？

1. 手动从URL解析查询参数 #

在Cypress v12的部分场景下，req.query不会自动解析，你可以直接从请求URL中提取并解析查询参数：

cy.intercept('somePath/someEndpoint**', (req) => {
  // 拆分URL并提取查询参数部分
  const queryString = req.url.split('?')[1] || '';
  const urlParams = new URLSearchParams(queryString);
  const queryParamOne = urlParams.get('queryParamOne');

  // 基于参数过滤响应内容
  req.reply((res) => {
    // 示例：假设响应体是数组，根据参数过滤
    res.body = res.body.filter(item => item.targetKey === queryParamOne);
    return res;
  });
}).as('getFoo');

2. 使用路由匹配器自动解析参数 #

改用routeMatcher对象定义拦截规则，Cypress会自动解析查询参数到req.query中：

cy.intercept({
  pathname: 'somePath/someEndpoint',
  // 可留空或指定匹配条件，比如只拦截带queryParamOne的请求
  // query: { queryParamOne: '*' }
}, (req) => {
  // 直接从req.query获取参数
  const queryParamOne = req.query.queryParamOne;

  req.reply((res) => {
    res.body = res.body.filter(item => item.targetKey === queryParamOne);
    return res;
  });
}).as('getFoo');

3. 调整拦截路径的匹配规则 #

之前使用的somePath/someEndpoint**可能导致URL解析异常，建议明确路径匹配范围，比如用**/somePath/someEndpoint确保覆盖带查询参数的请求。

内容的提问来源于stack exchange，提问作者ekjcfn3902039