元素不在 canvas 内移动

Question

我很想在 canvas 内移动元素，但不知何故它没有发生。

我试过的代码：

        Actions actions = new Actions(driver);
        actions.moveToElement(flowCanvas, 434, 177);
        actions.clickAndHold();
        actions.moveToElement(flowCanvas, 592 , 373);
        actions.release();
        actions.perform();

我的 xpath :

   @FindBy(xpath = "//div[@id='diagramDiv']//canvas")
    protected WebElement flowCanvas;

URL 我正在尝试的地方：https://gojs.net/latest/samples/panelLayout.html

我正在使用 selenium webdriver 和 Java。我在上面的代码中没有收到任何错误，但它也没有移动元素。

正在尝试移动以下元素：

Answer 1

尝试操作和操作组合

Actions builder = new Actions(driver);
Action moveAction = builder.moveToElement(flowCanvas,434,177)  
                 .click()
                 .moveByOffset(592, 373) 
                 .doubleClick()
                 .build();
moveAction.perform();

Answer 2

基本上，问题出在您使用的坐标和您使用的 bowser / web 驱动程序实现上。 W3C specification 表示动作命令偏移量是从元素的中心开始的。但并不是所有的网络驱动程序实现都遵循这一点。所以基本上 gecko 驱动程序 (Firefox) 的 moveToElement x 和 y 偏移量是从元素的中心计算的 Canvas 但对于 Chrome 驱动程序 (Google Chrome) 坐标从左上角开始计算。所以如果你想要跨浏览器支持拖放，你需要这样的东西。

WebDriver driver = getDriver();

driver.get("https://gojs.net/latest/samples/panelLayout.html");
WebElement flowCanvas = driver.findElement(By.xpath("//div[@id='myDiagramDiv']//canvas"));

if(isGoogleChrome()){
    new Actions(driver)
   .moveToElement(flowCanvas, 100, 125).clickAndHold()
   .moveToElement(flowCanvas, 150, 175).release()
   .perform();
} else if (isFireFox()){
    new Actions(driver)
    .moveToElement(flowCanvas, -50, -50).clickAndHold()
    .moveToElement(flowCanvas, 100, 100).release()
    .perform();
}

如您所见，对于 firefox，您必须使用负值将鼠标从中心移动到 canvas 中的左上角元素，对于 chrome，您需要将鼠标向下和向右移动一点.

Answer 3

我尝试用 Sikuli 移动那个对象，它非常有效。请检查下面的代码段。

    Pattern p = new Pattern("Win/AboutScreen/Move.PNG");
    Region r1 = screen.exists(p);
    r1.hover();
    r1.mouseDown(Button.LEFT);
    r1.mouseMove(50, 50);
    r1.mouseUp(Button.LEFT);

您需要在某个位置保存屏幕截图并注明路径。 hover(); 方法会找到屏幕并将鼠标悬停在上面。 mouseDown(Button.LEFT) 将保持左键单击，最后一个 mouserMove(50,50) 将元素移动到坐标。

如果您使用的是 Maven 项目，安装 Sikuli 非常简单，只需添加一个简单的依赖项即可。

希望对您有所帮助:)

元素不在 canvas 内移动

Element does not move within canvas

java

selenium-webdriver

gojs