我正在开发 GWT 应用程序(类似于 Paint)。在这里，我有一个 HTML5 Canvas，其中有一个功能，可以上下滚动鼠标滚轮来放大和缩小 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 元素(它有一个滚动条)但它在我的 Canvas (没有滚动条)上不起作用GWT 应用程序。

我正在使用 Selenium 3.14.0 并在 Chrome 浏览器上运行此代码。 谁能建议如何解决此问题？

最佳答案

HTML5 Canvas

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

一般来说，要滚动鼠标滚轮向上和向下，我们可以选择Actions。类(class)。但根据 Automated Testing of HTML5 Canvas Applications with Selenium WebDriver看来这个 API 不是那么可靠。在 Firefox 中，每个 mouse down、mouse up 或 mouse click 都发生在元素的中心。所以上面的代码产生了一个mouse move事件到提供的(x,y)，然后是一个mouse move事件到 Canvas 的中心，然后 mouse down、mouse up 和 click 都在 Canvas 的中心。这对于按钮来说可能没问题，但对于 Canvas 来说行不通，因为您希望能够在此处悬停、单击 等一个特定的位置。在 Safari 中情况更糟，它只是产生一个异常，表明不支持鼠标移动事件。与此同时，Chrome 运行良好。

备选

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

摘自@FlorentB. 的 answer ，要滚动鼠标滚轮向上和向下，您可以发射鼠标悬停， mousemove 和 wheel events 通过脚本注入(inject)到顶部元素，您可以使用以下解决方案:

• 代码块:

  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 !!!
  

引用

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

• How to find the coordinates of the buttons on a canvas, and click on them after using Java and Selenium?

关于java - 如何在 Selenium 中执行鼠标滚轮在 HTML5 Canvas 上滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53409984/