在Cypress自动化测试中，页面出现多个结构完全相同的数字输入框是非常普遍的情况，例如购物车中的商品数量、配送数量以及库存数量等表单项。由于这些输入框往往使用相同的类名、相同的标签结构和相同的输入类型，直接使用cy.get('.num-input')只能获取到一个元素集合，无法直接对指定输入框执行精准输入。要解决这个问题，需要结合父级容器文本、自定义属性或DOM索引等上下文信息进行定位，再执行清空和输入操作。本文针对多个相同结构数字输入框的定位与数值输入，介绍几种实用的Cypress处理方式，并补充批量输入与断言验证的实践要点。
一、多相同结构数字输入框的典型页面组成
在多数前端页面中，重复生成的表单项通常来自同一套HTML模板，因此会出现多个结构一致的容器。每个容器中包含一个<label>元素和一个<input>元素，且输入框的type属性均为number。下面给出一个常见的页面结构示例：
<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>
从这段结构中可以看出，三个输入框的class属性完全一致，均为num-input，并且type也都为number。如果仅凭类名选择器，Cypress会找到多个元素，后续输入操作很难准确指定目标。不过，每个输入框对应的label文本不同，同时它们还带有不同的data-type自定义属性，这两个信息都可以作为精准定位的依据。如果页面既没有明显的父容器文本，也没有自定义属性，还可以按照DOM顺序使用索引进行区分。
二、通过父级容器文本定位输入框
当相同结构的输入框被不同的父级容器包裹，并且父级容器内存在可区分的文本时，可以借助Cypress的contains方法先匹配包含指定文本的容器，再从该容器中查找内部输入框。这种方式的优点在于测试代码具有较好的业务可读性，能够直接表达“找到商品数量对应的输入框”这一语义。
以刚才的页面结构为例，每个输入框都位于.input-group容器中，而容器的label文本分别是“商品数量”“配送数量”和“库存数量”。可以先使用cy.contains('.input-group', '商品数量')定位到对应容器，再调用find('.num-input')获取内部输入框，最后执行clear()和type()完成输入。示例代码如下：
// 通过父级容器中的标签文本定位商品数量输入框并输入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')
该方法适合父容器结构相对稳定、标签文本不会频繁变化的场景。需要注意的是，cy.contains默认返回第一个匹配到的元素，如果页面中存在重复文本，比如多个地方都出现“商品数量”，就可能定位到非预期元素。此时可以结合更具体的选择器或增加容器范围来缩小匹配结果。另外，当父容器结构发生调整，例如label被移到容器外部时，虽然find仍然可能找到内部输入框，但整个链式定位的依赖关系已经改变，测试用例需要同步维护。
三、利用自定义属性与DOM索引精准定位
如果输入框本身带有可区分的自定义属性，例如本例中的data-type属性，那么使用属性选择器进行定位会比父级容器定位更加直接。Cypress的cy.get支持标准CSS属性选择器，可以使用.num-input[data-type="goods"]精准获取商品数量对应的输入框。这种方式不受父级结构变化的影响，只要属性名和属性值保持稳定，即使页面布局发生调整，定位逻辑依然有效。
示例代码如下：
// 使用自定义属性 data-type 精准定位商品数量输入框
cy.get('.num-input[data-type="goods"]').clear().type('10')
// 使用自定义属性 data-type 精准定位配送数量输入框
cy.get('.num-input[data-type="delivery"]').clear().type('5')
// 使用自定义属性 data-type 精准定位库存数量输入框
cy.get('.num-input[data-type="stock"]').clear().type('20')
当然，并非所有项目都会为输入框提供稳定的自定义属性。如果既没有父容器文本可以依赖，也没有自定义属性可供选择，还可以通过DOM索引定位输入框。Cypress提供了eq(index)方法，用于从元素集合中获取指定索引的元素，索引从0开始计数。例如cy.get('.num-input').eq(0)表示第一个输入框，eq(1)表示第二个输入框，依次类推。示例代码如下：
// 按索引获取第一个输入框并输入10
cy.get('.num-input').eq(0).clear().type('10')
// 按索引获取第二个输入框并输入5
cy.get('.num-input').eq(1).clear().type('5')
// 按索引获取第三个输入框并输入20
cy.get('.num-input').eq(2).clear().type('20')
索引定位的优点是实现简单，适合输入框顺序固定且不会频繁变更的场景。但其缺点也很明显：一旦前端调整输入框的先后顺序或插入新的同类元素，原有索引可能立即失效，导致输入到错误的输入框中。因此，在实际项目中建议把索引定位作为最后的兜底方案，优先考虑属性定位和父容器文本定位。
四、批量输入优化与断言验证
当需要为多个相同结构的输入框按照一定规则输入数值时，逐个编写cy.get和type语句会使代码显得重复且难以维护。Cypress提供的each方法可以遍历所有匹配到的输入框，并在回调函数中结合索引或元素属性动态设置输入值。通过维护一个与输入框顺序对应的数值数组，即可用一个循环完成所有输入操作。
下面的示例使用each遍历所有.num-input输入框，并根据索引从数组中取出对应数值进行输入：
// 定义与输入框顺序对应的数值数组
const inputValues = [10, 5, 20]
// 遍历所有相同结构的数字输入框
cy.get('.num-input').each(($input, index) => {
// 将当前元素包装为Cypress对象，清空原有内容后输入对应数值
cy.wrap($input).clear().type(inputValues[index].toString())
})
输入操作完成后，测试不能只停留在命令执行成功这一层面，还需要通过断言确认输入框中的值确实符合预期。Cypress的should方法支持have.value断言，并且具备自动重试机制，可以在输入框值尚未更新时持续检查，直到断言通过或超时。针对单个输入框的断言示例如下：
// 断言商品数量输入框的值已经被设置为10
cy.get('.num-input[data-type="goods"]').should('have.value', '10')
在批量输入场景中，也可以结合each和should对每个输入框进行断言，或者使用一个期望值数组逐项对比。这样能够有效避免输入命令虽然执行但实际值未更新的情况，从而提升测试的可靠性。断言步骤能够让自动化测试从单纯的“执行动作”升级为“验证结果”，是保障数字输入正确性的重要环节。
五、数字输入框操作注意事项与最佳实践
在Cypress中操作数字输入框时，有一些细节值得特别留意。首先是输入前的清理工作。如果没有调用clear()方法，type()默认会在原有内容之后追加字符，例如原值为“1”，输入“10”后可能变成“110”。因此，每次输入前都应先清空输入框，避免数值拼接问题。
其次是等待元素就绪。对于动态渲染的输入框，不要使用固定时间的cy.wait()来等待元素出现，而应依赖cy.get()自带的超时重试机制。Cypress会自动等待元素出现在DOM中并可操作，从而减少因页面加载延迟导致的偶发失败。另外，有些数字输入框设置了最小值、最大值或自定义校验规则，输入前需要确认目标数值在合法范围内，否则可能触发浏览器原生校验或前端提示，影响测试执行。
最后是定位策略的选择。在实际项目中，建议优先使用data-type、data-testid等稳定的业务属性进行定位；如果没有自定义属性，则使用父容器文本进行定位；只有在前两者都不可用时，才考虑使用索引定位。对于长期维护的测试工程，可以在开发阶段与前端团队约定为关键输入框添加稳定的自定义属性，以降低自动化脚本的维护成本。
综上所述，在Cypress中处理多个相同结构的数字输入框，关键在于找到能够区分每个输入框的上下文信息，并选择合适的选择器或索引策略完成定位。通过父级容器文本、自定义属性以及DOM索引三种方式，可以覆盖大多数页面场景；使用each批量处理能够简化重复代码，使用should断言则可以确保输入结果符合预期。建议在实际项目中优先采用可读性和稳定性较高的属性定位方式，并始终遵循先清空、再输入、后断言的完整操作流程，从而构建更加健壮的数字输入自动化测试。