如何在WebdriverIO与Spectron中使用JavaScript触发blur事件？

我之前在做Electron应用的Spectron测试时也碰到过一模一样的问题——WebdriverIO返回的元素对象确实不是原生DOM元素，没法直接调用on('blur')这种前端常用的事件绑定方法。给你几个实用的解决方案：

方法1：用browser.execute直接执行DOM操作 #

这是最可靠的方案，因为execute会在Electron的渲染进程中运行原生JavaScript，直接操作DOM元素：

// 先定位输入框并设置值
const inputField = await $('#target-input');
await inputField.setValue('测试文本');

// 通过execute触发blur事件
await browser.execute((selector) => {
  const element = document.querySelector(selector);
  if (element) element.blur();
}, '#target-input');

你只需要把选择器传进去，在渲染进程里找到元素后直接调用blur()就行，完全模拟真实的失焦行为。

方法2：使用WebdriverIO内置的blur方法 #

如果你用的是较新版本的Spectron（依赖的WebdriverIO版本足够新），其实已经内置了blur方法，可以直接链式调用：

const inputField = await $('#target-input');
await inputField.setValue('测试文本');
await inputField.blur();

这个方法最简洁，建议先检查下你的Spectron版本，能直接用的话优先选这个。

方法3：模拟点击其他区域触发失焦 #

如果上面两种方法都不适用（比如版本太旧），还可以用“模拟点击页面其他元素”的方式间接触发blur：

const inputField = await $('#target-input');
await inputField.setValue('测试文本');

// 点击页面空白处或者某个非输入元素
await $('body').click();

这个方法的好处是完全模拟用户的真实操作流程，但要注意选择点击的元素不能触发其他业务逻辑，避免干扰测试结果。

另外补充个小技巧：如果你的输入框需要模拟真实键盘输入的效果（而不是直接setValue），可以用addValue方法逐个输入字符，之后再搭配上面的blur方法，效果会更贴近真实用户操作。

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