14

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?

Ryoji Ishii
  • 303
  • 1
  • 4
  • 14

2 Answers2

23

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

await page.$eval('input[name=email]', e => e.blur());
Johannes Kronmüller
  • 266
  • 3
  • 4
0

The answer of Johannes Kronmüller is correct. If you are using Typescript, you should type the element. Here is what you should use :

await page.$eval('input[name=email]', (e: HTMLInputElement) => e.blur());
Quentin Grau
  • 41
  • 3