遗留应用中带onblur的输入框导致Cypress测试失败求助

核心问题 #

你的应用JavaScript代码存在错误，导致页面抛出异常，进而中断了Cypress的测试操作：

$('input[id="my_field"]').onblur=trim(this.value);

这里的问题在于：

• 你直接将trim(this.value)的执行结果赋值给了onblur，而非赋值一个事件处理函数。代码执行时，this指向全局对象（浏览器环境下为window），window.value是undefined，执行trim()后返回空字符串，最终onblur被赋值为空字符串。
• 当输入框触发blur事件时，浏览器尝试执行这个空字符串，会抛出JavaScript异常，导致页面处于错误状态，Cypress的type操作因此失败。

修复方案 #

方案1：修复应用代码（推荐）

修改遗留应用的JavaScript代码，正确绑定blur事件处理函数：

// 适配你现有jQuery写法的绑定方式
$('input[id="my_field"]').on('blur', function() {
  this.value = this.value.trim();
});

或者原生JS写法：

document.getElementById('my_field').addEventListener('blur', function() {
  this.value = this.value.trim();
});

这样当输入框失去焦点时，才会执行trim操作，且this指向输入框元素，能正确获取并处理输入值。

方案2：在Cypress测试中临时修正（若无法修改应用代码）

如果暂时不能改动遗留应用代码，可以在测试中先修正输入框的onblur绑定，再执行输入操作：

cy.get('input[id="my_field"]')
  .then($input => {
    // 清除错误的onblur赋值
    $input[0].onblur = null;
    // 可选：绑定正确的blur处理逻辑，保留原有业务行为
    $input.on('blur', function() {
      this.value = this.value.trim();
    });
  })
  .type('1');

验证逻辑 #

修改后重新运行测试，type操作即可正常执行；而注释掉应用的onblur代码测试正常，也侧面验证了是这段错误的JS代码导致的测试失败。

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