Cypress for循环中预定义元素变量首次迭代后指向错误如何解决？

你遇到的问题由Cypress本身的命令执行机制导致，和普通JavaScript变量传值逻辑无关。

核心原理 #

Cypress中所有cy.开头的API返回的都不是实际DOM元素，而是Cypress命令链对象：所有命令不会立刻执行，而是被加入全局异步队列按顺序执行，命令链的返回结果会顺着调用链向下传递。

异常原因 #

你将命令链存在element变量中复用，第一次循环执行完element.type(...)的相关逻辑后，后续调用的cy.get('[class*=charsRemaining]')的执行结果会被追加到你存储的element命令链的末尾。到第二次循环再调用element.type()时，命令链已经指向了上一轮最后返回的字符数提示元素，因此出现了输入目标错误的问题。

另外注意你提供的代码中存在笔误：

// 原代码是双等号，属于比较操作，不会完成赋值
element == cy.get('[cy=specialInstructions]')
// 需要修改为单等号赋值
element = cy.get('[cy=specialInstructions]')

两种修复方案生效的原因 #

1. 删除循环内的字符数断言：此时element命令链不会被追加其他元素的返回结果，每次调用都指向最初的输入框元素，因此运行正常。
2. 每次循环重新调用cy.get获取元素：相当于每次生成独立的、指向输入框的新命令链，不受之前队列中其他命令的影响，因此不会出现定位串扰。

推荐实践 #

如果要复用元素查询逻辑，建议使用Cypress的别名功能，比存储命令链变量更稳定：

// 提前定义别名
cy.get('[cy=additionalInfo]').as('inputElement')
if (field[1] == 'Special instructions') {
   cy.get('[cy=specialInstructions]').as('inputElement')
}

// 后续使用时通过别名获取
for (let i = 0; i < 3; i++) {
   cy.get('@inputElement')
     .type(extraString[i][0])
     .should('have.text', generatedTextString + extraString[i][1])

   var remaining = 1 - i
   if (i == 2) {
     remaining = 0
   }

   cy.get('[class*=charsRemaining]')
     .should('contain.text', 'Characters remaining: ' + remaining)
}

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