使用Cypress无法向Chakra UI PIN输入框输入内容的问题

问题根源 #

你使用的元素ID #pin-input-:r1:-0 包含Chakra UI动态生成的片段（:r1:），这个部分会在页面重新渲染时变化，导致Cypress无法稳定定位元素。

解决方案 #

1. 基于父容器+固定属性定位 #

利用父容器的固定ID pin-stack，结合输入框的data-index属性（固定为0-3）来定位：

// 逐个输入PIN码
cy.get('#pin-stack input[data-index="0"]').type('1')
cy.get('#pin-stack input[data-index="1"]').type('2')
cy.get('#pin-stack input[data-index="2"]').type('3')
cy.get('#pin-stack input[data-index="3"]').type('4')

// 或者用循环简化代码
const pinCode = '1234'
pinCode.split('').forEach((digit, index) => {
  cy.get(`#pin-stack input[data-index="${index}"]`).type(digit)
})

2. 基于aria-label批量定位 #

所有PIN输入框共享相同的aria-label，可以通过这个属性批量获取元素后逐个输入：

cy.get('input[aria-label="Please enter your pin code"]').each(($input, index) => {
  cy.wrap($input).type('1234'[index])
})

3. 添加测试专属属性（推荐） #

如果可以修改组件代码，给PIN输入框添加data-testid属性，这是最稳定的测试定位方式：

// 组件代码示例（React + Chakra UI）
<PinInput>
  <PinInputField data-testid="pin-digit-0" />
  <PinInputField data-testid="pin-digit-1" />
  <PinInputField data-testid="pin-digit-2" />
  <PinInputField data-testid="pin-digit-3" />
</PinInput>

对应的测试代码：

const pinCode = '1234'
pinCode.split('').forEach((digit, index) => {
  cy.get(`[data-testid="pin-digit-${index}"]`).type(digit)
})

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