Question

我正在和木偶戏测试形式。表单具有在输入元素上发生模糊事件时触发的验证。但是没有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");
  }
}

有没有办法模糊输入元素没有黑客？

Answer 1

我认为使用$eval可能更干净：

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

Answer 2

我不知道是否有一个很好的解决方案，因为在传统浏览器中仅使用鼠标和键盘并不存在明确的，无副作用“模糊”的概念。

但是，您可以尝试使用page.evaluate在页面上执行任意JavaScript，以便您可以直接在输入上调用blur函数。例如：

await page.evaluate(() => {
  document.querySelector('input[name=email]').blur()
})

虽然对我而言，这种方法比原始代码感觉更黑，因为这不一定会模仿用户将显示的行为。您可以通过直接执行blur来点击您的元素，从而绕过可能被触发的其他事件。老实说，我只需要点击你现在的另一个元素。

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

2 个答案: