如何在 Selenium 中的 HTML5 Canvas 上执行鼠标滚轮滚动？

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

我进行了很多搜索，但没有找到解决此问题的解决方法。这是所做的：

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 元素（有滚动条），但它在 GWT 应用程序中的画布（没有滚动条）上不起作用。

我使用 Selenium 3.14.0 并在 Chrome 浏览器上运行此代码。 谁能建议可以采取什么措施来解决这个问题？

HTML5 画布 https://www.w3schools.com/html/html5_canvas.asp

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

一般来说，要scroll the 鼠标滚轮 up and down我们本可以选择Actions https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/interactions/Actions.html班级。但根据使用 Selenium WebDriver 自动测试 HTML5 Canvas 应用程序 https://chariotsolutions.com/blog/post/automated-testing-of-html5-canvas/看来这个API不太可靠。在 Firefox 中，每个mouse down, mouse up, or mouse click发生在元素的中心。所以上面的代码产生了一个mouse move提供的事件（x,y），那么一个mouse move事件到画布的中心，然后mouse down, mouse up, and click全部位于画布的中心。这对于按钮来说可能没问题，但对于Canvas，您希望能够在哪里hover, click等在特定位置。在 Safari 中情况更糟，它只是产生一个异常，表明不支持鼠标移动事件。与此同时，Chrome 运行良好。

选择

解决方法是使用JavaScript执行器 https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/JavascriptExecutor.html使用 JavaScript 手动调度合成鼠标事件的界面。

借鉴@FlorentB.的经验answer https://stackoverflow.com/questions/47274852/mouse-scroll-wheel-with-selenium-webdriver-on-element-without-scrollbar/47287595#47287595, to scroll a 鼠标滚轮 up and down，你可以发出鼠标移到, 鼠标移动 and wheel events通过脚本注入到顶部元素，您可以使用以下解决方案：

• 代码块：

  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");
              }
      }
  
  }
  

• 控制台输出：

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

参考

您可以在以下位置找到一些相关的详细讨论：

• 使用Java和Selenium后如何找到画布上按钮的坐标并单击它们？ https://stackoverflow.com/questions/59918530/how-to-find-the-coordinates-of-the-buttons-on-a-canvas-and-click-on-them-after/59923053#59923053