如何在Cypress中选择输入框并输入数字？区分同标签输入框

一、修复输入框无法选中及输入内容的问题 #

你的现有代码里用了.text(25)，这是错误的——Cypress中给输入框输入内容需要用.type()方法，Antd的数字输入框可直接通过选择器定位后执行输入操作，无需额外点击（若点击触发状态有问题）。修正后的基础代码：

// 选中输入框并输入内容
cy.get('.ant-input-number-input').clear().type('25');

• .clear()用于清空输入框原有内容（可选，按需添加）
• .type()是Cypress给输入框赋值的正确方法，支持输入文本/数字

二、区分两个相同标签的输入框 #

针对结构完全一致的两个输入框，有以下几种可靠定位方式：

1. 使用索引定位 #

通过eq()方法指定索引（从0开始计数），直接选择对应位置的输入框：

// 选中第一个输入框并输入
cy.get('.ant-input-number-input').eq(0).clear().type('25');
// 选中第二个输入框并输入
cy.get('.ant-input-number-input').eq(1).clear().type('50');

2. 通过父容器定位 #

如果两个输入框所在的父元素有差异（比如不同的表单分组），可结合父元素选择器精准定位：
假设HTML结构如下：

<div class="input-group first-group">
  <input role="spinbutton" class="ant-input-number-input" ...>
</div>
<div class="input-group second-group">
  <input role="spinbutton" class="ant-input-number-input" ...>
</div>

则定位代码：

// 选中第一个输入框
cy.get('.first-group .ant-input-number-input').clear().type('25');
// 选中第二个输入框
cy.get('.second-group .ant-input-number-input').clear().type('50');

3. 添加测试ID（推荐） #

若有权限修改前端代码，给每个输入框添加data-testid属性是最稳定的定位方式，不受页面结构变化影响：
修改后的HTML：

<input role="spinbutton" data-testid="first-number-input" class="ant-input-number-input" ...>
<input role="spinbutton" data-testid="second-number-input" class="ant-input-number-input" ...>

Cypress代码：

cy.get('[data-testid="first-number-input"]').clear().type('25');
cy.get('[data-testid="second-number-input"]').clear().type('50');

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