使用 headless chrome 在 rails 中进行测试时出现 ElementNotVisibleError答案

【问题标题】：ElementNotVisibleError when using headless chrome for testing in rails使用 headless chrome 在 rails 中进行测试时出现 ElementNotVisibleError
【发布时间】：2018-11-24 03:20:41
【问题描述】：

我使用 capybara/headless_chrome 测试以下假设 And I click on the text "2018/2019" within ".year" 并不断得到错误

element not visible
    (Session info: headless chrome=67.0.3396.87)
    (Driver info: chromedriver=2.40.565386 (45a059dc425e08165f9a10324bd1380cc13ca363),platform=Mac OS X 10.13.5 x86_64) (Selenium::WebDriver::Error::ElementNotVisibleError)

按照here 的建议，我已经尝试调整窗口大小。但它没有用。我的步骤定义：

When(/^(?:|I )click on the text "([^"]*)"(?: within "([^"]*)")?$/) do |link, selector|
  begin
    page.find(:css, selector).click
  end
end

元素实际上是可见的并且被Capybara发现

[1] pry(#<Cucumber::Rails::World>)> page.find(:css, ".year")
    => #<Capybara::Node::Element tag="a" path="/html/body/div[2]/div[2]/section/div[2]/div/div[1]/div[1]/div[2]/div/div[2]/ul/li/a">

但是点击失败

[2] pry(#<Cucumber::Rails::World>)> page.find(:css, ".year").click
    Selenium::WebDriver::Error::ElementNotVisibleError: element not visible

为什么click 在这里不起作用？

编辑：链接的 HAML 是

           %ul.facet_values
            - unselected.each do |facet_value|
              %li.filtered{data: {hayf: {text: facet_value.name.downcase}}}
                = link_to facet_value.path, title: facet_value.name, class: 'year' do
                  =truncate("#{facet_value.name}", length: 24)
                - if facet.has_counts?
                  %span.small="(#{facet_value.count})"

我尝试使用Poltergeist 进行无头测试并得到Poltergeist detected another element with CSS selector 'html body header div.container-fluid' at this position，使用.trigger('click') 解决了该问题并且测试通过了。

【问题讨论】：

因为 Selenium 被设计为仅像用户那样与页面交互。由于用户不能与不可见的元素交互，Selenium 不允许这样做。我的猜测是你错误地得到了错误的元素并且你得到的元素是不可见的。使用$$(.year) 在开发控制台中检查您的定位器。它返回多少个元素？如果它不止一个，则您的定位器不是唯一的。如果你想要的元素是集合中的第一个元素，你会没事的，但我猜它不是。您可能需要找到一种更独特的方式来定位该元素。
该元素是可见的，我在控制台中检查了它。 $$('.year') 返回 [a.year]，这是一个长度为 1 的数组。无论如何，谢谢！
太好了……所以现在可能是时间问题。您是否尝试过添加等待？您可以等待元素可单击，然后单击它。有关示例，请参阅 this 和 this。
它在非无头模式下工作吗？你还没有设置Capybara.ignore_hidden_elements = false是吗？什么是实际的 HTML？ ——
@JeffC 假设 OP 没有做任何愚蠢的事情（比如设置 Capybara.ignore_hidden_elements = false），因为 Capybara 具有内置的等待/重试行为，所以不太可能是时机

标签： ruby-on-rails selenium testing capybara google-chrome-headless

【解决方案1】：

由于这在非无头 Chrome 或 Poltergeist 中不起作用，因此最简单的答案是该元素实际上不可见。首先删除Capybara.ignore_hidden_elements = false 设置，因为这在测试应用程序时没有意义，并且会搞砸各种等待行为。其次，在您尝试单击链接之前，使用save_and_open_screenshot 获取页面实际外观的图片。

我猜您会看到此时链接实际上不可见，并且您的测试缺少用户必须执行的步骤才能使链接可见，它是否在您必须执行的菜单中首先将鼠标悬停在不同的元素上？是在弹出窗口中，您必须先单击其他内容吗？是否需要滚动到？等等

最后，如果您通过 Selenium 坚持使用 Chrome，您通常会遇到更少的问题。 Poltergeist 使用了很久没有更新的 PhantomJS，并且不支持现代 JS 或 CSS，这可能会导致各种奇怪。

【讨论】：

谢谢。我的总体目标是摆脱 PhantomJS 并转移到 Selenium，因此我正在修复测试以使用 headless_chrome。我制作了屏幕截图，链接在那里（请参阅问题）。将遵循其他建议。
@AnnaKizilova 问题中的图片来自实际测试运行吗？如果是这样，Poltergeist 抱怨的标题元素在哪里？没有一个司机认为它是可见的，所以要么图片没有显示你认为的元素，要么有一个重叠的元素。在非无头模式下运行并使用浏览器控制台检查页面
你完全正确。该元素被埋在一个切换的 div 中。我添加了几个步骤使其可见并且测试通过了。感谢您对新手非常有礼貌和耐心。这种态度鼓励提出关于 SO 的问题。