文件上载文件名文本仅在Selenium Webdriver会话期间溢出，阻止上载按钮

在使用Selenium+Chrome+Webdriver进行测试期间，在文件输入字段中选择的文件名与字段边缘重叠，并覆盖了上载按钮，因此无法单击该按钮

我在测试中遇到的错误是有效且正确的，因为我无法手动单击按钮：

线程“main”org.openqa.selenium.element中的异常ClickInterceptedException:element单击intercepted:element。。。在点（427451）处不可单击。其他元素将收到单击：

为什么在webdriver会话中查看页面会更改字段的呈现

这是它在Chrome中通常的外观：

这是通过webdriver在Chrome中进行测试时的样子：

（它们在现实生活中大小相同）

我在这里加载相同的页面，在相同的浏览器版本中，以相同的用户身份登录，在相同的项目中，并上载相同的文件。我能看到的唯一区别是“坏的一个”是从Java、Selenium、Webdriver和VS代码项目中启动的。所以这是一个不同的过程

Chrome版本86.0.4240.80（正式版本）（x86_64）

铬驱动v86

MacOSX

浏览器窗口并不窄（响应性不影响此元素）

我使用的是最新的语义UI v2，字段位于片段中的一个手风琴内，但在2年的开发过程中，我从未见过这种溢出问题

    <div class="ui input">
        <input type="file" name="import" id="article-file-upload-file" class="ui button" required>
    </div>
    <button type="submit" id="article-file-upload-submit" class="ui primary button">
        <i class="icon upload"></i> UPLOAD
    </button>

上传

---

单击使用javascript应该可以：

JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver; 
String script = "document.getElementById('article-file-upload-submit').click();";
javascriptExecutor.executeScript(script);

---

事实证明，重叠问题只是我最新版本应用程序中的一个CSS错误，但出于某种原因，它只出现在新的web驱动程序Chrome会话中

一段时间后，它出现在另一个Chrome窗口中，因此可能只是CSS缓存问题。不过，我以前从未见过这种情况，因为我使用的是一个带有Browsersync的自动Gulp构建，它通常会使所有内容保持最新

---

所以这与webdriver无关，事实上，测试发现了一个真正的bug，所以它失败了，这很好

是的，我在某处也看到过，但还没试过。实际上，我更愿意解决重叠问题，但如果没有，那么我将尝试这个。