vue input 自动化测试输入值问题

[zhn4]

条件

测试人员使用 robotframeword 对前端页面进行自动化测试，需要对页面的输入框进行输入空值触发提醒

效果

测试语句直接对输入框赋值 value = ''，输入框没有触发空值提醒

解析

• 情况1，在浏览器的控制面板 console，使用 js 语句修改这个输入框的dom节点只是修改了 dom 节点的值，并没有触发到这个 dom 节点的事件，需要使用 dispatchEvent(new Event('input')) 触发该节点的事件，才会触发这个输入框的校验
  document.querySelectorAll('.el-drawer .el-input__inner')[0].value = '456789'
  document.querySelectorAll('.el-drawer .el-input__inner')[0].dispatchEvent(new Event('input'))
• 情况2，直接在测试框架（ robotframeword）对这个输入框进行输入非空值（例如：123456 或者 '这是一段测试文本'），因为是模拟用户输入，成功触发输入框的事件
• 情况3，猜想，直接在测试框架对这个输入框进行输入空值（例如：''），虽然是模拟用户输入，到那时键盘编码并没有这个空值的值，所以没有触发到输入框事件。
• 反推思路：在 vue 的情况下，监听一个输入框的回车事件，这时候是监听键盘上“Enter”键的值

验证

注意！！！在代码里加入watch，监听这个值的变化

• 在输入框输入
  

• 使用 js 输入，虽然 dom 节点上有变化，但实际上 vue 实例里的值并没有修改
  

• 使用 js 输入，并使用 dispatchEvent，成功修改 vue 实例里对应的值