page.click点击按钮未触发JS逻辑，加waitFor延时才生效的原因是什么？

根因分析 #

• 按钮点击未真正生效：你的「下一步」按钮虽然已经渲染出DOM，但点击事件绑定、disabled状态解除逻辑是异步执行的（比如依赖前序表单校验初始化、前置接口返回才解锁按钮）。直接调用page.click()时，按钮还未完成状态初始化，点击事件被拦截/忽略，自然不会触发后续POST请求和页面跳转。加500ms硬延时刚好等到按钮状态就绪，点击才能正常触发逻辑。
• waitUntil配置不生效的原因：waitUntil参数仅控制页面级的资源加载、导航完成时机，无法感知组件内部的状态变更、事件绑定逻辑，所以调整该参数无法解决问题。
• 部分前端框架的事件委托机制、组件自带的点击防抖/节流逻辑，对Puppeteer/Playwright默认的极速模拟点击时序敏感，也可能导致点击事件没有被业务逻辑捕获。
• 测试代码语法错误：你给出的测试代码中waitForSelector传入了数组格式的参数['data-test-address-page']，该方法的选择器参数要求为字符串格式，语法错误会导致等待逻辑直接失效。

可靠解决方案 #

不要使用固定硬延时，替换为以下针对性的等待逻辑即可：

1. 先修正语法问题，点击前先等待按钮处于可交互状态

// 等待按钮可见且未被禁用
await page.waitForSelector('[data-test-next-step]:not(:disabled)', { state: 'visible' })
await page.click('[data-test-next-step]')
// 等待下一页元素时可适当延长超时时间避免假死
await page.waitForSelector('[data-test-address-page]', { timeout: 10000 })

2. 若仍有问题，可给点击操作增加短延迟模拟真实用户行为

await page.click('[data-test-next-step]', { delay: 100 })

3. 还可以结合你的业务逻辑，显式等待POST请求完成后再校验页面跳转

// 先监听下一步触发的POST请求
const postRequest = page.waitForRequest(req => req.method() === 'POST' && req.url().includes('你的业务接口路径'))
await page.click('[data-test-next-step]')
await postRequest
await page.waitForSelector('[data-test-address-page]')

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