How to click on specific element in canvas by its coordinates (using WebDriver)?

Question

I have a canvas element on my page and I want to click on specific (x, y) coordinates in this canvas. I use watir-webdriver:

element = browser.driver.find_element(:id, 'canvas')
browser.driver.action.move_to(element).move_by(x, y).click().perform

But this code just clicks on the center of the canvas, not the specified (x, y) coordinates. What is wrong with it?

UPD: So now I use this code:

element = browser.driver.find_element(:id, 'canvas')
browser.driver.action.move_to(element, x, y).perform
browser.driver.click.perform

But it still clicks on the center of the canvas and not on specified (x, y) coordinates... Any thoughts?

UPD 2: This is only the FIREFOX issue (works well in Chrome)

Answer 1

Movement

move_to(element) moves to the center of the element specified and move_by is a relative move. So by the end of these two operations, you have moved to the coordinates (x of element center + x, y of element center + y).

You should use move_to(element, x, y). This will move to the x, y coordinates relative to the origin of the element.

Relevant documentation.

Firefox

Are you using a version of Selenium and Firefox for which Selenium supports native events? The combination of Selenium 2.37 with Firefox 24 does. I've had test suite fails just because native events were not available.

Answer 2

I got Selenium to select an area within the Canvas element using the following method:

public void selectCanvasArea(int xCanvas, int yCanvas, int xTarget, int yTarget) {
    action.moveToElement(driver.findElement(By.id("Canvas")),xCanvas,yCanvas) //(300,300)
            .clickAndHold()
            .moveByOffset(xTarget,yTarget) //(600,150)
            .release()
            .perform();

Good luck!

Answer 3

Download latest selenium webdriver 2.42.1.Tested and it's working in firefox

Answer 4

            Robot robot = new Robot();
            robot.delay(3000);

            robot.mouseMove(x, y);
            robot.mousePress(InputEvent.BUTTON1_MASK);
            robot.mouseRelease(InputEvent.BUTTON1_MASK);