调用Puppeteer的waitForNetworkIdle两次触发Timeout cleared错误求助

我重复调用如下函数时，第二次调用会抛出Timeout cleared错误：

private async clickEnterButton() {
    this.logger('Clicando em entrar')
    await this.page.waitForSelector('#submit-button')
    await this.page.click('#submit-button')
    await this.page.waitForNetworkIdle()
}

已尝试在函数外部调用waitForNetworkIdle、更换Node.js和Puppeteer版本，但问题依旧。

可能的解决方法： #

• 明确waitForNetworkIdle参数，避免监听冲突
  Puppeteer的waitForNetworkIdle会注册网络事件监听器，重复调用时默认参数可能导致前序监听器未清理引发冲突。可以指定明确的空闲时长和超时时间，确保每次等待的逻辑独立：

  private async clickEnterButton() {
      this.logger('Clicando em entrar')
      await this.page.waitForSelector('#submit-button')
      await this.page.click('#submit-button')
      // 自定义空闲时间和超时，降低冲突概率
      await this.page.waitForNetworkIdle({ idleTime: 500, timeout: 30000 })
  }
  

• 用waitForNavigation替代导航场景的waitForNetworkIdle
  如果点击按钮后存在页面导航行为，使用waitForNavigation结合networkidle2参数更适配，还能避免重复网络监听的问题：

  private async clickEnterButton() {
      this.logger('Clicando em entrar')
      await this.page.waitForSelector('#submit-button')
      // 并行执行点击和导航等待，确保逻辑同步
      await Promise.all([
          this.page.click('#submit-button'),
          this.page.waitForNavigation({ waitUntil: 'networkidle2' })
      ])
  }
  

• 监听关键请求，替代全局网络空闲等待
  页面可能存在持续后台请求（如轮询、WebSocket），导致waitForNetworkIdle无法满足条件。可以监听点击后必须完成的关键请求，再做短暂空闲等待：

  private async clickEnterButton() {
      this.logger('Clicando em entrar')
      await this.page.waitForSelector('#submit-button')
      // 监听登录接口这类关键请求完成
      const loginResponse = this.page.waitForResponse(res => 
          res.url().includes('/api/login') && res.ok()
      )
      await this.page.click('#submit-button')
      await loginResponse
      // 等待短暂网络空闲
      await this.page.waitForNetworkIdle({ idleTime: 300 })
  }
  

• 清理页面状态或使用新页面实例
  同一页面实例重复操作可能存在状态污染，可在两次调用间刷新页面，或创建新页面执行第二次操作：

  // 第一次调用
  await this.clickEnterButton()
  // 刷新页面重置状态
  await this.page.reload()
  // 第二次调用
  await this.clickEnterButton()
  

内容的提问来源于stack exchange，提问作者Pedro Bruneli