Javascript Selenium Chrome WebDriver处理alert时报NoSuchAlertError如何解决

错误根本原因 #

你遇到的NoSuchAlertError报错，通常是以下3种情况导致的：

• 时序问题：捕获到点击操作异常时，浏览器原生alert还没完全渲染弹出，或者已经被自动关闭，此时调用switchTo().alert()自然找不到目标
• 弹窗非原生alert：你看到的弹窗是前端用div实现的自定义模态框，不属于浏览器原生的alert/confirm/prompt组件，无法通过switchTo().alert()获取
• 上下文切换问题：如果当前driver焦点停留在iframe/新标签页中，也可能无法直接捕获到顶层页面的alert

排查与解决方案 #

首先先确认弹窗类型：手动触发弹窗后，尝试拖动弹窗，如果无法拖动、且会阻塞整个页面操作，就是原生alert；如果可以自由拖动、打开浏览器控制台还能选中弹窗元素，就是自定义div模态框，两种场景对应不同处理方案。

场景1：确认是原生alert #

不要直接调用switchTo().alert()，先增加显式等待判断alert是否存在，示例代码如下：

// 提前引入依赖方法
const { until, Key } = require('selenium-webdriver');

try {
    let dataFromButton= await getDataFromButton(driver);
} catch (e) {
    try {
        // 最多等待2秒，等待alert渲染完成
        await driver.wait(until.alertIsPresent(), 2000);
        let alert = await driver.switchTo().alert();
        // 两种关闭方式二选一即可：1、点击取消按钮
        await alert.dismiss();
        // 2、触发ESC键关闭
        // await driver.actions().sendKeys(Key.ESCAPE).perform();
        
        // 处理完弹窗后可以重试之前的操作
        dataFromButton= await getDataFromButton(driver);
    } catch (alertErr) {
        // 等待超时仍未找到alert，说明不是alert导致的点击失败，走其他异常处理逻辑
        console.log('未找到原生alert', alertErr)
    }
}

场景2：是自定义div模态框 #

这类弹窗属于普通页面元素，不需要用alert相关API，直接定位取消按钮点击、或者发送ESC键即可：

const { until, By, Key } = require('selenium-webdriver');

try {
    let dataFromButton= await getDataFromButton(driver);
} catch (e) {
    try {
        // 方式1：定位取消按钮点击，替换为你实际的取消按钮选择器即可
        const cancelBtn = await driver.wait(until.elementLocated(By.css('.modal-cancel-button')), 2000);
        await cancelBtn.click();
        // 方式2：直接发送ESC键关闭
        // await driver.actions().sendKeys(Key.ESCAPE).perform();
        
        dataFromButton= await getDataFromButton(driver);
    } catch (modalErr) {
        console.log('未找到自定义弹窗元素', modalErr)
    }
}

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