如何在 puppeteer 中模糊输入元素？答案

【问题标题】：How to blur input element in puppeteer?如何在 puppeteer 中模糊输入元素？
【发布时间】：2018-04-04 06:08:08
【问题描述】：

我正在用 puppeteer 测试表格。该表单具有在输入元素上发生模糊事件时触发的验证。但是 puppeteer 中没有用于模糊元素的 API。

我正在尝试聚焦/单击 body 或 div 元素，但这无法触发我的 onBlur 验证。 page.click("body")，page.focus("body")

现在，我正在使用虚假点击图像来进行火焰模糊事件。但这不是好办法。

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

  async setup(): Promise<void> {
    await this.page.goto(MY_LOGIN_FORM);
  }

  async typeEmail(email: string): Promise<void> {
    await this.page.type("input[name=email]", email);
    await this.blur();
  }

  async typePassword(password: string): Promise<void> {
    await this.page.type("input[name=password]", password);
    await this.blur();
  }

  async clickLoginButton(): Promise<void> {
    await this.page.click("button");
  }

  private async blur(): Promise<void> {
    // HACK
    await this.page.click("img");
  }
}

有什么方法可以在没有 hack 的情况下模糊输入元素？

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

我认为使用$eval 甚至可能更干净一点：

await page.$eval('input[name=email]', e => e.blur());

【讨论】：