当前位置: 首页 > 面试题库 >

带有seleniumwebdriver的鼠标滚轮,在没有滚动条的元素上?

田普松
2023-03-14
问题内容

我正在尝试驱动类似于Google Maps的网络地图的一部分,在该地图上,通过鼠标悬停时的滚动来进行放大/缩小。理想情况下,我希望能够执行以下操作:

someElement.scroll(-50)

我在文档中看到的最接近的方法是clicksend_keys,但是这两个方法都不可以滚动。我也尝试通过Javascript将滚动条发送到页面,例如,driver.execute_script("scroll(0,-50)")这似乎没有任何作用。

我怎样才能做到这一点?


问题答案:

要重现/测试鼠标滚轮,您必须通过脚本注入将mouseovermousemovewheel事件发送到顶部元素。

这是Google Map的工作示例:

from selenium import webdriver
from selenium.common.exceptions import WebDriverException

def wheel_element(element, deltaY = 120, offsetX = 0, offsetY = 0):
  error = element._parent.execute_script("""
    var element = arguments[0];
    var deltaY = arguments[1];
    var box = element.getBoundingClientRect();
    var clientX = box.left + (arguments[2] || box.width / 2);
    var clientY = box.top + (arguments[3] || box.height / 2);
    var target = element.ownerDocument.elementFromPoint(clientX, clientY);

    for (var e = target; e; e = e.parentElement) {
      if (e === element) {
        target.dispatchEvent(new MouseEvent('mouseover', {view: window, bubbles: true, cancelable: true, clientX: clientX, clientY: clientY}));
        target.dispatchEvent(new MouseEvent('mousemove', {view: window, bubbles: true, cancelable: true, clientX: clientX, clientY: clientY}));
        target.dispatchEvent(new WheelEvent('wheel',     {view: window, bubbles: true, cancelable: true, clientX: clientX, clientY: clientY, deltaY: deltaY}));
        return;
      }
    }    
    return "Element is not interactable";
    """, element, deltaY, offsetX, offsetY)
  if error:
    raise WebDriverException(error)

options = webdriver.ChromeOptions()
options.add_argument("--disable-infobars --disable-extensions --window-size=1366,768")
driver = webdriver.Chrome(chrome_options=options)
driver.get("https://www.google.co.uk/maps")

# get element
elm = driver.find_element_by_css_selector("#scene > div.widget-scene > canvas")

# zoom in with mouse wheel
wheel_element(elm, -120)

# zoom out with mouse wheel
wheel_element(elm, 120)

作为替代方案,您可以发送Google地图+/-的缩放比例:

# get element
elm = driver.find_element_by_css_selector("#scene > div.widget-scene > canvas")

# zoom in with shortcut
elm.send_keys("+")

# zoom out with shortcut
elm.send_keys("-")


 类似资料:
  • 问题内容: 我正在尝试驱动类似于Google Maps的网络地图的一部分,在该地图上,放大/缩小是通过在鼠标悬停时滚动来完成的。理想情况下,我希望能够执行以下操作: 我在文档中看到的最接近的方法是和,但是这两个方法都不可以滚动。我也尝试过通过Javascript将滚动条发送到页面,例如,这似乎没有任何作用。 我怎样才能做到这一点? 问题答案: 要重现/测试鼠标滚轮,您必须使用脚本注入将,和事件发送

  • 问题内容: 我有这个HTML结构: 我想在主体部分(#body)中包含三个部分而不会溢出。因此,我需要在中间部分使用滚动条。 我尝试了这个CSS: 和这个: 但是它们都不起作用。 我在JSFiddle上做了一个例子。 我可以仅使用CSS和HTML来做到这一点吗?我宁愿避免使用Javascript。 问题答案: Flexbox是一种现代替代方案,可让您无需固定高度或JavaScript即可执行此操作

  • 问题内容: 在鼠标滚轮上滚动它执行水平滚动。 已编辑 好吧,firebug说他在用 问题答案: 看来他只是将mousewheel事件映射到滚动区域。在IE中,仅通过使用方法就非常容易-滚动水平条的量为垂直条通常滚动的量。其他浏览器不支持该方法,因此您必须随心所欲地滚动任意数量:

  • 问题内容: 我想创建一个可以滚动但不显示滚动条的div。我已经找到了Webkit的解决方案(如下),但是如何在其他浏览器中实现呢? 我宁愿避免使用javascript插件。希望找到CSS或特定于供应商的解决方案。 问题答案: 您必须将可滚动div包裹在另一个div中,以隐藏滚动条。 。 顺便说一句:一个漂亮的jQuery小插件jScrollPane使用了相同的技术

  • 问题内容: 我的意思是滚动时会轻松。 问题答案: var $pages = $(“.page”), PS: 使用,如果你的s为像一个滚动的DIV内(而不是) 注意: 对于 移动设备, 您可能希望针对浏览器的标签栏高度调整值(最好还是完全避免这种情况)。你有主意

  • 我一直在努力解决HTML/CSS粘滞头+滚动条的问题。我们正在创建一个程序,一旦containersize达到某个点(取决于用户的分辨率),就需要滚动条显示出来。 我在表中的第二列上强制设置一个min-width,因此表在某个点停止递减,并强制容器保持在某个宽度。容器上的溢出显示水平滚动条。一切正常。一旦我为垂直滚动添加了第二个滚动条,事情就会变得一团糟。有人有解决这个问题的办法吗?我想在.tab