1

我的页面在顶部包含两个 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% 是现在的问题。

4

1 回答 1

0

我想我已经用下一页重现了您的问题。当要悬停的 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
于 2014-02-02T18:59:16.870 回答