本文详解如何使用 cypress 的 eq() 命令结合语义化选择器，准确选中并操作具有相同类名和属性的多个 元素（如 ant design 的数字输入框），避免因元素重复导致的定位失败。
在 Cypress 端到端测试中，当页面存在多个结构高度一致的表单控件（例如两个 role="spinbutton" 且共享 class="ant-input-number-input" 的 元素）时，仅靠 .get('.ant-input-number-input') 会返回元素集合，直接调用 .type() 将默认作用于第一个匹配项，且无法区分后续目标——这正是初学者常遇到的“只能操作第一个、第二个输不进去”的典型问题。
✅ 正确做法：组合语义化选择器 + eq() 索引定位
推荐优先使用 带语义的角色属性（role）与类名组合 作为基础选择器，再通过 .eq(index) 精确指定第几个元素（索引从 0 开始）：
// ✅ 正确：选中第一个数字输入框，输入 "25"
cy.get('[role="spinbutton"].ant-input-number-input').eq(0).clear().type('25');
// ✅ 正确：选中第二个数字输入框，输入 "100"
cy.get('[role="spinbutton"].ant-input-number-input').eq(1).clear().type('100');⚠️ 注意：原示例中误用 .text(25) —— 是表单元素，必须使用 .type() 方法输入内容；.text() 仅用于读取或断言非表单元素（如 、）的文本内容，对 无效。
? 更健壮的定位策略（进阶推荐）
若页面结构动态变化（如 DOM 顺序不稳定），建议结合更稳定的上下文定位方式：
-
基于父容器定位（推荐）：
// 假设两个输入框分别位于不同的 form-item 中 cy.get('.form-item:first .ant-input-number-input').type('25'); cy.get('.form-item:last .ant-input-number-input').type('100'); -
使用 :nth-of-type() 或 :nth-child()（需谨慎验证 DOM 结构）：
cy.get('[role="spinbutton"].ant-input-number-input:nth-of-type(1)').type('25'); -
添加 data-test-id 属性（最佳实践）：
在开发阶段为关键输入框添加唯一测试标识，大幅提升可维护性：对应测试代码：
cy.get('[data-test-id="quantity-input"]').type('25'); cy.get('[data-test-id="price-input"]').type('100');
? 关键注意事项总结
- ❌ 避免仅依赖 .get('.class') 后直接 .type() —— 易因多匹配而行为不可控；
- ✅ 优先使用 [role="xxx"]、[aria-label] 等 ARIA 属性提升可访问性与测试稳定性；
- ✅ 总是配合 .clear() 再 .type()，防止残留值干扰；
- ✅ 在 CI 环境中启用 { log: true } 参数调试定位结果：
cy.get('[role="spinbutton"].ant-input-number-input').eq(1).should('be.visible').clear().type('100', { log: true });
掌握基于语义与索引的双重定位逻辑，不仅能解决当前的双输入框问题，更能构建出高鲁棒性、易维护的 Cypress 测试套件。
