如何在Cypress中将.then内的赋值逻辑封装为自定义命令？

步骤1：定义自定义命令 #

在cypress/support/commands.ts中添加代码，注册自定义命令updateAnimalInfo：

// 推荐写法：将animal对象作为参数传入，避免依赖全局变量
Cypress.Commands.add('updateAnimalInfo', (
  animal: { animalObj: { name: string; randomInfo: string[] } },
  name: string,
  randomInfo: string[]
) => {
  animal.animalObj.name = name;
  animal.animalObj.randomInfo = randomInfo;
});

// 可选写法：若animal是全局变量，可简化为
// Cypress.Commands.add('updateAnimalInfo', (name: string, randomInfo: string[]) => {
//   animal.animalObj.name = name;
//   animal.animalObj.randomInfo = randomInfo;
// });

步骤2：添加TypeScript类型声明（可选但推荐） #

在cypress/support/index.d.ts中扩展Cypress类型接口，让TypeScript识别自定义命令：

declare namespace Cypress {
  interface Chainable {
    updateAnimalInfo(
      animal: { animalObj: { name: string; randomInfo: string[] } },
      name: string,
      randomInfo: string[]
    ): Chainable<void>;

    // 对应全局变量版本的类型声明
    // updateAnimalInfo(name: string, randomInfo: string[]): Chainable<void>;
  }
}

步骤3：在测试代码中使用自定义命令 #

修改原测试代码，直接调用自定义命令完成赋值：

let animal: {
    animalObj: {
        name: string;
        randomInfo: string[]
    }
} = {
    animalObj: {
        name: '',
        randomInfo: ['']
    }
}

cy.request({
    method: 'POST',
    url: '/api/animal',
    body: animal
}).then($el => {
    animal.animalObj = $el.body.Order
    // 调用自定义命令，传入目标对象、名称和信息数组
    cy.updateAnimalInfo(animal, 'Rex', ["Likes to bark!"])
})

之后你只需调用cy.updateAnimalInfo并传入动态的名称和信息数组，就能完成对animal.animalObj属性的赋值操作，无需重复编写赋值逻辑。

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