如何在Cypress中清除<div>元素内容并替换文本？

这个问题的核心是你操作的不是原生表单输入元素，而是用div模拟的自定义输入组件，Cypress原生的clear()、type({selectall})等方法只对<input>、<textarea>这类标准表单元素生效，所以会出现各种无效的情况。下面是针对性的解决方案：

方案1：直接修改DOM内容与关联属性 #

观察你的DOM结构，文本内容同时存在于3个地方：.highlighter的文本、.truncate的data-test-text属性、.truncate-container的value属性，需要同步修改这些内容才能完全替换：

// 定位到最外层容器，依次修改所有关联内容
cy.get('.form-control.text-control')
  // 修改.truncate-container的自定义value属性
  .find('.truncate-container')
  .invoke('attr', 'value', 'Auto_CFS_12312')
  // 修改.truncate的data-test-text属性
  .parent().find('.truncate')
  .invoke('attr', 'data-test-text', 'Auto_CFS_12312')
  // 修改.highlighter的显示文本
  .find('.highlighter')
  .invoke('text', 'Auto_CFS_12312')

如果这个组件需要触发事件来同步页面状态（比如表单校验、数据同步），修改DOM后再补充触发对应事件：

// 触发input或change事件，根据组件实际监听的事件选择
cy.get('.truncate-container').trigger('input')
// 或者
cy.get('.truncate-container').trigger('change')

方案2：模拟真实用户的键盘操作（如果组件支持） #

如果这个自定义组件支持键盘交互，可以尝试更贴近真实用户的操作流程：

cy.get('.truncate-container')
  .click() // 点击聚焦组件
  .type('{ctrl+a}') // Windows全选，Mac替换为{cmd+a}
  .type('{backspace}') // 删除选中内容
  .type('Auto_CFS_12312') // 输入新文本

为什么之前的方法无效？ #

• cy.clear()：仅支持原生表单元素，div不属于“可清除元素”，直接报错是正常的。
• .type('{selectall}{backspace}')：部分自定义组件不识别Cypress的{selectall}命令，换成系统级的{ctrl+a}更可能生效。
• .invoke('val', '')：val()是针对input元素的value属性的方法，div的value是自定义属性，应该用attr('value', '')来修改。

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