Cypress中如何同步重新声明变量以匹配网络请求拦截规则？

云原生阿岚

2026-8-11

问题解决：Cypress拦截器匹配编码后请求路径的问题

问题根源

你代码里的核心问题是：

cy.intercept 在代码初始化阶段就已创建，匹配规则沿用当时bankBranch的原始带空格值，后续修改变量不会更新已生成的拦截器规则。
输入带空格的内容后，浏览器会自动将空格编码为+，导致实际请求路径和拦截器的匹配规则不吻合，因此wait("@bankBranch")无法找到对应请求。

修复方案

方案一：提前生成编码字符串（推荐）

提前将搜索内容转换为编码格式，用它定义拦截器，输入时使用原始字符串即可：

let branchName = "Base Data for A"
// 提前将空格替换为+，生成编码后的字符串
const encodedBranch = branchName.replace(/\s+/g, "+");

// 用编码后的字符串定义拦截器，匹配实际请求路径
cy.intercept("GET", `/api/core/dropdown/bank-branch?*${encodedBranch}*`).as("bankBranch");

cy.get("#bankBranch")
  .type(branchName) // 输入原始带空格的内容
  .wait("@bankBranch"); // 拦截器能准确匹配编码后的请求

方案二：输入后动态创建拦截器

如果需要在输入后确定匹配规则，可以把拦截器的创建放到type的回调中，确保使用最新的编码值：

let branchName = "Base Data for A"

cy.get("#bankBranch")
  .type(branchName)
  .then(() => {
    const encodedBranch = branchName.replace(/\s+/g, "+");
    // 动态创建拦截器
    cy.intercept("GET", `/api/core/dropdown/bank-branch?*${encodedBranch}*`).as("bankBranch");
    // 在回调内执行wait，确保拦截器已生效
    cy.wait("@bankBranch");
  });