How to click the center of the canvas in Java Selenium Driver?

问题

I'm trying to write the code to click a canvas center in the web page.

Here is the code below:

private static void clickCanvasCenter() {
    WebElement we = driver.findElement(By.tagName("canvas"));
    int x = we.getSize().width/2;
    int y = we.getSize().height/2;

    Actions builder = new Actions(driver).moveToElement(new WebDriverWait(driver,20)
                .until(ExpectedConditions.elementToBeClickable(we)));

    System.out.println("width:" + x + "\theight:" + y);
    builder.click().build().perform();
    System.out.println("clicked:1");

    builder.moveByOffset(x, y).click().build().perform();
    System.out.println("clicked:2");
}

and the output is:

width:683   height:341
clicked:1
Exception in thread "main" org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: move target out of bounds
  (Session info: chrome=79.0.3945.130)

In above code that if I did not move the mouse by moveByOffset() method, the click action can be executed (because you can see 'clicked:1'), however it did not click the center of the canvas element. If I tried to move the mouse across the canvas element, then the exception raised.

How can I make it work and click the center of the canvas element?

回答1:

The relevant DOM Tree would have helped us to construct a cannonical answer. However, while dealing with <canvas> elements you need to consider a few things:

• The upper-left corner of the <canvas> has the coordinates (0,0), while
• Using the W3C Action class commands, offsets are from the center of element.

Usually, the <canvas> element will be having the following attributes:

• width
• height
• style containing the attribues width, height, etc

As an example:

<canvas id="canvas" width="227" height="294" style="position: absolute; display: block; background-color: rgb(255, 255, 255); width: 227.53px; height: 294px;"></canvas>

Now, to click at the centre of the <canvas> element within the webpage, you really, don't need to calculate:

• we.getSize().width/2;
• we.getSize().height/2;

As:

The current implementation of Action class commands, offsets are from the center of element.

So, you can use the following solution:

WebElement canvas = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("canvas")));
//clicking on the centre
new Actions(driver).moveToElement(canvas).click().build().perform();

Incase, you want to click at an offset, you need to use moveByOffset() as follows:

new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset((683/5)*3,(341/5)*3).click().build().perform();

---

Reference

You can find a relevant detailed discussion in:

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

来源：https://stackoverflow.com/questions/60061414/how-to-click-the-center-of-the-canvas-in-java-selenium-driver