如何使用Cypress测试输入时消失的Textarea提示文本？

针对你遇到的DOM无变化但需要验证"Enter a comment."提示消失的场景，分两种常见实现给出测试方法：

一、原生placeholder属性实现 #

如果提示文本是textarea的原生placeholder属性，输入后属性仍存在但浏览器不再渲染，可通过伪类或输入状态断言：

• 输入前验证placeholder内容：

  cy.get('textarea').should('have.attr', 'placeholder', 'Enter a comment.')
  

• 输入内容后验证placeholder不再显示：

  cy.get('textarea').type('任意测试内容')
  // 断言元素不处于placeholder显示状态
  cy.get('textarea').should('not.match', ':placeholder-shown')
  

二、自定义提示元素（CSS控制显示隐藏） #

如果提示是独立DOM元素（比如嵌套在textarea内的<span>或同级提示层），通过CSS（opacity/display/visibility）控制隐藏：

• 输入前确认提示可见：

  // 替换为实际的提示元素选择器
  cy.get('.comment-placeholder').should('be.visible').and('contain', 'Enter a comment.')
  

• 输入后验证提示已隐藏：

  cy.get('textarea').type('任意测试内容')
  // 根据实际隐藏方式选择断言
  cy.get('.comment-placeholder').should('not.be.visible')
  // 或者针对CSS属性断言（比如opacity为0）
  cy.get('.comment-placeholder').invoke('css', 'opacity').should('eq', '0')
  

通用排查技巧 #

如果不确定实现方式，用Cypress调试工具定位元素：

1. 输入前执行cy.get('textarea').debug()，查看元素的属性、CSS类及子元素
2. 输入内容后再次debug，对比输入前后的属性/CSS变化，确定断言方向

内容的提问来源于stack exchange，提问作者Barış Can Ateş