如何在Puppeteer的page.evaluate方法中为点击操作添加间隔延迟？

page.evaluate 回调内的所有代码均运行在浏览器上下文，而非你的Node.js代码运行的服务端上下文，之前的方案不生效的核心原因：

• page.waitForTimeout 是Puppeteer封装的Node层API，浏览器环境不存在该方法，直接调用会抛出未定义错误
• 直接使用setTimeout(() => {}, 1000)属于异步非阻塞代码，不会阻断后续的同步遍历逻辑，不会产生预期的间隔效果

该方案调试成本更低，也能避免点击后DOM刷新导致的元素丢失问题：

// 拿到所有class为button-text的元素句柄
const buttonList = await page.$$('.button-text')

for (const button of buttonList) {
  // 获取元素内部文本
  const innerText = await button.evaluate(el => el.innerText.trim())
  if (innerText === 'Add') {
    // 触发点击
    await button.click()
    // 等待1秒再执行下一次操作
    await page.waitForTimeout(1000)
  }
}

如果你的场景需要所有操作都在浏览器端完成，可以手动封装可等待的延迟方法：

await page.evaluate(async () => {
  // 封装浏览器端可await的延迟方法
  const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))
  // 拿到所有目标元素
  const buttonList = document.querySelectorAll('.button-text')

  for (const button of buttonList) {
    if (button.innerText.trim() === 'Add') {
      button.click()
      // 等待1秒
      await delay(1000)
    }
  }
})

• 使用方案2时，必须给page.evaluate的回调函数加上async关键字，否则无法正常使用await语法
• 如果点击元素后会触发页面跳转、局部DOM刷新，优先使用方案1，避免浏览器上下文元素失效导致的报错

内容的提问来源于stack exchange，提问作者Moe Ali