在Cypress自动化测试场景中，页面存在多个结构相同的数字输入框是非常常见的情况，比如表单中的多个数量输入项、配置页面的多组参数输入区域等，这类输入框的标签名、类名甚至部分属性都完全一致，直接通过常规选择器无法区分，需要结合更多上下文信息实现精准定位后再输入对应数值。
常见相同结构数字输入框的页面结构
首先我们来看一个典型的多相同结构数字输入框的页面代码示例，后续的操作都基于这个结构展开：
<div class="form-container">
<div class="input-group">
<label>商品数量</label>
<input type="number" class="num-input" data-type="goods" />
</div>
<div class="input-group">
<label>配送数量</label>
<input type="number" class="num-input" data-type="delivery" />
</div>
<div class="input-group">
<label>库存数量</label>
<input type="number" class="num-input" data-type="stock" />
</div>
</div>
方法一：通过父级容器结合子元素定位
如果相同结构的输入框被不同的父级容器包裹，且父级容器有可区分的属性，我们可以先定位父级容器，再查找内部的数字输入框。比如上面的结构中，每个input标签都在input-group类的div下，我们可以通过contains方法先匹配label文本，再找到对应的输入框。
示例代码如下：
// 给商品数量输入框输入10
cy.contains('.input-group', '商品数量').find('.num-input').clear().type('10')
// 给配送数量输入框输入5
cy.contains('.input-group', '配送数量').find('.num-input').clear().type('5')
// 给库存数量输入框输入20
cy.contains('.input-group', '库存数量').find('.num-input').clear().type('20')
方法二：通过自定义属性区分定位
如果输入框本身带有可区分的自定义属性，比如上面的data-type属性，我们可以直接通过属性选择器精准定位对应的输入框，这种方式比父级定位更直接，也不容易受页面结构微调的影响。
示例代码如下：
// 通过data-type属性定位并输入数值
cy.get('.num-input[data-type="goods"]').clear().type('10')
cy.get('.num-input[data-type="delivery"]').clear().type('5')
cy.get('.num-input[data-type="stock"]').clear().type('20')
方法三：通过索引筛选定位
如果输入框没有自定义属性，父级容器也没有明显的区分文本，我们可以通过eq()方法按照DOM顺序获取对应索引的输入框，索引从0开始计数。这种方式适合输入框顺序固定且不会频繁变动的场景。
示例代码如下：
// 第一个输入框输入10（索引0）
cy.get('.num-input').eq(0).clear().type('10')
// 第二个输入框输入5（索引1）
cy.get('.num-input').eq(1).clear().type('5')
// 第三个输入框输入20（索引2）
cy.get('.num-input').eq(2).clear().type('20')
批量输入数值的优化方案
如果需要给多个相同结构的输入框按照固定规则输入数值，我们可以使用each()方法遍历所有输入框，结合索引或者输入框的其他属性动态设置输入值，避免重复编写相似的代码。
示例代码如下：
// 定义要输入的数值数组，顺序和输入框顺序对应
const inputValues = [10, 5, 20]
// 遍历所有数字输入框
cy.get('.num-input').each(($input, index) => {
// 清空原有内容后输入对应数值
cy.wrap($input).clear().type(inputValues[index].toString())
})
输入数值的注意事项
- 输入数值前建议先调用
clear()方法清空输入框原有内容，避免原有内容拼接导致输入错误。 - 如果数字输入框有最小值、最大值等校验规则，输入的数值需要符合规则，否则可能会触发校验报错，影响测试结果。
- 如果输入框是动态渲染的，需要先用
cy.get()的超时机制等待元素出现，或者使用cy.wait()等待渲染完成后再操作。 - 输入完成后可以通过
should()方法断言输入框的value值是否符合预期，验证输入操作是否生效。
示例断言代码：
// 断言商品数量输入框的值为10
cy.get('.num-input[data-type="goods"]').should('have.value', '10')