Cypress中如何根据参数动态构建含可选字段的请求体？

完全不需要写两个独立的请求，以下几种方案可以优雅实现请求体的动态调整：

方案1：基础对象+条件追加字段 #

先定义固定的基础请求体，再根据foo的存在与否动态添加bar字段，逻辑直观易懂：

// 提前定义请求体类型（解决TypeScript类型报错问题）
interface RequestBody {
  name: string;
  title: string;
  type: 1 | 2;
  bar?: string; // 用?标记bar为可选字段
}

const baseBody: RequestBody = {
  name: 'A Value',
  title: 'Some other value',
  type: foo ? 1 : 2 // 三元运算符处理type字段
};

// 当foo存在时，追加bar字段
if (foo) {
  baseBody.bar = <你的可选函数参数值>;
}

cy.request({
  url: Cypress.env('AN_ENDPOINT_OF_SOME_SORT'),
  method: 'POST',
  body: baseBody
});

方案2：对象展开+短路求值 #

用一行代码实现动态字段添加，代码更紧凑：

cy.request({
  url: Cypress.env('AN_ENDPOINT_OF_SOME_SORT'),
  method: 'POST',
  body: {
    name: 'A Value',
    title: 'Some other value',
    type: foo ? 1 : 2,
    // 当foo为真时展开包含bar的对象，为假时展开空对象（相当于不添加该字段）
    ...(foo && { bar: <你的可选函数参数值> })
  }
});

原理：foo && { bar: ... }在foo为真时返回目标对象，为假时返回false，而对象展开语法会自动忽略false、undefined这类无效值，不会影响最终请求体。

方案3：封装生成函数（适合复用场景） #

如果多个测试用例需要生成类似的动态请求体，可以封装一个工具函数：

interface RequestBody {
  name: string;
  title: string;
  type: 1 | 2;
  bar?: string;
}

function generateRequestBody(foo?: boolean, barValue?: string): RequestBody {
  const body: RequestBody = {
    name: 'A Value',
    title: 'Some other value',
    type: foo ? 1 : 2
  };
  if (foo && barValue) {
    body.bar = barValue;
  }
  return body;
}

// 调用示例
cy.request({
  url: Cypress.env('AN_ENDPOINT_OF_SOME_SORT'),
  method: 'POST',
  body: generateRequestBody(foo, <你的可选参数>)
});

关于TypeScript报错的说明 #

之前用?标记字段报错，大概率是因为没有提前定义包含可选字段的接口。只要明确声明请求体类型，把bar标记为可选字段，就能避免类型检查报错。

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