如何在Selenium中通过HTML5 Canvas执行鼠标滚轮滚动？ [英] How to perform Mouse Wheel scrolling over HTML5 Canvas in Selenium?

问题描述

我正在研究GWT应用程序（类似于Paint）。在这里，我有一个HTML5 Canvas，其中有一个功能，滚动鼠标滚轮上下将放大和缩小画布。

I am working on a GWT Application (similar to Paint). In this, I have an HTML5 Canvas in which there is a functionality that scrolling a mousewheel up and down will zoom in and out of the canvas.

我搜索了很多但没有找到解决方法来解决此问题。这是做了什么：

I have searched a lot but didn't find a workaround to fix this issue. Here's what did:

int PosX = 0;
int PosY = 10;
JavascriptExecutor executor = (JavascriptExecutor) getDriver();
String script = "document.getElementById('frontCanvas').scrollBy("
                                + PosX + "," + PosY + ")";
executor.executeScript(script); 

WebDriverWait wait = new WebDriverWait(getDriver(), 20);
wait.until(ExpectedConditions.javaScriptThrowsNoExceptions(script));

现在，上面的代码适用于另一个Angular应用程序，我在其中向上和向下滚动div element（有一个滚动条）但它在我的画布上没有工作（它没有滚动条）。

Now, this above code is working for another Angular application in which I am scrolling up and down a div element (which has a scrollbar) but it is not working on my canvas (which doesn't have a scrollbar) in the GWT application.

我使用的是Selenium 3.14。 0并在Chrome浏览器上运行此代码。
有人可以建议如何解决这个问题吗？

I am using Selenium 3.14.0 and run this code on the Chrome browser. Can anyone suggest what can be done to fix this issue?

推荐答案

HTML5 Canvas

HTML元素用于绘制图形，苍蝇，通过JavaScript。元素只是图形的容器。您必须使用JavaScript来实际绘制图形。 Canvas有几种绘制路径，方框，圆圈，文本和添加图像的方法。

HTML5 Canvas

The HTML element is used to draw graphics, on the fly, via JavaScript. The element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

一般来说，要滚动 鼠标滚轮 向上和向下我们可以选择 Actions 。但是根据使用Selenium WebDriver自动测试HTML5 Canvas应用程序看来这个API并不可靠。在Firefox中，每个鼠标按下，鼠标向上，或鼠标点击发生在元素的中心。所以上面的代码产生了一个鼠标移动事件到提供的（ x ， y ），然后是鼠标移动事件到画布中心，然后鼠标按下，鼠标移动和点击全部位于Canvas的中心。对于按钮来说这可能没什么问题，但是对于画布是不可行的，你希望能够 hover ，在特定位置单击等。在Safari中情况更糟，它只会产生一个异常，表明不支持鼠标移动事件。与此同时，Chrome工作正常。

In general, to scroll the mousewheel up and down we could have opted for the Actions Class. But as per Automated Testing of HTML5 Canvas Applications with Selenium WebDriver it seems this API is not that reliable. In Firefox, every mouse down, mouse up, or mouse click happens at the center of the element. So the code above produces a mouse move event to the provided (x,y), then a mouse move event to the center of the Canvas, then a mouse down, mouse up, and click all at the center of the Canvas. That may be fine for a button, but is unworkable for a Canvas, where you want to be able to hover, click, etc. at a specific location. The situation is even worse in Safari, where it just produces an exception indicating that mouse move events aren't supported. Chrome, meanwhile, works fine.

解决方法是使用 JavascriptExecutor 界面使用JavaScript手动调度合成鼠标事件。

An work around would be to use the JavascriptExecutor Interface manually dispatching synthesized mouse events using JavaScript.

从@ FlorentB中取出一片叶子。史诗回答，滚动 鼠标滚轮 向上和向下，您可以发出鼠标悬停， mousemove 和 wheel 事件使用脚本注入的top元素，您可以使用以下解决方案：

Taking out a leaf out from @FlorentB.'s epic answer, to scroll a mousewheel up and down, you can emit the mouseover, mousemove and wheel events to the top element with a script injection and you can use the following solution:

• 代码块：

• Code Block:

package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class Canvas {

    static WebDriver driver;
    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
        ChromeOptions options = new ChromeOptions();
            options.addArguments("start-maximized");
            options.addArguments("disable-infobars");
            options.addArguments("--disable-extensions");
        driver = new ChromeDriver(options);
        driver.get("https://www.google.co.uk/maps");
        WebElement elm = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#scene > div.widget-scene > canvas")));
        // Mouse wheel UP or Zoom In 
        wheel_element(elm, -500, 0, 0);
        System.out.println("Mouse wheel UP or Zoom In through Wheel achieved !!!");
        // Mouse wheel DOWN or Zoom Out 
        wheel_element(elm, 120, 0, 0);
        System.out.println("Mouse wheel DOWN or Zoom Out through Wheel achieved !!!");
        System.out.println("Mouse Scroll through Wheel achieved !!!");
    }

    public static void wheel_element(WebElement element, int deltaY, int offsetX, int offsetY)
    {
        try{
              String 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;"
                  +"}"
                +"}";  

              WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].parentNode;", element);
              ((JavascriptExecutor) driver).executeScript(script, parent, deltaY, offsetX, offsetY);
            }catch(WebDriverException e)
            {
            System.out.println("Exception caught in Catch block");
            }
    }

}

控制台输出：

Console Output:

Mouse wheel UP or Zoom In through Wheel achieved !!!
Mouse wheel DOWN or Zoom Out through Wheel achieved !!!
Mouse Scroll through Wheel achieved !!!

这篇关于如何在Selenium中通过HTML5 Canvas执行鼠标滚轮滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！