如何清理Cypress中cy.intercept捕获的请求队列？

解决方案1：主动消费重置请求的拦截队列 #

该方案改造成本最低，无需调整现有spyOnGraphQL逻辑，只需在执行重置过滤器操作后，主动调用一次cy.wait将重置触发的GraphQL请求从拦截队列中移除，后续测试过滤器时的cy.wait就会匹配到最新的过滤请求。
参考调用逻辑：

// 测试过滤器1
applyFilter(1)
cy.wait(`@${operationName}`).should(({response}) => {
  // 校验过滤器1返回结果逻辑
})

// 执行重置操作 + 消费重置触发的请求
resetFilters()
cy.wait(`@${operationName}`) // 此处无需校验，仅清空队列中的重置请求即可

// 测试过滤器2
applyFilter(2)
cy.wait(`@${operationName}`).should(({response}) => {
  // 校验过滤器2返回结果逻辑
})

解决方案2：修改拦截规则，通过请求payload区分请求 #

如果需要更严谨的匹配避免错配，可以修改aliasQuery逻辑，增加对请求参数的校验规则，因为重置过滤器的请求和正常过滤请求的variables字段必然存在差异（比如重置时filters为空，正常过滤时filters有具体值），仅符合参数规则的请求才会被打上别名。
修改后的工具函数代码：

function aliasQuery(
  request: CyHttpMessages.IncomingHttpRequest,
  operationName: string,
  matchVariables?: Record<string, any>
): void {
  const { body } = request;
  if (body.operationName !== operationName) return;
  // 传入参数匹配规则时，校验variables是否符合要求
  if (matchVariables) {
    const isMatch = Object.entries(matchVariables).every(([key, expectedVal]) => {
      return body.variables?.[key] === expectedVal
    })
    if (!isMatch) return
  }
  request.alias = operationName;
}

export function spyOnGraphQL(operationName: string, matchVariables?: Record<string, any>): void {
  cy.fixture('hosts').then(({ graphQLHostname }) => {
    cy.intercept(ApiMethods.Post, graphQLHostname, (request) => {
      aliasQuery(request, operationName, matchVariables);
    });
  });
}

使用时只需在监听过滤请求时传入对应的参数匹配规则即可，重置请求因为不符合参数规则，不会被打上别名，自然不会被后续的cy.wait捕获。

补充说明 #

Cypress目前没有公开的API可以直接清空cy.intercept的请求队列，也可以通过重新调用spyOnGraphQL覆盖旧的拦截实例，新的拦截实例会自动清空历史请求队列，但该方案稳定性不如前两种，不优先推荐。

内容的提问来源于stack exchange，提问作者Slava.In