如何在Cypress TypeScript中为自定义命令传递可选命名参数？

步骤1：定义参数接口 #

创建一个接口封装所有可选参数，用对象形式传递参数：

interface CustomerDetailsParams {
  fullName?: string;
  email?: string;
  address1?: string;
  city?: string;
  state?: string;
  zip?: string;
  country?: string;
}

步骤2：更新TypeScript类型声明 #

修改Cypress的Chainable接口，让customerDetails命令接受上述接口的对象参数：

declare namespace Cypress {
  interface Chainable {
    customerDetails(params?: CustomerDetailsParams): Chainable<Element>;
  }
}

步骤3：修改命令实现 #

解构传入的参数对象，给每个字段设置默认空字符串（避免type()方法传入undefined报错），同时给参数对象设置默认空值：

Cypress.Commands.add('customerDetails', ({
  fullName = '',
  email = '',
  address1 = '',
  city = '',
  state = '',
  zip = '',
  country = ''
}: CustomerDetailsParams = {}) => {    
  cy.get('#Full_Name_id').type(fullName);
  cy.get('#Email_id').type(email);
  cy.contains('Address Line 1').type(address1);
  cy.get('#City_id').type(city);
  cy.contains('State').type(state);
  cy.contains('Zip').type(zip);
  
  // 仅当country有有效值时执行选择操作，避免空值触发无效点击
  if (country) {
    cy.get('.MuiSelect-select').click();
    cy.contains(country).click(); 
  }
});

步骤4：调用示例 #

现在可以直接通过命名参数传递需要的字段，无需传入大量undefined：

// 仅传递country参数
cy.customerDetails({ country: 'Great Britain' });

// 传递多个参数
cy.customerDetails({
  fullName: 'John Doe',
  email: 'john@example.com',
  country: 'Great Britain'
});

// 无参数调用（所有字段用默认空值）
cy.customerDetails();

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