如何在Cypress Stub中使用拦截接口的部分ID作为动态变量

我在测试前端时想提升效率，用cy.intercept拦截接口并返回固定fixture文件，当前配置能正常拦截25次请求，但Stub文件里的id必须和请求接口路径中的ID一致，前端才能正常处理。我不想在fixture目录里创建25个Stub文件，已经把接口路径改成通配符形式，但Stub里的id还是固定值，需要实现它动态匹配拦截接口里的对应ID。

现有代码及Stub文件 #

初始拦截代码：

cy.intercept('**/api/classification/dd86ac0a-ca23-413b-986c-535b6aad659c/items/**',
  { fixture: 'ItemsInEditor.json' }).as('ItemsInEditorStub')

ItemsInEditor.json Stub内容：

{
  "item": {
    "version": 3,
    "title": "Cars",
    "rows": [],
    "id": "dynamicIdBasedOnEndPoint"  // 需要根据接口路径里的ID动态生成
  },
  "itemState": "Submitted"
}

当前更新后的代码（id仍为固定值）：

cy.intercept('**/api/classification/*/items/**', {
        body:
        {
            item: {
                version: 3,
                title: 'Cars',
                rows: [],
                id: '55eb5a28-24d8-4705-b465-8e1454f73ac8'  // 需要动态匹配路径中的通配符ID
            },
            itemState: "Submitted"
        }
    })
        .as('ItemsInEditorStub')

解决方案 #

方案1：用响应函数动态构造响应体

把cy.intercept的响应配置换成函数，从请求URL中提取目标ID，再生成对应响应：

cy.intercept('**/api/classification/*/items/**', (req) => {
  // 拆分URL提取classification的ID
  const urlSegments = req.url.split('/');
  const targetId = urlSegments[urlSegments.indexOf('classification') + 1];
  
  // 返回动态替换ID后的响应
  req.reply({
    item: {
      version: 3,
      title: 'Cars',
      rows: [],
      id: targetId
    },
    itemState: "Submitted"
  });
}).as('ItemsInEditorStub')

如果是UUID格式的ID，用正则匹配更精准：

cy.intercept(/\/api\/classification\/([0-9a-fA-F-]{36})\/items\/.*/, (req) => {
  // 从正则捕获组中直接获取ID
  const targetId = req.match[1];
  
  req.reply({
    item: {
      version: 3,
      title: 'Cars',
      rows: [],
      id: targetId
    },
    itemState: "Submitted"
  });
}).as('ItemsInEditorStub')

方案2：结合Fixture文件动态修改ID

如果想保留Fixture的结构，避免硬写响应体，可以读取Fixture后修改ID再返回：

cy.intercept('**/api/classification/*/items/**', (req) => {
  // 提取路径中的ID
  const targetId = req.url.split('/')[req.url.split('/').indexOf('classification') + 1];
  
  // 读取Fixture并替换id字段
  cy.fixture('ItemsInEditor.json').then(stubData => {
    stubData.item.id = targetId;
    req.reply(stubData);
  });
}).as('ItemsInEditorStub')

两种方案都能实现自动匹配请求路径中的ID返回对应Stub，无需创建多个Fixture文件。

内容的提问来源于stack exchange，提问作者E. E. Ozkan