Angular应用中WebPack iframe引发Selenium ElementClickInterceptedException问题

问题根源分析 #

无头模式下Chrome的渲染环境和常规浏览器存在差异，WebPack相关的iframe大概率是开发环境的热加载/调试插件（比如Webpack Dev Server的overlay）在无头模式下未被正确隐藏，导致它遮挡了"Sign In"按钮；另外窗口尺寸设置不合理也可能导致元素被页面其他元素遮挡。

具体解决方案 #

1. 处理无头模式下的动态iframe

先检测页面中是否存在目标iframe，若存在则切换进去再切回主文档，确保主页面元素可正常访问：

// 在LoginPage的LogIn方法中，点击按钮前添加iframe处理逻辑
try
{
    var iframe = wait.Until(d => d.FindElement(By.TagName("iframe")));
    driver.SwitchTo().Frame(iframe);
    driver.SwitchTo().DefaultContent();
}
catch (WebDriverTimeoutException)
{
    // 页面无iframe则跳过
}

2. 等待元素完全可点击而非仅存在

原代码仅等待元素存在，改为等待元素处于可交互状态：

// 替换原按钮定位逻辑，改用ElementToBeClickable确保元素可点击
var button = wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[text()='Sign In']")));

3. 优化无头模式窗口配置

改用新版无头模式并直接最大化窗口，避免因尺寸问题导致元素被遮挡：

if (runInHeadlessMode)
{
    options.AddArgument("--headless=new"); // 新版无头模式更贴近常规浏览器行为
    options.AddArgument("--start-maximized"); // 直接最大化窗口，替代手动设置尺寸
}

// 移除原无头模式下的手动Size设置代码

4. 用JavaScript点击作为兜底

如果元素确实被拦截，直接通过JS执行点击绕过遮挡：

// 替换原button.Click();
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript("arguments[0].click();", button);

完整修改后的LoginPage示例 #

public class LoginPage
{
    private readonly IWebDriver driver;
    private readonly WebDriverWait wait;

    private IWebElement UsernameElement => driver.FindElement(By.Id("username"));
    private IWebElement PasswordElement => driver.FindElement(By.Id("password"));

    public LoginPage(IWebDriver driver)
    {
        this.driver = driver;
        wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));
    }

    public void LogIn(string username, string password)
    {
        // 等待页面完全加载完成
        wait.Until(d => ((IJavaScriptExecutor)d).ExecuteScript("return document.readyState").Equals("complete"));

        // 等待输入框可交互后输入内容
        wait.Until(ExpectedConditions.ElementToBeClickable(UsernameElement)).SendKeys(username);
        wait.Until(ExpectedConditions.ElementToBeClickable(PasswordElement)).SendKeys(password);

        // 处理可能出现的遮挡iframe
        try
        {
            var iframe = wait.Until(d => d.FindElement(By.TagName("iframe")));
            driver.SwitchTo().Frame(iframe);
            driver.SwitchTo().DefaultContent();
        }
        catch (WebDriverTimeoutException) { }

        // 等待按钮可点击并执行JS点击
        var button = wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//button[text()='Sign In']")));
        ((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].click();", button);

        wait.Until(d => !d.Url.Contains("/signin"));
    }
}

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