WebdriverIO中browser.acceptAlert()无法关闭弹窗及超时问题求助

初始问题 #

使用WebdriverIO编写的afterEach钩子代码如下：

afterEach(async () => {
    browser.execute('window.localStorage.clear()');
    browser.deleteAllCookies();
    browser.execute('sessionStorage.clear()');
    browser.refresh();
    console.log(await browser.isAlertOpen());
    browser.pause(3000);
    browser.acceptAlert();
});

执行browser.refresh();时会触发页面弹窗，但await browser.isAlertOpen()无有效输出，browser.acceptAlert()也无法关闭弹窗，导致后续测试无法继续执行。

后续尝试及新问题 #

修改代码尝试拦截beforeunload事件后，代码如下：

afterEach(async () => {
  browser.execute('window.localStorage.clear()');
  await browser.deleteAllCookies();
  await browser.execute(() => {
    window.localStorage.clear();
    window.sessionStorage.clear();
    window.beforeunload = (ev) => { 
      ev.stopImmediatePropagation(); };
      window.addEventListener("beforeunload", (ev) => {
      ev.stopImmediatePropagation();
    });
  });
  await browser.url('/');
});

运行测试时出现超时错误：

Timeout of 60000ms exceeded. The execution in the test "after each" hook took too long.

1. 修复初始弹窗无法处理的问题 #

初始代码的核心问题是异步操作未等待，且弹窗处理时机不合理：

• browser.deleteAllCookies()是异步方法，必须添加await等待执行完成
• 弹窗不会在刷新后立即出现，直接调用acceptAlert()会因弹窗未加载而失效，需用等待API替代pause()
• 增加异常捕获，避免因未检测到弹窗导致钩子报错

修改后的代码：

afterEach(async () => {
    // 等待所有存储清理操作完成
    await browser.execute('window.localStorage.clear()');
    await browser.deleteAllCookies();
    await browser.execute('sessionStorage.clear()');
    
    // 刷新页面
    await browser.refresh();
    
    // 等待弹窗出现（最多等待5秒）
    try {
        await browser.waitUntil(async () => await browser.isAlertOpen(), {
            timeout: 5000,
            timeoutMsg: '页面刷新后未检测到弹窗'
        });
        // 关闭弹窗
        await browser.acceptAlert();
    } catch (err) {
        console.warn('未检测到弹窗，跳过处理:', err.message);
    }
});

2. 解决拦截beforeunload后的超时问题 #

超时原因是beforeunload事件拦截逻辑不彻底，导致页面跳转时仍被阻塞：

• 仅阻止事件冒泡无法完全禁用弹窗，需直接覆盖beforeunload方法并返回undefined
• 重复绑定监听器可能引发冲突，需移除现有监听器并锁定onbeforeunload属性

优化后的代码：

afterEach(async () => {
    // 清理存储与Cookie
    await browser.execute('window.localStorage.clear()');
    await browser.deleteAllCookies();
    await browser.execute('window.sessionStorage.clear()');
    
    // 彻底禁用beforeunload弹窗
    await browser.execute(() => {
        // 覆盖全局beforeunload方法，直接返回undefined
        window.beforeunload = () => undefined;
        // 移除所有已绑定的beforeunload监听器
        const originalRemove = window.removeEventListener;
        window.removeEventListener = function(type) {
            if (type === 'beforeunload') {
                originalRemove.apply(this, arguments);
            }
        };
        // 锁定onbeforeunload属性，防止后续被修改
        Object.defineProperty(window, 'onbeforeunload', {
            get: () => () => undefined,
            set: () => {}
        });
    });
    
    // 跳转首页，此时不会触发弹窗
    await browser.url('/');
});

额外注意事项 #

• 确保使用最新版本的WebdriverIO，旧版本可能存在弹窗处理的兼容性Bug
• 若测试单页应用，可先用browser.execute('window.history.pushState({}, "", "/")')跳转，避免触发页面卸载事件
• 若仍存在超时，可检查wdio.conf.js中的hookTimeout配置，适当调整超时时间，但优先优化代码逻辑

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