How to blur input element in puppeteer?

Question

I'm testing form with puppeteer. The form has validation that fires when blur event happens on input element. But there are no API to blur element in puppeteer.

I'm trying focusing/clicking body or div element, but that can't fire my onBlur validations. page.click("body"), page.focus("body")

Now, I'm using fake click image for fire blur event. But it's not good way.

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");
  }
}

There are any way to blur input element without hacks?

Answer 1

I think using $eval might even be a little bit cleaner:

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