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

Question

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

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

Exception in thread "main" org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <button type="submit" id="article-file-upload-submit" class="ui primary button">...</button> is not clickable at point (427, 451). Other element would receive the click: <input type="file" name="import" id="article-file-upload-file" class="ui button" required="" data-qa-tag="project-file-import">

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

这是 Chrome 中通常的样子：

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

（实际大小一样）

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

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

chromedriver v86

Mac OSX

浏览器 window 并没有变窄，（响应能力不影响此元素）。

我用的是最新的Semantic UI v2，这个字段是在一个segment里面的手风琴里面，但是在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>

Answer 1

点击使用 javascript 应该有效：

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

Answer 2

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

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

所以这与webdriver无关，实际上测试发现了一个真正的错误，所以它失败了！

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

File upload filename text overflows only during Selenium Webdriver session, blocking the upload button

selenium

google-chrome

testing

selenium-webdriver

semantic-ui