如何通过坐标单击画布中的特定元素（使用WebDriver）？答案

【问题标题】：How to click on specific element in canvas by its coordinates (using WebDriver)?如何通过坐标单击画布中的特定元素（使用WebDriver）？
【发布时间】：2014-09-30 20:08:43
【问题描述】：

我的页面上有一个画布元素，我想单击此画布中的特定 (x, y) 坐标。我使用 watir-webdriver：

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

但是这段代码只是点击了画布的中心，而不是指定的 (x, y) 坐标。它有什么问题？

更新：所以现在我使用这个代码：

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

但它仍然点击画布的中心，而不是指定的 (x, y) 坐标...有什么想法吗？

UPD 2：这只是 FIREFOX 问题（在 Chrome 中运行良好）

【问题讨论】：

我已根据您的 FF 问题更新了我的答案。让我知道是不是这样。
我正在使用 selenium-webdriver 2.37.0 和 Firefox 25.0.1。我的操作系统是 Ubuntu 13.04。
尝试使用 FF 24 available here。我用 FF 25 测试，发现它不支持原生事件。
是的！它现在适用于 FF 24。非常感谢！关于原生事件在 25 年不起作用的任何想法？
我相信本机事件支持仅适用于 FF 的 ESR（扩展支持版本）版本。如果一个版本不是 ESR，那么将不支持它的本地事件。 FF 25 不是 ESR，所以不支持。你可以询问 Selenium 是否有本地事件可用。最高 2.37 的版本有一个错误，使这个查询不可靠，但我已经输入了一个 patch 已被接受。所以下一个版本应该是可靠的。

标签： ruby canvas selenium watir watir-webdriver

【解决方案1】：

运动

move_to(element) 移动到指定元素的中心，move_by 是相对移动。所以在这两个操作结束时，你已经移动到了坐标(x of element center + x, y of element center + y)。

您应该使用move_to(element, x, y)。这将移动到相对于元素原点的x, y 坐标。

火狐

您是否使用 Selenium 支持本机事件的 Selenium 和 Firefox 版本？ Selenium 2.37 与 Firefox 24 的组合确实如此。我的测试套件因为原生事件不可用而失败。

【讨论】：

谢谢，路易斯。 'move_to' 建议很有帮助。它确实将鼠标移动到指定的坐标。但是当我使用'click()'时，指针仍然移动到画布的中心并点击它：driver.action.move_to(element, 30, 30).perform driver.action.click.perform
如何确定 Selenium 点击的位置是画布的中心？
Canvas 对鼠标移动做出反应并单击并显示它们。当我使用 move_to 时，它显示了正确的结果。但是当我调用 click() 鼠标立即移动到中心。您可以在此处查看示例：processing.org/examples/follow1.html
根据我在 Selenium 方面的经验，我会这样做：在 jsfiddle 中构建一个非常简单的案例，或者任何测试我可以做我想做的事。如果我可以在简单的情况下做到这一点，那么当我想测试实际应用程序时我做错了，或者这个应用程序的工作方式不适合我正在尝试做的事情。如果我不能用简单的案例做到这一点，并且如果我绝对相信我正确使用了 Selenium，那么我在 Selenium 中发现了一个错误。
感谢您的帮助！

【解决方案2】：

我让 Selenium 使用以下方法在 Canvas 元素中选择一个区域：

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();

祝你好运！

【讨论】：

【解决方案3】：

下载最新的 selenium webdriver 2.42.1.Tested 并且在 firefox 中运行

【讨论】：

【解决方案4】：

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

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

【讨论】：