如何解决Puppeteer自动化E2E测试中Chrome未保存更改弹窗问题

遇到这种beforeunload弹窗打断测试的情况，有几个实用的解决办法：

1. 提前阻止弹窗触发（优先选择） #

直接给页面注入脚本，覆盖beforeunload事件，让弹窗根本不会弹出来：

// 在页面加载完成后执行
await page.evaluate(() => {
  window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = ''; // 部分浏览器需要设置此字段才能阻止弹窗
  });
});

如果是你自己开发的页面，更高效的方式是在测试环境里直接禁用beforeunload的触发逻辑，比如通过环境变量判断，测试时不执行弹窗相关代码。

2. 监听弹窗并自动取消 #

如果弹窗已经触发，用Puppeteer的dialog事件监听来自动点击取消按钮：

// 在执行跳转、刷新这类可能触发弹窗的操作前注册监听
page.on('dialog', async (dialog) => {
  if (dialog.type() === 'beforeunload') {
    await dialog.dismiss(); // 对应弹窗的「取消」按钮操作
  }
});

// 执行你的页面操作，比如跳转
await page.goto('https://your-test-url.com');

// 测试结束后记得移除监听，避免影响其他测试用例
page.removeAllListeners('dialog');

3. 强制导航（应急方案） #

如果前两种方法都不生效，可以直接用JS强制跳转，绕过弹窗：

await page.evaluate(() => {
  window.location.href = 'https://your-target-url.com';
});

这种方式会跳过页面的卸载逻辑，只建议作为应急手段使用。

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