1

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?

meyi
  • 7,574
  • 1
  • 15
  • 28
Alex Hou
  • 15
  • 1
  • 5
  • it should click the center.... the offset moves from the pointer's current position. It sounds like portions of the canvas are outside of the viewport. What is the size of the window before the exception is thrown? Or the Window's innerHeight and innerWidth? – pcalkins Feb 05 '20 at 00:25
  • Try to use chrome 74 or refer to following link: https://stackoverflow.com/questions/59819502/movetargetoutofboundsexception-problem-with-chromedriver-version-74 – Yun Feb 05 '20 at 03:24

1 Answers1

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:

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352