Cypress测试中textarea元素ID每次运行生成随机前缀如何解决

一、修复data-cy属性定位失效问题 #

添加data-cy后仍命中带随机ID的元素，通常是两个原因：

• 属性挂载位置错误：自定义属性没有直接加在原生<textarea>标签上，而是加在了外层包裹容器或者框架组件实例上，框架渲染时没有将属性透传到真实DOM。打开浏览器DevTools在元素面板搜索你设置的data-cy值，确认属性直接属于textarea标签即可。
• 选择器写法错误：定位时不要拼接任何ID相关的选择规则，直接使用cy.get('[data-cy="你设置的属性值"]')即可稳定命中，不会回退到动态ID匹配逻辑。

二、无修改前端代码权限时的临时定位方案 #

观察你给出的两个ID样例，仅开头的转义数字部分是随机生成的，后半段_e2aa87af-c799-4cf5-9289-46aedc7eb226_comment_textarea完全固定，直接使用CSS后缀匹配选择器即可绕开随机前缀，不需要依赖固定ID：

// 匹配所有id以固定后缀结尾的评论textarea
cy.get('textarea[id$="_comment_textarea"]')

三、多textarea逐个填写/切换实现 #

之前.next()方法失效，核心原因是.next()仅能查找当前元素的紧邻同级兄弟节点，实际项目中textarea通常会被div、form-group等容器包裹，不存在平级相邻的关系，可使用以下两种稳定方案：

• 按索引逐个定位填写：通过eq()传入索引值，按顺序取对应位置的textarea即可，不受DOM嵌套结构影响

// 填写第一个文本框
cy.get('textarea[id$="_comment_textarea"]').eq(0).type('第一个文本框的输入内容')
// 填写第二个文本框
cy.get('textarea[id$="_comment_textarea"]').eq(1).type('第二个文本框的输入内容')

• 批量遍历填写：如果文本框数量多，可通过each()遍历匹配到的所有textarea，按顺序传入对应内容

const inputContents = ['第一条内容', '第二条内容', '第三条内容']
cy.get('textarea[id$="_comment_textarea"]').each(($el, index) => {
  cy.wrap($el).type(inputContents[index])
})

如果需要模拟从当前激活的文本框切换到下一个，可先获取当前激活元素在所有textarea集合中的索引，再取索引+1的元素即可，不需要依赖DOM兄弟节点关系。

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