AngularJS端测：如何用Cypress为同名多输入框输入相同内容？

这个场景我之前测试AngularJS项目时也碰到过，确实挺闹心的——相同的name、class、ng-model，ID还动态生成，直接用cy.get()会因为匹配到多个元素报错。不过有几个实用的解决办法，你可以根据自己的页面结构选：

方法1：遍历所有匹配的输入框（通用型） #

如果不管有几个相同的输入框，你都要给它们输入相同内容，用.each()遍历是最省心的方式，它会逐个处理每个匹配到的元素：

cy.get('input[name=description]').each(($inputElement) => {
  // 把当前遍历到的元素包装成Cypress对象，再执行type命令
  cy.wrap($inputElement).type('Hello World')
})

这种方法不用关心元素的顺序或数量，哪怕后续页面新增了同款输入框，代码也能自动适配。

方法2：按索引精准定位（适合元素顺序固定的场景） #

如果两个输入框在页面上的位置是固定不变的，比如第一个是“初始描述”，第二个是“补充描述”，可以用.eq(index)指定元素的索引（索引从0开始）：

// 给第一个匹配到的输入框输入内容
cy.get('input[name=description]').eq(0).type('Hello World')
// 给第二个匹配到的输入框输入内容
cy.get('input[name=description]').eq(1).type('Hello World')

⚠️ 注意：这个方法依赖元素在DOM中的顺序，如果后续页面调整了元素位置，测试就会失效，所以只适合页面结构稳定的场景。

方法3：结合父容器上下文定位（最健壮的方式） #

如果两个输入框所在的父元素有独特的标识（比如不同的class、ID或者其他属性），优先用这种方法，它通过上下文缩小定位范围，测试稳定性最高：
比如假设第一个输入框在div.form-section-primary容器里，第二个在div.form-section-secondary容器里，代码可以这么写：

// 定位第一个输入框
cy.get('.form-section-primary').find('input[name=description]').type('Hello World')
// 定位第二个输入框
cy.get('.form-section-secondary').find('input[name=description]').type('Hello World')

这种方式完全不依赖元素顺序，哪怕页面调整了元素的显示顺序，只要父容器的标识不变，测试就能正常运行。

方法4：利用AngularJS的ng-model属性定位 #

既然是AngularJS应用，也可以直接通过ng-model属性来定位元素，有时候它比name属性更精准：

// 遍历所有ng-model为description的输入框
cy.get('[ng-model="description"]').each(($input) => {
  cy.wrap($input).type('Hello World')
})

// 或者按索引定位
cy.get('[ng-model="description"]').eq(0).type('Hello World')
cy.get('[ng-model="description"]').eq(1).type('Hello World')

如果你的页面结构允许，我个人最推荐方法3，它的测试健壮性最高，不容易因为页面的小改动而失败。

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