Div 在有头 Chrome 中可见，在无头 Chrome 中不可见

Question

我正在尝试在 Katalon Studio 中测试我们软件的登录页面（它使用 Selenium），而无头 Chrome 不会呈现显示欢迎消息的 iframe。WebUI.verifyElementVisible 失败，而 WebUI.verifyElementPresent 成功。屏幕截图也没有显示。 Headed Chrome 可以毫无问题地运行测试。

当我在无头模式下从命令行运行 Chrome 时，其 --dump-dom 选项会产生截断的输出，但我可以看到 iframe 的 div 容器是不可见的：

<div id="Div_AlertWin" style="position:absolute;display:none" onclose="fnLoginUnloadAlert()">

当我在带头的 Chrome 中检查它时，它是可见的，

<div id="Div_AlertWin" style="position: absolute; display: block; left: 183.5px; top: 218.5px;" onclose="fnLoginUnloadAlert()">

看起来像是启动 JS 脚本之一显示 div 在无头 Chrome 中无法正确运行。如何调试它的 JS 执行？我不能使用--remote-debugging-port，因为公司防火墙阻止了appspot。

Answer 1

根据您提供的 HTML，Normal Chrome Browser 呈现 HTML DOM 如下：

<div id="Div_AlertWin" style="position: absolute; display: block; left: 183.5px; top: 218.5px;" onclose="fnLoginUnloadAlert()">

Headless Chrome Browser 将HTML DOM 呈现如下：

<div id="Div_AlertWin" style="position:absolute;display:none" onclose="fnLoginUnloadAlert()">

所以这里我们需要更改为style="position:absolute;display:block"，然后他们找到/定位/搜索WebElement，如下所示：

((JavascriptExecutor)driver).executeScript("document.getElementById('Div_AlertWin').style.display='block';");
WebElement element = driver.findElement(By.id("Div_AlertWin"));