如何在Cypress+Cucumber中复用带动态字段与定位器的测试步骤？

需求背景 #

原有代码仅能验证单个表单字段，现需复用When步骤，支持验证多个不同定位器的字段，修改后的When步骤语句为：

When User enters the incorrect value "" in "" in the form

其中fieldName对应selectors.ts中的定位器键名，实现步骤逻辑统一，仅定位器动态变化。

解决方案步骤 #

1. 更新Feature文件

修改Scenario模板和Examples表格，新增fieldName列，值与selectors.ts中的定位器键一一对应：

Scenario: Validation of various fields 
        Given User is on the Details Page
        When User enters the incorrect value "<inputValue>" in "<fieldName>" in the form
        Then Validation error "<message>" should appear
    Examples:
        | inputValue | fieldName          | message                                  |
        | zb         | inputAccountName   | Field name can not be less than 3 char. |
        | 'ac@'      | inputAccountName   | ''ac@'' is not a valid input.           |
        | db         | inputDataBaseName  | Database name must be at least 3 chars. |
        | test@.com  | inputEmail         | Invalid email format.                   |
        | 123        | inputPassword      | Password must be at least 6 chars.      |
        | // 新增其他5个字段的测试用例 |

2. 修改When步骤定义

更新步骤实现，接收inputValue和fieldName两个参数，调用通用页面输入方法：

When(
  "User enters the incorrect value {string} in {string} in the form", 
  (inputValue: string, fieldName: string) => {  
      page.enterFieldValue(fieldName, inputValue);
  }
);

3. 重构Page文件的输入方法

替换原有的enterAccountName方法，改为支持动态字段的通用方法，根据fieldName从selectors中获取对应定位器：

enterFieldValue(fieldName: keyof typeof selectors, inputValue: string) {
  // 通过类型约束确保fieldName是selectors中存在的键
  const selector = selectors[fieldName];
  cy.xpath(selector).clear().type(inputValue); // 先清空输入框再输入，避免残留内容干扰
}

4. 保持selectors.ts的一致性

确保selectors.ts中的键名与Examples里的fieldName完全匹配，新增的5个字段定位器按现有格式添加即可：

export default {
  inputAccountName: '//input[@class="account"]',
  inputDataBaseName: '//input[@class="database"]', // 修正原拼写错误databse→database
  inputEmail: '//input[@type="email"]',
  inputPassword: '//input[@type="password"]',
  // 添加另外5个字段的定位器，比如：
  // inputPhone: '//input[@type="tel"]',
  // inputAddress: '//textarea[@class="address"]',
  // ...
};

内容的提问来源于stack exchange，提问作者S.C