Selenium::WebDriver::Error::ElementNotVisibleError: 使用 Chrome 浏览器时调用 send_key 函数时元素不可见答案

【问题标题】：Selenium::WebDriver::Error::ElementNotVisibleError: element not visible while calling send_key function when Chrome browser is usedSelenium::WebDriver::Error::ElementNotVisibleError: 使用 Chrome 浏览器时调用 send_key 函数时元素不可见
【发布时间】：2017-09-19 19:40:09
【问题描述】：

Selenium::WebDriver::Error::ElementNotVisibleError: 使用 Chrome 浏览器时调用 send_key 函数时元素不可见。

Selenium::WebDriver::Error::ElementNotVisibleError: element not visible

我正在并行运行一个 ruby selenium 脚本，并在通过 send_key 向网页发送文本输入时遇到以下问题。

Im using following versions:
(Session info: chrome=43.0.2357.125)
(Driver info: chromedriver=2.15.322448 (52179c1b310fec1797c81ea9a20326839860b7d3),platform=Linux 3.2.0-29-generic x86_64)

以下是我的代码的 sn-p：

class MyClass
dir="xyz"
 @headless = Headless.new(display: 100, reuse: true, destroy_at_exit: false).start
Selenium::WebDriver::Chrome.driver_path = "/home/ubuntu/chromedriver"
    @driver = Selenium::WebDriver.for :chrome, :switches => %W[--ignore-certificate-errors --enable-logging --user-data-dir=#{dir} --disable-popup-blocking --disable-translate --use-fake-ui-for-media-stream --use-file-for-fake-audio-capture=song.wav --use-file-for-fake-video-capture=city_cif_15fps.y4m --use-fake-device-for-media-stream]
 @driver.get(@base_url + "/#{$url}/")
      wait = Selenium::WebDriver::Wait.new(:timeout => 90) # seconds
      wait.until {
        @driver.find_element(:id, "join-dialog-join")}
      x=@driver.find_element(:id, "join-dialog-input-name")
      @driver.execute_script("document.getElementById('join-dialog-input-name').style.visibility='visible';")
      @driver.execute_script("document.getElementById('join-dialog-input-name').removeAttribute('hidden');")
      #@driver.save_screenshot("Join-display_login_#{DateTime.now.to_s}_1_#{$epname}.png")
      #puts x.attribute("innerHTML")
      @driver.find_element(:id, "join-dialog-input-name").send_key "#{$epname}"
end

我试过让元素可见，如果碰巧是这样，我也试过删除隐藏的属性。我也尝试使用 JS 代替 send_keys 但似乎没有帮助。

@driver.execute_script("document.getElementById('join-dialog-input-name').value='Nikhil';")

任何帮助将不胜感激！！。

是 Xvfb 造成的吗？以下是控制台日志的建议

[5245:5245:0626/181715:ERROR:chrome_browser_main_extra_parts_x11.cc(56)] X IO error received (X server probably went away)
[5280:5280:0626/181715:ERROR:x11_util.cc(82)] X IO error received (X server probably went away)

注意：仅当我并行启动脚本时才会出现此问题。

HTML 片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" class="snowy " lang="en"><head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- , maximum-scale=1.0 -->
<meta name="robots" content="noindex, nofollow" />
<!-- N.B.: 'IE=edge' must be the first, else it may be ignored -->
<!-- 'IE=edge' forces users out of compatibility/IE7 mode, even when in intranet -->
<!-- 'requiresActiveX=true' alerts users on IE10 metro mode that they need to switch back to IE32 -->
<!-- 'chrome=1' for chromeframe compatibility -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,requiresActiveX=true,chrome=1" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />  -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body class="gradient">

<div id="join-dialog" class="input-text" style="display: none;">
    <div class="dialog-header guest-flow">
        <div class="text-blue">
            <div class="proxima-bold text-25">Welcome.</div>
            <div class="proxima-light text-25">Please tell us who you are.</div>
        </div>
    </div>


    <div id="join-dialog-content">
        <!-- Guest workflow -->
        <div class="guest-flow" style="display: none;">
            <div class="field-wrapper">
                <input id="join-dialog-input-name" type="text" maxlength="50" placeholder="Enter your Name" rel="Enter your Name" value="" class="applytitle clearfocus" tabindex="1" aria-label="Enter Your Name" /><!-- _cato_ -->
                <div id="guest-name-error" class="error" style="display: none;">
                    Please enter a valid name.
                </div>
            </div>
            <div class="guest-email" style="display: none;">
                <div class="field-wrapper">
                    <input id="join-dialog-input-email" type="text" maxlength="70" value="" class="applytitle clearfocus" tabindex="2" aria-label="Enter your email address" /><!-- _cato_ -->
                    <div id="guest-email-error" class="error" style="display: none;">
                        Please enter a valid email address.
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body></html>

【问题讨论】：

更改一个元素的可见性可能还不够。它可能是不可见的祖先元素之一。尝试迭代 DOM 并检查它们是否也不是displayed?。同样，共享足够的 HTML 来重现问题也会有所帮助。
@justin 我已经更新了 HTML。我注意到在我尝试通过 JS 更改为“显示：块”的几个祖先元素中存在“显示：无”，但这似乎也没有帮助。 @driver.execute_script("document.getElementById('join-dialog-input-name').parentNode.style.display='block'")

标签： javascript ruby selenium-webdriver selenium-chromedriver

【解决方案1】：

我认为问题在于该元素在 Chrome 的默认视图框中确实不可见。（并且在默认窗口大小下无法使其可见）

要通过 webdriver 设置窗口大小，您可以执行 browser.manage().window().setSize(1200,1100); 之类的操作（这是在 javascript 下。我认为它在 ruby 下看起来很相似）

当您在没有 Xvfb 的无头模式下使用 chrome（自 V59 起）时。另见这篇文章https://stackoverflow.com/a/46299332/2718002

【讨论】：