Puppeteer测试alert时无法触发dialog事件捕获弹窗问题求助

核心原因 #

• 事件监听注册时机滞后
  page.on('dialog') 需要在所有可能触发弹窗的操作（包括页面加载、表单提交、交互操作等）执行前完成绑定，否则弹窗触发时还没有对应的监听回调，事件就会被丢失。
• 未等待表单提交后的页面加载流程完成
  表单提交会触发页面跳转，原有代码提交表单后直接执行断言，此时新页面还未完成渲染，alert逻辑尚未执行，断言就已经运行结束，自然无法捕获到弹窗内容。
• 浏览器安全策略差异
  手动操作使用的浏览器和Puppeteer默认启动的浏览器安全配置可能存在差异，需确认Puppeteer启动时没有开启拦截弹窗、拦截内联脚本的相关配置。

修复后的代码示例 #

let msg = '';
// 所有页面操作前先绑定dialog事件监听
page.on('dialog', async dialog => {
  msg = dialog.message();
  await dialog.dismiss();
});

await page.goto('http://localhost:8080/', {
  waitUntil: 'networkidle2'
});
await page.$eval('#value', el => el.value = '<script>alert("BLEH")</script>');

// 同时等待表单提交和页面跳转完成
await Promise.all([
  page.waitForNavigation({ waitUntil: 'networkidle2' }),
  page.$eval('#message', form => form.submit())
]);

expect(msg).toEqual('BLEH');

额外注意项 #

• 需确认服务端返回的提交后页面中，<script>alert("BLEH")</script> 确实没有被转义为普通文本，否则脚本不会执行，自然不会触发弹窗。
• 避免未声明变量直接赋值，防止全局变量污染导致的取值异常。

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