Question

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

Answer 1

我想我已经通过以下页面重现了您的问题。当悬停在其上的div元素滚动到视图中时，它将显示在菜单下方。悬停不会导致onmouseover触发。

<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

使用页面对象gem将固定元素后面的元素放入视图中

1 个答案: