带有硒网络驱动程序的鼠标滚轮，在没有滚动条的元素上？

Posted 2023-03-23

【中文标题】带有硒网络驱动程序的鼠标滚轮，在没有滚动条的元素上？

【英文标题】：Mouse scroll wheel with selenium webdriver, on element without scrollbar?

【发布时间】：2021-11-19 02:33:38

【问题描述】：

我正在尝试驱动类似于谷歌地图的网络地图的一部分，其中放大/缩小是通过在鼠标悬停时滚动来完成的。理想情况下，我希望能够做这样的事情：

someElement.scroll(-50)

我在文档中看到的最接近的方法是 click 和 send_keys，但它们都不滚动。我还尝试通过 javascript 将滚动条发送到页面，例如driver.execute_script("scroll(0,-50)") 不过这似乎没有任何作用。

我该怎么做？

【参考方案1】：

要重现/测试鼠标滚轮，您必须通过脚本注入向顶部元素发出 mouseover、mousemove 和 wheel 事件。

这是一个使用 Google 地图的工作示例：

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("-")

【讨论】：

这正是我想要的！非常感谢你。 :)（诚然，我确实必须将 css 选择器编辑为 "#scene > .canvas-container canvas"，但这没什么大不了的）

如何在 Java 中做到这一点？

【参考方案2】：

在谷歌地图上，有一个放大/缩小按钮。您可以使用它来代替鼠标滚动。

//点击放大

driver.find_element_by_id('widget-zoom-in').click()

//点击缩小

driver.find_element_by_id('widget-zoom-out').click()

【参考方案3】：

通过将 JS sn-p 外包到一个单独的文件中并将其包装成带有可读参数名称的旧式 JS 模块格式，可以稍微改进一下 Florents 的好答案。

一个名为的文件，例如simulate_wheel.js 与：

/* global arguments */
(function (element, deltaY, offsetX, offsetY) 
    var box = element.getBoundingClientRect();
    var clientX = box.left + (offsetX || box.width / 2);
    var clientY = box.top + (offsetY || 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";
).apply(null, arguments);

然后可以阅读和使用以下内容

# Load it using the module loader, the module in this example is called "helper_js"
# Alternatively, simple read functions could be used
import pkgutil
wheel_js = pkgutil.get_data("helper_js", "simulate_wheel.js").decode("utf8")

def simulate_wheel(element, deltaY=120, offsetX=0, offsetY=0):
    error = element._parent.execute_script(wheel_js, element, deltaY, offsetX, offsetY)
    if error:
        raise WebDriverException(error)

这是similar to how it's down inside the Selenium bindings for Python。

【参考方案4】：

你可以试试 PyRobot 类，先关注你想要放大/缩小的点，然后使用 PyRobot 类通过键盘按键进行放大/缩小操作。