如何在Puppeteer中触发输入元素的blur事件？

我太懂这种难受了——用Puppeteer测表单时，偏偏遇到依赖blur事件的验证，试了点击body、focus普通元素都没用，只能靠点击假元素凑活，确实不是长久之计。给你几个更靠谱的方案：

方案1：直接调用DOM元素的原生blur()方法 #

这是最直接有效的方式，通过page.evaluate()在浏览器上下文里直接触发目标元素的blur事件，完全不需要依赖页面上的其他元素。

修改你的LoginPage类，加一个专门触发blur的方法：

export class LoginPage {
  constructor(private page: Page) {}

  async triggerInputBlur(selector: string): Promise<void> {
    await this.page.evaluate((sel) => {
      const inputElement = document.querySelector(sel);
      if (inputElement) {
        inputElement.blur(); // 直接调用原生DOM方法
      }
    }, selector);
  }

  async setup(): Promise<void> {
    await this.page.goto(MY_LOGIN_FORM_URL);
    
    // 示例：输入用户名后触发blur验证
    await this.page.type('#username', 'test-user');
    await this.triggerInputBlur('#username');
    
    // 这里就可以检查验证提示是否出现了
    const validationMessage = await this.page.$eval('.error-message', el => el.textContent);
    console.log(validationMessage);
  }
}

方案2：聚焦到另一个可聚焦元素 #

如果想更贴近真实用户的操作逻辑（用户通常是点击下一个输入框或者按钮来触发blur），可以直接聚焦到页面上的其他可聚焦元素（比如另一个输入框、按钮、链接等）：

async setup(): Promise<void> {
  await this.page.goto(MY_LOGIN_FORM_URL);
  await this.page.type('#username', 'test-user');
  
  // 聚焦到密码输入框，自动触发用户名输入框的blur
  await this.page.focus('#password');
}

这个方法的前提是页面上存在其他可聚焦元素，如果没有的话，方案1会更稳妥。

方案3：手动派发blur事件 #

和方案1类似，你也可以用Puppeteer的dispatchEvent方法直接给目标元素派发blur事件：

await this.page.dispatchEvent('#username', 'blur');

效果和调用原生blur()方法几乎一致，选哪个全看个人习惯。

对比你之前用的点击假图片的方法，这几个方案都更稳定，不需要依赖页面上的冗余元素，维护起来也更方便。

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