使用页面对象 gem 将固定元素后面的元素带入视图答案

【问题标题】：Bringing elements behind fixed element into view with page-object gem使用页面对象 gem 将固定元素后面的元素带入视图
【发布时间】：2014-02-03 02:59:16
【问题描述】：

我的页面在顶部包含两个 div（一个标题和另一个部分），它们是固定的，而页面的其余部分可以滚动。我需要将鼠标悬停在链接元素上，然后单击将鼠标悬停在链接上时出现的按钮。由于我使用的是页面对象 gem，因此我尝试使用 scroll_into_view。但是，链接仍然保留在固定 div 后面。这可以防止按钮显示。有什么办法可以强迫它进入视野吗？页面可滚动区域顶部和底部的链接工作正常，但页面中间的项目有问题，因为它们在滚动时出现在固定 div 后面。我正在使用 ruby+watir-webdriver 和页面对象 gem。

很遗憾，我无法发布该网站。

我的代码如下所示：

class MyPage
  div(:items, :class => 'product_items')

  def index_for(product)
    index = items_elements.find_index{|x| x.h4_element.text == product}
    index
  end

  def add_product(product)
    index = index_for(product)
    product = items_elements[index.to_i]
    product.link_element(:class => 'product_more_info').when_present.scroll_into_view
    product.link_element(:class => 'product_more_info').hover
    product.button_element(:class => 'product_info_button').when_present.click
  end
end

页面中间的链接保留在固定的 div 后面。当它悬停时，它实际上会触发标题中的导航下拉菜单，因为链接就在它的正后方。似乎适用于 70% 的链接。中间的 30% 是现在的问题。

【问题讨论】：

有什么方法可以链接到相关网站吗？如果你不能，我明白。
另外，发布您的代码会有很大帮助。
嗯。因此，如果我对您的理解正确，则您需要将鼠标悬停在一个链接上。当你将鼠标悬停在它上面时，会出现一些带有按钮的东西。但是链接在一些div后面？您可以将鼠标悬停在此元素上并在不使用 watir 的情况下查看按钮吗？
如果您至少可以提供屏幕截图可能会有所帮助。很难想象页面的外观以及您想要与之交互的内容。
@snowe2010 我可以将鼠标悬停在它上面，但由于它位于全局导航下拉菜单的后面，因此全局导航下拉菜单会打开。贾斯汀我知道这很难想象。我需要弄清楚如何发布示例，因为我无法访问页面或屏幕截图。谢谢。

标签： ruby watir-webdriver page-object-gem

【解决方案1】：

我想我已经用下一页重现了您的问题。当要悬停的 div 元素滚动到视图中时，它会出现在菜单下方。悬停不会触发鼠标悬停。

<html>
  <body>
    <div style="position:fixed; left:0; top:0; z-index=99999; border:2px solid red; width:100%">menu</div>
    <div class="spacer" style="height:2000px"></div>
    <div id="hoverable" onmouseover="document.getElementById('target').style.display = '';">to hover</div>
    <button id="target" style="display:none;">the button</button>
    <div class="spacer" style="height:2000px"></div>
  </body>
</html>

一种可行的解决方案（至少对于此示例页面而言）是尝试将鼠标悬停在元素上。如果按钮没有出现，则假设菜单挡住了，向后滚动页面并重试。假设上面的页面，这可以通过页面对象来完成：

class MyPage
  include PageObject

  div(:hoverable, :id => "hoverable")
  button(:target, :id => "target")

  def hover()
    # Try to hover over the element
    hoverable_element.when_present.hover

    # If the button element does not appear, the menu must be in the way.
    # Scroll back up 100 px so that the div appears below the menu and try again.
    unless target_element.visible?
      execute_script('window.scrollBy(0,-100);')
      hoverable_element.hover
    end

    # Check that the button appears as expected
    p target_element.visible?
    #=> true
  end
end

将相同的想法应用于您的页面对象，add_product 方法将变为：

def add_product(product)
  index = index_for(product)
  product = items_elements[index.to_i]
  product.link_element(:class => 'product_more_info').hover
  unless button_element(:class => 'product_info_button').visible?
    execute_script('window.scrollBy(0,-100);')
    product.link_element(:class => 'product_more_info').hover
  end
  product.button_element(:class => 'product_info_button').click
end

【讨论】：

谢谢贾斯汀。我将不得不试一试。仍在尝试获得发布页面或屏幕截图的权限。