Cypress测试中无法向PIN码输入框输入内容的解决方案咨询

• 问题根源：cy.type()仅支持原生可输入元素（如<input>、<textarea>），你操作的是<div>元素，不符合该方法的使用要求，因此报错。

• 解决方案1：定位组件背后的隐藏输入框
  多数PIN码UI组件会用<div>做视觉展示，实际输入逻辑绑定在隐藏的<input>元素上。打开浏览器开发者工具检查PIN区域DOM结构，找到对应的隐藏输入框（可能带有type="hidden"或隐藏样式），直接对其使用cy.type()：

  // 示例：假设隐藏input的data-testid为pin-input
  cy.get('[data-testid="pin-input"]').type('1111');
  

• 解决方案2：触发键盘事件
  如果组件通过监听keydown/keyup键盘事件处理PIN输入，可直接触发对应事件：

  const pin = '1111';
  // 逐个触发数字的keydown事件
  pin.split('').forEach(digit => {
    cy.get('[data-testid="pin-digit-0"]').trigger('keydown', { key: digit });
    // 部分组件需同时触发keyup，按需添加
    // cy.get('[data-testid="pin-digit-0"]').trigger('keyup', { key: digit });
  });
  

  若PIN码需按顺序输入到不同digit框（如输入第一个数字后自动跳转第二个），则需分别定位每个digit元素：

  const pin = '1111';
  pin.split('').forEach((digit, index) => {
    cy.get(`[data-testid="pin-digit-${index}"]`).trigger('keydown', { key: digit });
  });
  

• 解决方案3：聚焦可编辑div后输入
  若目标<div>设置了contenteditable="true"，可先聚焦再输入：

  cy.get('[data-testid="pin-digit-0"]').focus().type('1');
  cy.get('[data-testid="pin-digit-1"]').focus().type('1');
  cy.get('[data-testid="pin-digit-2"]').focus().type('1');
  cy.get('[data-testid="pin-digit-3"]').focus().type('1');
  

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